1. jQuery就是JavaScript类库（封装了DOM、BOM）

2. jQuey的简单使用

2.1 引入jQuery文件

image.png
min是压缩版（体积更小）

2.2查找元素

查找元素.png

2.3操作节点（用jQuery的方法）

image.png

3.jQuery对象与DOM对象的转换

3.1. DOM对象转化成jQuery对象

image.png

  1. var div=document.querySelector("div");//DOM对象
  2. console.log(div);
  3. //DOM对象--->jQuery 对象
  4. console.log($(div));//jQuery 对象       
  5. console.log($(document.querySelector("div")));//jQuery 对象

3.2. jQuery对象转化成为DOM对象

image.png

  1. console.log($("#btn"));//jQuery 对象 类数组对象
  2. //jQuery 对象--->DOM对象
  3. console.log($("#btn").get(0));
  4. console.log($("#btn")[0]);

4.jQuery选择器（4类 9种）

1)基本选择器(5种）

  1. ID选择器 $("#one")
  2. 类选择器 $(".apple")
  3. 元素(标签)选择器 $("div")
  4. 通配符选择器$("*")

  5. 合并(群组)选择器 $("div,p,#one")

    2)层次选择器(4种)

  6. 后代选择器 $("div p")

  7. 子代选择器 $("div>p")
  8. 直接兄弟选择器（紧邻着后面的）$("div+p")
  9. 间接兄弟选择器（后面的所有）$("div~p")

    3)过滤选择器（6）

    3.1基本过滤选择器(8种)

    image.png

    3.2内容过滤选择器(4种)

    image.png

    3.3可见性过滤选择器（2种）

    image.png

    3.4 属性过滤选择器（8种）

    image.png
    1. <div style="background-color:lightcoral" class="en-apple ab">
    2.      1
    3. </div>
    4. <div style="background-color:lightcoral" class="en apple">
    5.      2
    6. </div>
    7. <script>
    8.   $("div[class~='apple']").css('background','blue'); //改变属性class用空格分隔的值包含字符‘apple’的元素的背景色
    9.    $("div[class*=apple]").css('background','blue');//改变属性值含有‘apple’的div元素
    10. </script>

    3.5子元素过滤选择器(4种)

    image.png

    3.6表单属性过滤选择器(4种)

    image.png

    4)表单选择器(11种)

    image.png
    image.png

    5.jQuery 的 DOM 操作

    5.1查询操作

    1.html操作

    image.png

    2.文本操作

    image.png

    3.值操作（val()）

    image.png

    4.属性操作

    image.png

  • 设置表单属性的时候，可以用prop()来代替attr(),因为prop()的结果是true和false,更加方便

    (":checkbox").attr("checked","checked");
console.log($(":radio").attr("checked"));//undefined
$(":checkbox").prop("checked",true); 
console.log($(":radio").prop("checked"));//false

    5.2样式操作（8种）

    image.png

  • 设置多个 CSS 属性

    css({"propertyname":"value","propertyname":"value",...});

    $("div").css({"border":"1px solid 
red","font-size":"50px","border-radius":"10px"})

    5.3遍历节点（只找标签）

    Selector：选择器
    image.png

  • next()找下面紧邻的一个兄弟

  • nextAll()/nextAll(selector)找下面所有兄弟
  • prev()找上面紧邻的一个兄弟
  • prevAll()/prevAll(selector)找上面所有兄弟

  • filter(selector) 筛选节点

    console.log($("ul li").filter("li:nth-child(even)"));

    5.4 创建、插入、删除

    1)创建DOM节点—->$()

    image.png

    2)插入DOM节点

    image.png

  • 父节点.append(子节点)

  • 父节点.prepend(子节点)
  • 旧节点.after(新节点)
  • 旧节点.before(新节点)

外部插入节点的方式不光可以插入节点，还可以交换节点的位置

<ul>
       <li class="one">1111</li>
       <li class="two">2222</li>
       <li>3333</li>
</ul>

交换 1111和2222的位置

$(".one").before($(".two"));//交换节点位置  在one的前面插入two
$(".two").after($(".one"));//交换节点位置 在two的后面插入one

3)删除DOM节点（3个）

image.png

<button id="btn">删除</button>
      <ul>
         <li>111</li>
         <li>222</li>
         <li class="one">333</li>
         <li>444</li>
         <li>555</li>
      </ul>
<script>
$("#btn").click(function(){
      $("ul").remove();//完全删除，ul,li都删除
      $("ul").empty();//只是清空ul的内容，ul还存在
      $("li").remove(".one");//删除li中的
})
</script>

6.jQuery事件

6.1页面加载后执行(预加载)

$(document).ready()和window.onload事件的区别：
区别1：概念区别
1.$(document).ready() DOM结构加载完
2 window.onload 所有资源加载完
image.png
区别2:js中的出现次数

  • window.onload=function(){...} 一个js文件只能出现一次，如果出现多次，后面的将会把前面的覆盖
  • $(document).ready(function(){...}),一个js文件可以出现多次，都可以使用

区别3：有无简写

  • Window.onload=function(){…} 没有简写

  • $(document).ready(function(){…})有简写

    • 简写：
    • $().ready(function(){…})
    • $(function(){….})

      6.2 jQuery事件绑定

      1. on()

      $(selector).on(事件类型,回调函数)
$("ul li").on("click",function(){
 alert(1);
}) 
//“.one”下面的li
$("li",".one").on("click",function(){
       console.log(this);
})

      2.第二种方法

      $("ul li").click(function(){
 alert(1);
})

      7.jQuery动画

      基本的显示和隐藏

      image.png
      toggle(执行时间，回调函数) 基本来回切换显示隐藏

      8.jQuery ajax

      8.1 get()

  • get() 方法通过远程 HTTP GET 请求载入信息。

  • 这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax
    $(selector).get(url,data,success(response,status,xhr),dataType)
    image.png
    $.get() 等价于
    $.ajax({
url: url,
data: data,
success: success,
dataType: dataType
});

    <script>
  $(function () {
      $.get("data/list.json", function (data) {
          console.log(data);
      }, "json")
      $.ajax({
          url: "data/list.json",
          success: function (data) {
              console.log(data);
          },
          dataType: "json"
      });
  })
</script>

    8.2 post()

    post() 方法通过 HTTP POST 请求从服务器载入数据
    jQuery.post(url,data,success(data, textStatus, jqXHR),dataType)
    image.png
    $.ajax({
type: 'POST',
url: url,
data: data,
success: success,
dataType: dataType
});

    8.3 ajax()

    w3c文档
    jQuery.ajax([settings])

    $.ajax({
//type: 'POST',
method:'POST' //请求方式 新版
url: url,
data: data,
success: success,
dataType: dataType,
error:error,、
async:true
});
    image.png

    9.jQuery类数组操作

    9.1.什么是类数组

    image.png

    9.2 类数组的操作

    image.png

    1）属性：length

    console.log($("ul li").length);//length属性

    2）Each():

    image.png
    写法1：
    $("ul li").each(function(i,v){//jq对象---》DOM对象
console.log(i,v);
console.log(this);//v就相当于this
//console.log(this.innerHTML);//DOM对象，所以用DOM操作
//console.log(this.html());//error，因为是DOM对象，无法用jq操作
console.log($(this).html());//$()  DOM对象---》jq对象，能用了
})
    写法2：
    $.each($("ul>li"),function(i,v){
     console.log(i,v);
     console.log(this);
     console.log(this.innerHTML);
})

    3）Eq()：

    console.log($("ul li").eq(0));//jq对象

    4）Get():

    console.log($("ul li").get());//jq对象---》DOM对象的数组
console.log($("ul li").get(0));//DOM对象    某一个内容

    5）Index():

    console.log($("ul li.a").index()); //获取当前元素的索引

    10.jQuery扩展

    10.1 扩展jQuery本身的方法 $.extend

    直接通过extend 扩展的属性 会放到JQ自己身上
    $.extend({
                min(x,y){
                   return x>y?y:x;
                }
            })
console.log($.min(10,3));//调用

    10.2 扩展jQuery对象的方法 $.fn.extend

    fn.extend扩展的属性 会放到JQ的原型上
    $.fn.extend({
                 style(bgcolor){
                     return this.css("background-color",bgcolor);
                 },
                 check(){
                     return this.each(function(){
                         this.checked=true;
                     })
                 }
              })
              $("div").style('red');//调用
              $("input[type=checkbox]").check();//调用