JQuery强大的操控标签能力

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()

  

  


原文地址:https://www.cnblogs.com/skaarl/p/9385473.html