JQuery常用方法总结

1.什么是JQuery

jQuery就是javascript的一个库，把我们常用的一些功能进行了封装，方便我们来调用，提高我们的开发效率。

2.jQuery 库中的 $符号是什么？

$符号是一个对象，代表JQuery对象。

3.JQuery有几种选择器

• 基本选择器。
  $(“.intro”) 选取所有 class=“intro” 的<p> 元素。

  $(“#dem”) 选取所有 id="demo" 的 <p> 元素。

• 属性选择器。
  $("[href]") 选取所有带有 href 属性的元素。

  $("[href='#']") 选取所有带有 href 值等于 "#" 的元素。

• 层级选择器。
  $(" div >input")选择div下的所有input。

• 过滤选择器。
  $(".main li:odd")匹配所有索引值为奇数的元素。

• 表单选择器。
  $(" #main :input")匹配#main下的所有input。

4.$(document).ready() 是个什么函数？

ready() 函数用于在文档进入ready状态时执行代码。当DOM 完全加载，开始执行JS，好处是使用所有浏览器。

5.window.onload 事件和 jQuery ready 函数有何不同？

window.onload事件需要等待DOM完全加载以及静态资源图片css样式完全加载才会执行js。
jQuery ready() 函数当DOM加载完成就开始执行，不等待静态资源的加载。

$(document).ready(function(){
.......
})
window.onload=function(){
.......
}

6.JQuery对象和原生js互转。

原生js转换JQuery将DOM包含在$()里面就可以。

JQuery转换原生js对象$(''"').get(0).

$(dom)
$(".name").get(0)

7.JQuery中attr和prop的区别

对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。

8.JQuery基本选择器

 $('.list li:first').css('color','red');//选择li的第一个元素。
$('.list li:last').css('color','blue');//选择li元素组合最后一个。
$('.list li:even').css('fontSize','28px');//选择li的奇数元素。
 $('.list li:odd').css('fontSize','12px');//选择li的偶数元素。
$('.list li').eq(1).css('color','pink');//选择li中索引为1的元素，索引从0开始。
$('.list li:gt(1)').css('fontWeight','700');//选择li元素组合中索引值大于1的元素。
$('.list li:lt(1)').css('fontWeight','700');//匹配所有小于给定索引值的元素。
$(":header").css("backgroundColor",'green')//选择所有的标题元素h1-h6。
$(":root").css("background-color","#ccc");//选择该文档的根元素（永远都是html标签）。

9.jQuery内容选择器

• ：contains（“给定文字内容”），匹配标签内包含给定文本的元素。

 <ul class="list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
$(".list li:contains('3')")//选择li标签内容是3的元素。

• ：empty匹配所有不包含子元素或者文本的空元素

<li></li>
$("li:empty")

10.属性选择器

属性选择器有等于=,不等于！=，^=以给定字符串开始的，$=以给定字符串结尾的，*=包含给定字符串的，

$(".list li[class='der']").css("color",'yellow')//选择class等于der的li。
$(".list li[class!='der']").css("color",'yellow')
$(".list li[class^='der']").css("color",'yellow')
$(".list li[class$='der']").css("color",'yellow')
$(".list li[class*='der']").css("color",'yellow')

11.表单选择器

表单选择器选择所有的input和type值为text ,password,file,button,checkbox,radio等。

$(".list :text").css("border",'none')//选择type等于text元素。
$(".list :input").css("border",'none')//选择list下所有的input。

表单常用属性:enabled，：disabled，：checked，：selecked

$(':disabled').css("border","none")//选择所有被禁用的元素。
$(':checked').css("border","none")//选择所有选中的元素（单选框，复选框，下拉框）。
$(':selecked').css("border","none")//选择select下拉框中所有选中的option元素。
$(':enabled').css("border","none")//选择所有没有没禁用的元素。

12.JQuery节点操作

1. 创建标签

$("<a href=''></a>")//括号里是标签，可以填写标签属性。

2.内部插入父子级别插入

• 末尾插入标签append()

var res=$("<a href=''></a>")
res.html('ddd')
$('.main').append(res)//末尾插入

• 插入到appendTo

$('.main').appendTo($('.list'))//将main插入到list里面。list不能为main的子元素。同级可以插入，

• 开头插入标签prepend

var res=$("<a href=''></a>")
res.html('ddd')
$('.main').prepend(res)

• 把所有匹配的元素前置到另一个、指定的元素元素集合中prependTo。

$("p").prependTo("#foo");

3.外部插入是同级元素的插入

• after后面插入和insertBefore效果一样，before前面插入和insertArter效果一样。

var res=$("<a>123</a>")
$("p").after(res)

4.节点的替换

• replaceWith（content/fun）参数可以是字符内容，也可以是函数(函数返回值必须是字符串。)。将匹配的节点替换成指定的元素。前面的替换成后面的。

$('input:disabled').replaceWith('4444');
$('input:disabled').replaceWith("<a>ggggg</a>")
$('.main').replaceWith(function(){
    return "<i>ffff</i>"
})

• replaceAll（param）只有一个参数被替换的元素，后面的替换成前面的。

$('<a>ggggg</a>').replaceAll($('.main'))

5.节点删除

• empty（）删除匹配的元素集合中所有的子节点。

$('.main').empty();//删除main中所有的子节点。

• remove（param），detach（param）只有一个参数是需要匹配带有指定类名和id名的字符串，可以不传，删除所有匹配到的元素。remove和detach功能一样，区别是remove会移除绑定的事件，detach不会。

$('input').remove();//删除所有的input。
$('input').remove('#ddd');//删除所有id为ddd的input
$('input').detach();//删除所有的input。
$('input').detach('#ddd');//删除所有id为ddd的input

6.节点克隆

• clone（param）一个参数为布尔值，true绑定的事件也会克隆，false不会，默认false。

var res=$("div").clone(true);
$('.main').after(res)

13.事件的绑定和解绑

• 绑定事件通过on绑定事件，有两个参数，第一个参数是事件名，第二个参数是回调函数。

$(".main").on('click',function(){

})

• 移除事件off() 方法移除用on()绑定的事件处理程序。还可以使用unbind（JQuery3.0移除）；
  不加事件名，默认移除所有绑定的事件。

$("p").off()
$("p").unbind()

14.JQuery网络请求

jQuery发请求可以使用$.get(),$.post(), $.ajax()(功能最齐全完善)。一般使用的都是$.ajax()。

$.ajax({  
              timeout：3000，//请求延迟时间。
              async：true，//默认为true异步请求true为同步。
             type: "POST",  //规定哪种请求方式
             url: "/login",  //请求路径
             contentType: 'application/x-www-form-urlencoded;charset=utf-8',  //请求头
             data: {username:$("#username").val(), password:$("#password").val()},  //参数
             dataType: "json",  //传输的数据类型
             success: function(data){  //请求成功的回调
                         console.log(data);  
                      }，  
             error:function(e){  //请求失败的回调
                         console.log(e);  
             },
          statusCode: {404: function() {//响应的状态码回调
            alert('page not found');
                }  
         });  

15.查找元素

• 查找父元素parent（）取得一个包含着所有匹配元素的唯一父元素的元素集合。返回的数据包含子元素。

$("p").parent()

• 查找所有的父元素parents（），取得一个包含着所有匹配元素的祖先元素的元素集合（不包含子元素）

$("span").parents("p")//查找父元素集合中所有p的元素集合

• 查找子元素children（）

$("div").children()

• 查找当前元素相邻的后面同级元素集合next（）一个

$("p").next()

• 查找当前元素相邻的后面同级元素集合nextAll（）后面所有同级元素

$("p").nextAll()

• 查找当前元素相邻的前面同级元素集合prev（）前面一个同级元素

$("p").prev()

• 查找当前元素相邻的前面同级元素集合prevAll（）前面所有同级元素

$("p").prevAll()

• 查找指定元素find（）搜索所有与指定表达式匹配的元素.

$("p").find("span")