12-7jquery选择器学习

p:odd 选择奇数个数的p标签

 

p:even选择奇数个数的p标签

 

p:gt(n)选择下标 大于n的p标签

 

p:lt(n)选择下标小于n的p标签

 

$(":root ")选择的是根元素，也就是说可以控制整个页面的属性例：$(":root").css("background","blue");

 

$("p:target")选择匹配id和标识符相匹配的元素，target在jquery中还有其他的用法例：

 event.target.nodeName

可以用来标示那个元素触发了事件

 

---

 

内容过滤

 

$("div:contains('john')")  查找所有包含john的div元素          //如果是字母的话，则区分大小写

 

$("p:empty")查找所有不包含子元素或者文本的p标签

 

$("p:parent")查找所有包含子元素或者文本的p标签

 

$("div:has(p)")匹配所有包含p标签的div元素

---

可见性过滤器

 

$("div:hidden")匹配所有不可见的元素或者type为hidden的元素

 

$("div:visible") 匹配所有可见的div元素

---

 

属性过滤选择器

 

$("div[id]")查找所有含有id属性的div元素 //可以为任意属性

 

$("input[name='new']") 匹配所有name为new的input元素   //可以为任意自定义的元素

 

$("input[name！='new']") 匹配所name不为new的input元素   //可以为任意自定义的元素

 

$("input[name ^='new']") 匹配所name以new开始的input元素   //可以为任意自定义的元素

 

$("input[name $='new']") 匹配所name以new结束的input元素   //可以为任意自定义的元素

 

$("input[name *='new']") 匹配所包含name字符串的input元素   //可以为任意自定义的元素

 

$("input[name *='new'][id]") 匹配所包含name字符串且有id属性的input元素   //可以为任意自定义的元素

 

---

表单对象属性过滤选择器

 

$("p:disabled") 匹配所有不可用的p标签

 

$("p:enbled") 匹配所有可用的p标签

 

$("input:checked")匹配所有选中的被选中元素,包含复选框，单选框。不包括select中的option

 

$(":selected")匹配所有选中的option元素

 

---

 

 

$("p").index();   匹配出p标签的索引值，还有其他用法：例：

      $("p").index(document.getElementById("a"));  会查询出id为a的p标签的索引值     ，这是以传递一个dom对象，返回这个对象在原先集合中的索引位置

      $("p").index($("#a"));  这是以传递一个jquery对象返回这个对象在原先集合中的索引位置

      $("p").index($('p:gt(0)')  传递一个索引值大于0的集合，并返回第一个元素的索引值

      $("#id").index($("li"))    传递一个选择器，返回#id在所有li中的索引值

      $("#id").index()    不传递参数，返回#id在整个同辈元素中的索引位置

 

$("p").data("a",{key:"value ",key2:"value2 "});        取值的时候语法为：$("p").data("a");

       如果要删除之前添加的数据的话：$("p").removeData("a");

       

 $("p"):animated 获取正在执行动画效果的p标签元素

 

 

---

dom操作

 

设置元素操作

$("img").attr("src","img/a.png");    //这是单个属性设置的时候

$("img").attr({src:"img/a.png",title:"这是a图片"});   //这是设置多个属性的时候

 

删除元素操作

$("img").removeAttr("src");   删除img的src路径

 

元素内容操作

$("span").text ();   //获取span里面的文本内容

$("span").html();  //获取span里面的html内容

 

$("span").text("你好啊"); //设置span的文本内容

$("span").html("你好")；//设置span的html内容

 

.val/.text/.html   

这三个的区别是，

html可以输出html元素节点及文本节点，

val输出的是实体，且val只支持表单元素

text的话如果需要输出的是元素节点的话直接会以实体方式显示出来

 

 

---

$("select").change(function(){

  var str=$("select").val().join(".");

})

这样可以获取每次选择后的select的值

 

        

 addClass属性和removeClass属性可以添加和移出class样式

addClass添加的时候可以如下面的例子一样多个样式：

  $("p").addClass("样式1 样式2 样式3");    //中间用空格隔开

  同样————删除样式也可以如此，例

$("p").removeClass("样式1 样式2 样式3");    //中间用空格隔开

 

toggleClass可以切换样式，例

$("p").click(function(){

   $(this).toggleClass("样式");

});

 

---

 

创建节点元素

append元素的语法：

  $(html)    例

var ap=$("<div title='nihao'>hello</div>");

$("body").append(ap);

或者

$("body").append( "<div title='nihao'>hello</div>" );

 

---

插入节点

append("<div title='nihao'>hello</div>");

另：append(function(){index,html})

 

$("body").append( function(){

      var a= "<div title='nihao'>hello</div>" ;

      return a;

})

 

appendTo的作用是向指定元素插入界面中已存在的元素，例

           <img id ="a" src ="img/s2-1.png" alt ="adadaadds" />

           < img id= "b" src= "img/s2-2.png" alt= "adadaadds" />

           < span id= ""></ span>

           $("img#a").appendTo($( "span"));

 

 

after和appen的作用差不多不过after主要是向...之后添加元素，例：

 

            $("span").after("<div title='nihao'>hello</div>");

       或者

         $("span").after(function(){

             var a=$("<div title='nihao'>hello</div>" );

            return a;

         })

 

before是向....之前插入元素用法与after一样

 

insertAfter的作用其实和after的作用差不多，例

            $("<p>你好</p>").insertAfter("span");

insertBefore的语法如上和insertA

 

 

复制节点

clone复制现有节点元素，例

$("img").click( function(){

     $(this).clone( true).appendTo("span" );

})

 

替换节点

$("span").click( function(){

     $(this).replaceWith( "<span>你好啊啊啊</span>" );

})

$("#id").replaceWith("content");   //第二个括号里面放的会是内容或者元素节点+内容或者是对象

 

 

replaceAll和replaceWith最大的区别在于替换字符的顺序

$("<span>你好啊啊啊</span>").replaceAll("#a");

 

包裹元素

wrap的作用是用元素包裹起指定的元素，例

$("span").wrap( "<i></i>" );

 

---

 

向上查找祖先元素

parent是向上一级，parent是所有父级

 

parentsUntil的作用是匹配指定范围内的父级元素，如果不加参数的话，则相当于parents，匹配所有父级元素。

获取到的是多个值,

语法是：

$("li.ac").parentsUntil("ul").css("background","red");

 

offsetParent是向上找到当前元素的第一个定位祖先元素，offsetParent

 

closest的作用是查找指定的父级元素对象，向上寻找，查找到，便停止。切只能返回0或者1个元素

语法是：

$("li.ac").closest("ul").css("background","red");

 

向上查找相邻元素

prev方法用来向上查找相邻元素 注：prev如果不填参数，则向上所有上一个相邻，也就是获取向上最近的一个，。在，如果有参数，则筛选

语法为：

     $(".av").prev().text();

 

prevAll向上查找所有邻近元素，无参的时候则是向上匹配所有元素，有参的话，就筛选出符合条件的对象

 

prevUntil不填参数的时候可以向上匹配所有同级元素，填了的话则匹配符合的元素

 

向下查找相邻元素

反向的next,nextAll和nextUntil的语法参照上面的向上查找

 

 

删除元素

remove的用法

$("ul li:eq(0)").remove();   删除ul下面第一个li及其内所有元素

$("ul li").remove("[title=3]");删除title为3的元素及其内所有元素