- 压缩:UglifyJS
- jquery对象转化为DOM对象使用[index]或者get(index)
- DOM对象转化为jquery对象使用$(DOM对象)
- jQuery.noConflict()是将变量的控制权移交给其他库,如果jQuery想要自定义一个快捷方式的话,就给它赋值一个变量。如果还想继续使用$又不和其他库发生冲突的话,就使用下面两种方法:
如果其他库在jQuery之前,就要先写jQuery.noConflict();,如果是在之后的话,就可以不用写。
(1) jQuery(function($){在这里面写jQuery代码})
(2) (function($){在这里面写jQuery代码})(jQuery);
- 在js中,当获取到的元素不存在的话就会出错,但是在jQuery中,是不会出错的,因此如果要在jQuery中判断某个元素是否存在的时候,就不能直接使用if($(‘#ss’)){}
可以使用下面的方法:
(1) 通过长度判断:if($(‘#ss’),length > 0){}
(2) 将jQuery对象转化为DOM对象if($(‘#ss’)[0]){}
- + 相当于 next() 是当前元素后面直接匹配的元素(同辈)
~ 相当于 nextAll() 是当前元素后面有匹配的所有元素(同辈)
sibling() 是当前元素前后有匹配的所有元素(同辈)
- 过滤选择器
(1) 基本过滤选择器
:first :last :even :odd :not() :eq()【从0开始】
:gt() :lt() :header【所有标题元素】 :animated :focus
(2) 内容过滤选择器
:contains(“”) :empty【不包含子元素或文本】
:has(‘p’) :parent【含有子元素和文本】
(3) 可见性过滤选择器
:hidden :visible
(4) 属性过滤选择器
! ^ $ |(前缀- / 等于) *(含有) ~(空格分隔)
(5) 子元素过滤选择器
:ntn-child(index【从1开始】/even /odd /3n+1…(n从1开始) )
PS:3n+1解释为从第1个元素开始,每隔3个
:first-child :last-child :only-child(唯一的子元素(只有一个))
(6) 表单对象属性过滤选择器
:enable :disable :checked :selected
(7) 表单选择器
:input【<input>/ <textarea>/ <select>/ <button>】 :text【单行文本】
:password :radio :hidden……
- 当遇到在html中,id/ class。。。包含有特殊字符? 、 # ( ]等特殊字符的,不能直接获取,需要在特殊字符前面加上转义符转义一下(\\)
- 如果使用jQuery版本1.3.1以上的版本,不需要在(选择器)属性前面加上@,使用的话,可能会出错
10.创建元素节点:$(‘<li></li>’); 然后使用append添加
创建文本节点:$(‘<li>123</li>’); 然后使用append添加
创建属性节点,同上多加了属性
11.插入节点:
(1) append() 内部 。。。加入。。。
(2) appendTo() 内部 。。。加入到。。。
(3) prepend() 内部
(4) prependTo() 内部
(5) after() 外部
(6) insertAfter() 外部
(7) before() 外部
(8) insertBefore() 外部
12.删除节点
remove() 本身连同后代节点一起被删除,绑定的事件失效
detach() 本身连同后代节点一起被删除,绑定的事件、附加数据保留下来
empty() 清空节点
13.复制节点
clone() 这样复制的元素不带有任何行为,想把绑定的事件也一同复制下来的话,就需要在()里面加上true
14.替换节点
replaceWith() 。。。替换成。。。
replaceAll() 用。。。替换。。。
PS:在替换的过程中,原本节点如果有绑定事件的话,也会一并被替换掉
15.包裹节点
wrap() 把。。。用。。。包裹起来(每个匹配的单独包裹) -----在外面
wrapAll() 把。。。用。。。包裹起来(每个匹配的一起包裹,而且被包裹的可能包含包含一些其他的元素)-----在外面
wrapInner() 把。。。用。。。包裹起来 -----在里面
16.属性操作
attr()
removeAttr()
addClass() //追加样式
removeClass()
toggle() //切换样式
hasClass() //是否含有某个样式
html() // 相当于innerHTML,使用的时候里面的元素会全部被替换掉,也可以增加节点,增加的节点会被成为DOM元素
text() // 相当于innerText, 里面的元素会全部被替换掉,也可以增加节点,增加的节点也会成为文本
val() // 相当于value属性,用来设置和获取元素的值 ---输入框、按钮、单选、多选。。。
17.遍历节点
children() // 子元素
next() //后一个同辈元素
prev() //前一个同辈元素
siblings() // 前后所有同辈元素
closest() // 往上查找,直到找到最先匹配的元素,没有的话,则返回空
parent() // 上一级匹配的所有父级元素
parents() // 每一个匹配的所有祖先元素
18.CSS-DOM操作
css()
height() // 获取到的值不带单位
width()
position()
left()
right()
scrollTop() // 滚动条距离顶端距离,可以设置值 回到顶端 $(document).scrollTop(0);
scrollLeft()
19.事件
(1) bind() // 事件绑定 多个绑定事件可以使用多个bind,也可以把事件类型用空格分开一次性绑定(推荐)
(2) unbind() //事件移除
(3) one()
(4) jquery1.7之后 on() off() deletage() undeletage()
20.事件对象的属性:
(1) event.type 事件发生的类型(click、mousrover…)
(2) event.preventDefault ()
(3) event.stopPropagation()
(4) event.target 事件发生的元素
(5) event.relateTarget
(6) event.pageX / event.pageY
(7) event.which 获取按键的code,比如单击鼠标的键,左中右(1、2、3)
(8) event.metaKey
21.模拟操作
trigger() 比如:$(‘#btn’).trigger(‘click’);模拟单击事件
还有可以模拟用户自定义的事件,以及可以传递参数,传递的参数作为trigger的第二个参数
22.动画
(1) show() 和 hide() ---改变display
(2) fadeIn() 和 fadeOut() –改变透明度
(3) slideUp() 和 slideDown() –改变高度
(4) animate({设置参数}, speed, callback);
可以设置累加和累减,比如{‘left’: ‘+=50px’}
可以在callback里面设置当前动画完成的时候要执行的效果方法
(5) stop() 停止动画 里面放两个参数
第一个是否清空未执行的动画序列
第二个是否直接跳到末状态
(6) is() 判断是否处在某种状态 比如:is(":animated”);
(7) delay(1000) 延迟
(8) toggle() 切换可见状态 – 改变高度、宽度、不透明度
(9) slideToggle() -- 改变高度
(10) fadeTo() 把元素以渐变的方式调整到指定值 比如:fadeTo(600,0.2)
(11) fadeToggle() --改变不透明度
23.表单
(1) 设置disabled、checked属性的时候,不要使用attr,使用prop
(2) 表格
表格的odd和even的索引是从0开始的
24.Ajax