3.jQuery常用方法

#3.1 dom属性相关方法

• addClass() 为每个匹配的元素添加指定的样式名

$('div').addClass('box'); //为页面中所有的div添加一个box样式

• removeClass() 移除集合中每个匹配元素上一个、多个或全部样式

$('p').removeClass('myClass yourClass')

• toggleClass() 样式切换，如果有就删除，如果没有就添加

$("p").click(function () {
      $(this).toggleClass("highlight");
});

• css() 设置或者获取css样式

$('div').css('color','red'); //设置所有div字体颜色为红色
$('div').css('color')  //获取颜色
$('div').css('color',function(index,item){
      if(index<=4){
           return  'blue'; 
      }
}) //下标小于4的都设置成蓝色

• html() 设置或者获取元素的 html内容

$('p').html() //获取p标签里面的内容
$('p').html('床前明月光')；//设置html里面的内容

• text() 设置或者获取元素的文本内容

$('p').text();
$('p').text('床前明月光')；

总结：html方法功能和原生方法innerHTML一样 ，text方法功能和原生方法innerText一样，因此，区别就在于前者既可以获取标签，后者只可以获取文本 val() 获取或者设置表单元素的值，这里要注意的是 获取的是表单元素的值 不要和html 以及 text方法搞混

 $("button").click(function () {
      var text = $(this).text();
      $("input").val(text);
    });

• each 循环方法

$("li").each(function(index, item){
   //index 为li的下标  item表示每个li
   console.log(index, item)   
]})

• attr() 设置或者获取元素的属性

var title = $("em").attr("title");
$("div").text(title);

• prop()设置或者获取元素的属性

$("input").prop("checked", true);

• removeAttr() 删除属性

$("input").removeAttr("data");

• removeProp()

$("input").removeProp("checked");

总结：具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()，具体见下表：

image

#3.2 dom操作相关方法

• append

$("#ul").append(li); //在ul中添加一个li元素 ，这个元素被添加到ul中原有元素的后面

• appendTo

$(li).appendTo($("#ul")); //把li元素添加到ul中 ，这个元素被添加到ul中原有元素的后面

• prepend

$("#ul").prepend(li); //在ul中添加一个li元素 ，这个元素被添加到ul中原有元素的前面

• prependTo

$(li).appendTo($("#ul")); //把li添加到ul中 ，这个元素被添加到ul中原有元素的前面

总结：以上几个方法 元素属于父子关系

• after

$("#li1").after($("#li2")); // 在li1 后面添加一个 li2 元素

• insertAfter

$("#li2").insertAfter($("#li1")); // 把li2 添加到li1 后面

• before

$("#li1").before($("#li2")); // 在li1 前面添加一个 li2 元素

• insertBefore

$("#li2").insertBefore($("#li1")); // 把li2 添加到li1 前面

#3.3 其他方法

• index()

$("box").on("clicki",function(){
      $(this).index();//得到当前被点击的对象的 下标
})

• prev()

$(".box").prev() //获取前面一个兄弟节点

• prevAll()

$(".box").prev() //获取前面所有的兄弟节点

• next()

$(".box").next() //获取后面一个兄弟节点

• nextAll()

$(".box").nextAll() //获取后面所有的兄弟节点

• siblings()

$(".box").siblings() //获取所有的兄弟节点

• find()

$(".box").find("p"); //找到box类下面所有的p标签

• closest()

$("input").closest('li');//找到input上面最近的li父级

• get()

$(".box").get(0);  //获取所有box类中第一个原生对象