1.jquery常用选择器
--------------层次选择器
parent():返回所有父元素
parents():返回所有祖先元素
children():返回子节点
contents():返回所有的子孙节点
find():返回所有的子孙节点
siblings() ;返回所有的兄弟节点
pre():返回上一个兄弟节点
next():返回下一个兄弟节点
---------------------------过滤条件选择器
1、:first 返回匹配找到的第一个元素
2、:last 返回 匹配找到的最后一个元素.与 :first 相对应.
3、:not(selector) 去除所有与给定选择器匹配的元素.有点类似于”非”,意思是没有被选中的input(当input的
type=”checkbox”).
4、:even 匹配所有索引值为偶数的元素,从0开始计数
5、:odd 匹配所有索引值为奇数的元素,和:even对应,从 0 开始计数
6、:eq(index) : 匹配一个给定索引值的元素.eq(0)就是获取第一个tr元素.括号里面的是索引值,不是元素排列数
7、:gt(index) 所有大于给定索引值的元素
8、:lt(index) : 匹配所有小于给定索引值的元素
---------------------表单对象选择器-伪类选择器
1、:enabled
用法: $("input:enabled") 返回值 集合元素
说明: 匹配所有可用元素。意思是查找所有input中不带有disabled="disabled"的input。不为
disabled,当然就为enabled。
2、:disabled
用法: $("input:disabled") 返回值 集合元素
说明: 匹配所有不可用元素。与上面的enable是相对应的。
3、:checked
用法: $("input:checked") 返回值 集合元素
说明: 匹配所有选中的被选中元素(复选框、单选框等,不包括select中的option)。这话说起来有些绕口。
4、:selected
用法: $(”select option:selected”) 返回值 集合元素
说明: 匹配所有选中的option元素.$("select>option:selected")
2.动画效果
slideDown():
slideUp():
show(speed):根据hide()方法记住的display属性值来显示元素。
hide(speed) : 将该元素的display样式改为 "none"
fadeOut() :会在指定的一段时间内降低元素的不透明度,直到元素完全消失("display:none")。
fadeIn() :与fadeOut()完全相反
slideDown():如果一个元素的display属性值为"none",当调用slideDown()时,这个元素将由上至下延伸显示。
slideUp() :与slideDown()完全相反
-----------------------------------自定义动画
animate(params, speed ,callback);
参数说明:
(1)params: 一个包含样式属性及值的映射,比如{property1: "value1", property2: "value2", ····· }
(2)speed : 速度参数,可选。
(3)callback:在动画完成时执行的函数,可选。
3.节点的增删改查
1.创建节点
$('标签语法')
功能:创建标签节点
返回值:返回标签对象
var $div = $('<div></div>');
$div.html('');
2.添加节点
1.内部添加
$obj.append($new);
功能:将$new作为$obj的最后一个子元素添加
$obj.preppend($new);
功能:将$new作为$obj的第一个子元素添加
2.外部添加
1.$obj.after($new);
功能:将$new作为$obj的后一个兄弟元素添加
1.$obj.before($new);
功能:将$new作为$obj的前一个兄弟元素添加
3.删除节点
$obj.remove();
功能:删除$obj
4.数组对象的操作
1.根据指定下标获取元素
$('.banner img').eq(imgIndex);
2.遍历元素
$('.imgNav li').each(function () {});
3.获取当前元素的下标
var index = $(this).index(); 4.获取数组的长度
var isAll = $('[name="check"]').not('input:checked').size() == 0
5.从被选元素组合中移除一个或多个元素
.not()
console.log($('[name="check"]').not('input:checked').size());
5.节点属性的操作
1.html('') 为元素设置标签内容,可以识别标签,等价于innerHTML
2.text('') 为元素设置文本内容,不能识别标签,等价于innerText
3.val('') 用来设置或者读取文本框或者表单控件的值
4.attr('') 设置或读取指定的标签的属性
$('div').attr('id','d1'); 设置属性
console.log($('div').attr('id')); 读取属性
5.removeAttr('属性名') 移除指定的属性
6.事件绑定
1.等待文件加载完毕
$(function () {});
2.事件绑定
原生的事件处理函数不变,jQuery提供了新的绑定方式
1.$obj.事件函数名(function() {});
事件函数名省略on前缀
et:#div.click(function() {});
2.bind(事件名称,function);
et:#div.bind('click',function() {})
3.常见事件
mouseenter: 鼠标移入
mouseleave: 鼠标移除