JQuery学习

一、了解

一个快速、简洁的JavaScript框架。

1.jQuery 的好处

1.简化js的复杂操作
2.不再需要关心兼容性
3.提供大量实用方法

2.jquery版本

3.JQ设计思想 选择网页元素

1.模拟css选择元素的写法

css选择器的写法 在 $() 中都可以使用

//#id 选择器
  $("#div1").css("backgroundColor","red");

//.class 选择器
  $(".li1").css("backgroundColor","red");

//标签选择器
 $("ul li").css("backgroundColor","blue");

//name 选择器
$("[name=he]").css("backgroundColor","blue");

2.独有的表达式

//表达式  第一和最后
$("li:first").css("backgroundColor","blue");
$("li:last").css("backgroundColor","blue");

//高级表达式 奇数偶数
$("li:even").css("backgroundColor","blue")

//指定下标元素
$("li:eq(2)").css("backgroundColor","blue");

3.多种筛选方法

$("li:eq(2)").css("backgroundColor","blue");
$("li").eq(2).css("backgroundColor","blue");

$("li.box").css("backgroundColor","blue");
$("li").filter(".box").css("backgroundColor","blue");

4.Jquery写法

1.方法函数化

window.οnlοad=function(){} 是整个窗口加载完毕，整个浏览器

$(function(){}) 相当于 $(document).ready(function(){}) ，这个相当于整个document 加载完毕

$(document).ready(function(){}) 加载在window.onload 之前，比window.onload 更快一点

/*         window.οnlοad=function(){

} */

$(function(){
   

});

 //添加点击事件
 $(function(){
   
     $("h1").click(function(){
   
         alert("添加点击事件");
     })
 });

2.链式操作

$(function(){
   
    $("h1").click(function(){
   
        alert("添加点击事件");
    })
    $("h1").css("backgroundColor","orange")
    $("h1").mouseover(function(){
   
        this.style.backgroundColor="red";
    })
    $("h1").mouseout(function(){
   
        this.style.backgroundColor="blue";
    })

});

  //链式操作，同一个选择器可以不写选择器，直接在后面 .方法
  $(function(){
   
      $("h1").click(function(){
   
          alert("添加点击事件");
      })
      .css("backgroundColor","orange")
      .mouseover(function(){
   
          this.style.backgroundColor="red";
      })
      .mouseout(function(){
   
          this.style.backgroundColor="blue";
      })

  });

3.取值赋值合体

jquery中取值和赋值都用一个函数

 $(function(){
   
     //获取div的内容
     alert($("#div1").html());
     //填写div的内容
     $("#div1").html("<h2>这是div添加的</h2>");
 })

5.JS和JQ的关系

1.可以共存，但是不能混用
2.不能为了用Jquery而用，如果有的情况js比jq简洁，使用js
3.在jQuery中拿到的任何东西都是兼容后的

$("")	通过jquery获取的都是JQ对象，使用不了js的方法
this 属于js对象
$(this) 属于jquery对象

二、JQuery的方法

1.filter() 过滤

filter：过滤器

从匹配的选择器中 选择精准的元素

//过滤
$(function(){
   
    $("div").filter(".box").css("backgroundColor","red");
})

2.not()

从匹配元素中 不适用哪些元素

//选择不用的元素
$(function(){
   
    $("div").not(".box").css("backgroundColor","orange");
})

3.has() 包含

选择 匹配元素中 包含这些子元素 的元素

//选择匹配元素中 包含有这个子元素的元素
$(function(){
   
   $("div").has(".box").css("backgroundColor","blue");
})

4.prev() 选择上一个节点

选择兄弟节点的上一个节点

//选择兄弟节点的上一个节点,下一个节点
$(function(){
   
   $("div").prev().css("backgroundColor","blue");
   $("div").next().css("backgroundColor","blue");

})

5.next() 选择下一个节点

选择兄弟节点中下一个节点

6.find() 选择子节点

 //选择子节点
 $(function(){
   
     $("ul"