jQuery技术

一起来学jquery(2)

字号+ 作者:H5之家 来源:H5之家 2017-05-10 15:09 我要评论( )

①$(a).wrap($(b)) 把a用b包裹起来(每个元素都会包裹) unwrap不包裹 ②wrapAll: 包裹所有(所有元素包裹在一起) ③wrapInner: 内部包裹(会包裹指定元素的下一级) 4)替换:replaceWith ①$(a).replaceWith($(b)) 用b替

①$(a).wrap($(b))  把a用b包裹起来(每个元素都会包裹)  unwrap不包裹 
②wrapAll:  包裹所有(所有元素包裹在一起) 
③wrapInner:  内部包裹(会包裹指定元素的下一级)

4)替换:replaceWith

①$(a).replaceWith($(b))  用b替换a 
②replaceAll    $(a).replaceAll($(b))   用a替换b 
//旧节点替换也是位置移动

5)删除:empty

①empty  删除父节点下的子节点(不包括父节点) 
②remove  删除指定的节点

6)克隆:clone(复制)将内容复制一份 
①var a = $('b').clone(false);    //只复制节点,不包括事件; 
②var a = $('b').clone(true);        //复制节点和其事件;

7)attr()的使用: 

①元素.attr();获取属性

②元素.attr(attr,value);设置属性

示例$("input").attr("value"); //获取 
$("input").attr("value","abcd"); //设置

③元素.attr({value:"zhi",type:"zhi"});设置多个属性的方法

注意: jquery中不允许在attr中修改或删除type属性

8)val()的使用: 

val()在复选框(checkbox)中的使用demo:

    1)获取(被选中复选框的value值) 
①获得全部的被选中复选框元素节点对象 
②遍历全部的被选中复选框 
③如果有选中就获得其value值

function f1(){ var s = ""; for(var i = 0;i<$('input:checked').length;i++){ s+=$('input:checked:eq('+i+')').val()+","; } s = s.substr(0,s.length-1);//去除最后的"," console.log(s); }

2)设置(复选框中的含某些value值的项目被选中)

function f2(){ $('input').val([1,2,4]); }

  //注意:下拉列表(select option)和单选按钮(radio)的val()获取不需要遍历,直接使用$('').val()即可

后续会增加each的用法,便可省去循环遍历的麻烦!

(五)jquery核心:选择器

1,基础选择器: #id(id属性); .class(class属性); element(标签名); *(通配符)

①* 选择器用法示例:$('div *')选中div标签下所有子标签

②selector1,selector2 选择器示例:$('div,p,ul')并集选择器使用

③>表示选中指定的元素唯一的一级子代元素 
注意:还有$(s1 s2)是选中s1下所有s2节点

④+表示选中指定元素其后紧邻的唯一一个元素  示例:$('#mw+')

⑤~表示选中指定元素其余所有的元素  示例:$('#mw~')

2,过滤选择器: 过滤选择器以 : 开头

①:eq(index)按照指定的索引值进行过滤(索引是从0开始的)  示例:$("li:eq(2)") 
②:gt(index)过滤大于指定索引值的所有元素 
③:contain("text")匹配含有text内容的元素  示例:$("div:contains('文本内容')") 
④:empty匹配内容为空的元素 示例:console.log($("div:empty")); 
⑤:has(selector) 选择包含selector的选择器 
⑥:lt(index)过滤小于指定索引值的所有元素 
⑦(注意:无论大于还是小于,都不包含自身) 
⑧:header 选择所有的 h 标签 
⑨:not(select)选择除了select的对象  示例:$("li:not(#id名)")    

注意    :1)并且选择器可以使用多个,每个判定时下标都归零

2)并且选择器使用时没有前后顺序,但要注意不要产生歧义

3)各种选择器都可以构成并且选择器

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • jQuery选择器 事件及常用方法视频教程

    jQuery选择器 事件及常用方法视频教程

    2017-05-11 11:01

  • jQuery如何工作

    jQuery如何工作

    2017-05-10 13:15

  • 30个经典的jQuery代码开发技巧【站长博客网】

    30个经典的jQuery代码开发技巧【站长博客网】

    2017-05-10 13:13

  • jQuery提示通知插件jBox

    jQuery提示通知插件jBox

    2017-05-10 11:11

网友点评
<