JavaScript实用小技巧---jquery

1.jquery常用选择器

--------------层次选择器
parent():返回所有父元素
parents():返回所有祖先元素

children():返回子节点
contents():返回所有的子孙节点

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.动画效果

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() {});

猜你喜欢

转载自blog.csdn.net/qq_43192730/article/details/89416249