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(),具体见下表:

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类中第一个原生对象