JQuery强大的操控标签能力

Posted 2020-12-26 skaarl

jquery选择器 

　　$("#myId")          选择id为myId的元素

　　 $(".myClass")     选择class为myClass的元素

　　 $("li")　　　　　选择所有的li元素

　　 $("#ul1 li span")   选择id为ul1元素下面的所有li下的span元素

　　 $("input[name=first]")  选择name属性为first的input元素

 

选择器的过滤

　　$("div").has("p")                  选择包含p元素的div元素

　　 $("div").not(".myClass")     选择class不等于myClass的div元素

　　 $("div").eq(5)                     选择第6个div元素

 

选择器转移

　　$("#box").prev()       选择id是box的元素前面紧挨的同辈元素

　　$("#box").prevAll()   选择id是box的元素之前所有的同辈元素

　　$("#box").next()       选择id是box的元素后面紧挨的同辈元素

　　$("#box").nextAll()   选择id是box的元素后面所有的同辈元素

　　$("#box").parent()    选择id是box的元素的父元素

　　$("#box").children()   选择id是box的元素的所有子元素

　　$("#box").siblings()    选择id是box的元素的同级元素

　　$("#box").find(".myClass")   选择id是box的元素内的class等于myClass的元素

判断是否选中元素

　　用length属性来判断是否找到了元素,length等于0，就是没选择到元素，length大于0，就是选择到了元素。

　　 var $div1 = $("#div1")

　　 alert($div1.length)    弹出1表示选中了

 

jQuery操作样式

　　// 获取div的样式

　　$("div").css("width")

　　$("div").css("color")

 

　　//设置div的样式

　　$("div").css("width", "30px")

　　$("div").css("height", "30px")

　　$("div").css({fontSize:"30px", color:"red"})

　　$("#div1").addClass("divClass2")    为id为div1的对象追加样式divClass2

　　$("#div1").removeClass("divClass")    移除id为div1的对象的class名为divClass的样式

　　$("#div1").removeClass("divClass divClass2")   移除多个样式

　　$("#div1").toggleClass("anotherClass")      重复切换anotherClass样式

 

　

jQuery操作属性

　　1、html() 取出或设置html内容

　　// 取出html内容

　　var $htm = $(‘#div1‘).html()

　　// 设置html内容

　　$(‘#div1‘).html(‘<span>添加文字</span>‘)

　　2、prop() 取出或设置某个属性的值

　　// 取出图片的地址

　　var $src = $(‘#img1‘).prop(‘src‘)

　　// 设置图片的地址和alt属性

　　$(‘#img1‘).prop({src: "test.jpg", alt: "Test Image" })

　　3. 操作value属性可以使用封装好的方法  val()

　　4. 操作自定义属性使用 attr()