jQuery引入
<head>
<script src="jquery-1.9.1.min.js"></script>
</head>
jQuery对象与DOM对象
区别
转换
DOM对象转换成jQuery对象
$(DOM对象);
jQuery对象转换成DOM对象
jQuery对象[index];
jQuery对象.get(index);
jQuery对象的选择器
基本选择器
1、标签选择器
$("a") 获得标签名为a的标签
2、ID选择器
$("#a") 获得id名为a的标签
$("p#id") 获得p标签中 id名为a的标签
3、类选择器
$(".a") 获得class名为a的标签
$("h2.a") 获得p标签中 class名为a的标签
4、通配选择器
$("*") 获得所有标签
5、并集选择器
$("类型1, 类型2, 类型3") 获得三种类型的标签
6、后代选择器
$(ul li) 获得所有ul标签中的所有li标签
7、父子选择器
$(ul > li) 获得所有ul标签中的直接子元素为li的标签
8、后面第一个兄弟元素节点
prev + next 获得prev 标签后面第一个兄弟元素节点
9、后面所有的兄弟元素节点
prev ~ next 获得prev 标签后面所有的兄弟元素节点
属性选择器
- [属性] 匹配包含给定属性的元素
- [属性][属性] 复合属性选择器,匹配同时满足多个属性的元素
- [属性=值] 匹配给定的属性是某个特定值的元素
- [属性!=值] 匹配所有属性不等于特定值的元素
- [属性^=值] 匹配给定的属性是以某些值开始的元素
- [属性$=值] 匹配给定的属性是以某些值结尾的元素
- [属性*=值] 匹配给定的属性是包含某些值的元素
位置选择器
对于整个页面而言的位置选择器
- :first 获取整个页面的第一个元素
- :last 获取整个页面的最后一个元素
- :odd 匹配所有索引值为奇数的元素,0 为偶数
- :even匹配所有索引值为偶数的元素
- :eq(n) 匹配一个给定索引值的元素,n从零开始
- :gt(n) 匹配所有大于给定索引值的元素
- :lt(n) 匹配所有小于给定索引值的元素
对于上级标签而言的位置选择器
- :first-child 匹配第一个子元素
- :last-child 匹配最后一个子元素
- :nth-child(n) 匹配其父元素下的第n个子元素
- :nth-child(odd|even) 匹配其父元素下的奇偶元素
表单选择器
对于表单项的选择器
- :text :password :radio :checkbox :hidden :file :submit
- (特殊):input 匹配所有 input, textarea, select 和 button 元素
注意:$("input")和$(":input")的区别
- $("input"):标签选择器,只匹配input标签
- $(":input"): 匹配所有 input, textarea, select 和 button 等元素
对于表单项状态的选择器
- :selected :checked :disabled
jQuery动画
实现显示动画效果方法:show()
实现隐藏动画效果方法:hide()
实现切换显示和隐藏动画效果方法:toggle()
实现向下滑动动画效果方法:slideDown()
实现向上滑动动画效果方法:slideUp()
实现滑动切换效果方法:slideToggle()
实现淡入动画效果方法:fadeIn()
实现淡出动画效果方法:fadeOut()
实现淡入淡出切换效果方法:fadeToggle()
实现淡入到指定透明度效果方法:fadeTo()
自定义动画
$(选择器).animate({
width: "500px",
height: "500px",
fontSize: "10em"
}, 1000);
jQuery对象的操作
操作文本的函数
- html() 相当于innerHTML
- html() 获取文本节点(标签+文本)
- html(标签)没有则添加标签,有则会覆盖原有的内容
- text() 相当于innerText
- text() 获取文本节点(纯文本)
- text(文本内容) 没有则添加文本,有则会覆盖原有的内容
操作属性的函数
- attr(属性名) 获取属性值
- attr(属性名, 属性值) 设置属性值
- removeAttr(属性名) 移除属性
- prop(属性名) 获取属性值 与alter区别是 返回值是true或者false
- prop(属性名, 属性值) 设置属性值
- val() 获取value属性值
- val(值) 设置value属性值
操作元素的函数
- append()、appendTo() 添加子元素节点(尾插)
- 父元素节点.append(新的子元素节点)
- 新的子元素节点.appendTo(父元素节点)
- prepend()、prependTo() 添加子元素节点(头插)
- before() 、insertBefore() 添加平级元素节点(前面)
- after()、insertAfter() 添加平级元素节点(后面)
- parent() 获取父元素节点
- remove() 删除元素节点
- empty() 删除子元素节点
操作CSS样式的函数
- css(css)
- css(css,val)
- css({css1:val1,css2:val2,…..})
- addClass(值) 追加类属性值,不是覆盖
- removeClass(值) 移除属性值
- toggleClass(值) 不存在,添加。存在,移除
正则表达式的使用
- var reg=/表达式/;
- var reg=new RegExp("表达式");