JQuary（从原生js到jq，就发现jq好简单）

1.jQuery介绍

jQuery是一个优秀的JavaScript库，以最少的代码实现更多的功能

• 特点：

  1.强大的选择器的功能  $("selector")
  2.语法简介  $("selector").action()
  3.隐式迭代  $("div").click();   //5个div会自动循环添加点击事件
  4.链式操作  $("").操作1().操作2().操作3()
  5.兼容性好

2.使用

2.1 引入

下载：
   https://jquery.com/  官网
   https://www.jquery123.com/ 中文
版本：
   2.0以下版本  ： 使用版本  2.0以上不兼容IE
引入：
   本地下载好的jQuery文件
   网上CDN上的jQuery文件

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<!-- 引入下载好的本地jQuery -->
    <!-- <script src="./js/jquery-3.6.0.js"></script> -->
​
<!-- 引入在线的  CDN:内容分发网-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script>
        // 特点1:语法简介  $("选择器").方法()；
        // 特点2：强大选择器功能  所有css中能使用选择器，在jQuery中都可以使用
        // 特点4：简化html文档操作，动画效果，ajax，事件
        $(".box").css({"width":100,"height":100,"background":"red"});
        // 特点3：隐式迭代
       $(".box").click(function(){
       // 特点5：链式操作  $().css(操作1)....
      $(this).css({"background":"teal"}).siblings().css({"background":"red"})
});
</script>

2.2 $的作用

jQuery.js文件   创建了一个jQuery对象,在这个对象上封装了各种方法
window.jQuery = window.$ = jQuery

2.3 jQuery加载方法

// 等文档和资源都加载完成后调用
// window.onload = function () {
//     var oDiv = document.getElementsByTagName("div")[0];
//     oDiv.onclick = function () {
//         alert("点击");
//     }
// }
// window.onload = function () {
//     var oDiv = document.getElementsByTagName("div")[0];
//     oDiv.onmouseover = function () {
//         alert("移入");
//     }
// }
​
​
//jQuery的加载方法
$(document).ready(function () {
    $("div").click(function () {
        console.log("点击");
    })
});
​
$().ready(function () {
    $("div").mouseover(function () {
        console.log("移入");
    })
});
​
$(function(){
    $("div").mouseout(function () {
        console.log("移出");
    })
});
​
/* 
         window.onload  和  $().ready()区别
         window.onload 
            等文档和资源加载完成后调用
            添加多次后面的会覆盖前面的
         $().ready()
            等文档加载完成后调用
            添加多次，会叠加
        */

注意window.onload 和 $().ready()区别

2.4 jQuery对象和DOM对象的关系

• 可以共存

  //jQuery和js 可以共存
  $("div").css({ "width": 200, "height": 200, "background": "gold" });
  var oDiv = document.getElementsByTagName("div")[0];
  oDiv.style.background = "teal";

• 不能混用

  //不能混用
  //oDiv.css({"width":100});
  //$("div").style.width = "100px";

• 可以相互转换

  //可以相互转换
  console.log(oDiv);  //DOM对象  标签  元素集合  节点列表
  console.log($("div")); //jQuery对象
  ​
  //DOM对象----》jQuery对象   $(DOM)
  console.log($(oDiv)); //jQuery.fn.init [div]
  ​
  //jQuery对象----》转DOM对象
  console.log($("div")[0]);

3.jQuery选择器

3.1 基本选择器

$(function(){
    //id:  $("#id")  获取到对应id名的标签
    $("#middle").css({"background":"pink"});
​
    //class : $(".class名")  获取到对应class名的标签
    $(".box").css({"background":"teal"});
​
    //元素  jQuery中选择器没有优先级，只有先后顺序
    $("li").css({"background":"orange"});
​
    //分组  元素,元素
    $("p,span").css({"color":"green"});
​
​
    //添加事件
    $("li").click(function(){
        console.log(this); //<li></li>  DOM元素     $(this)--转jQuery
        $(this).css({"background":"teal"});
        //$().index("selector") ： 給当前元素的父元素的所有子元素添加下标
        console.log($(this).index());;
        console.log($(this).index("li"));;
    });
});

3.2 层次选择器

//后代选择器 
$("div span").css({"color":"red"});
​
//子代选择器
$("div>span").css({"color":"teal"});
​
//+:相邻兄弟选择器
$("p+span").css({"color":"orange"});
//~: 后面所有的
$("p~span").css({"color":"orange"});

3.3 基本过滤选择器

//:位置
$("li:first").css("background","red");
$("li:last").css("background","red");
$("li:nth-child(2n)").css("background","red");
$("li:nth-child(2n+1)").css("background","pink");
$("li:odd").css("background","red");  //奇数
$("li:even").css("background","pink"); //偶数
​
//:eq(下标) ： 从0开始
$("li:eq(2)").css("background","red");
var index = 3;
$("li").eq(index).css("background","pink");
​
//not(选择器)  ： 除了
$("li:not(.box)").css("background","pink");
$("li").not(".box").css("background","pink");
​
​
//gt():获取下标大于n   lt()：获取下标小于n
$("li:lt(3)").css("background","red");
$("li:gt(2)").css("background","#ccc");

3.4 属性过滤选择器

//E[attr]:匹配有attr属性的E标签
$("div[class]").css("background", "pink");
​
//E[attr=value]:匹配有attr属性并且值位value的E标签
$("div[class=box2]").css("background", "red");
​
//E[attr!=value]:匹配有attr属性并且值不为value的E标签
$("div[class!=box2]").css("background", "teal");
​
//E[attr^=value]:匹配有attr属性并且值以value开头的E标签
$("div[class^=b]").css("background", "teal");
​
//E[attr$=value]:匹配有attr属性并且值以value结尾的E标签
$("div[class$=4]").css("background", "orange");
​
//E[attr*=value]:匹配有attr属性并且值包含value的E标签
$("div[class*=s]").css("background", "deeppink");

3.5 表单选择器

//表单选择器
console.log( $(":input")); //获取的是所有的表单元素   (input button textarea select)
​
// :input的type类型，获取到具体类型的input
console.log($(":text")); //文档框
console.log($(":radio")); //单选框
​
//:checked : 获取选择框被选中的标签
console.log( $(":checkbox:checked"));
console.log( $(":checkbox:checked").length);

注意常用选择器：id，元素，class，分组，后代，子代，eq必须要掌握

4.jQuery操作标签属性

4.1操作标签属性

• 原生js操作标签属性： 标签.属性名 = “属性值"

• DOM操作标签属性：

  • 设置：标签.setAttribute("属性名","属性值")

  • 获取：标签.getAttribute("属性名")

  • 删除：标签.removeAttribute("属性名")

• jQuery操作标签属性

  • $().attr() : 操作自定义属性（一般使用这个，自定义和固有都能操作）

    -设置：$().attr("属性名","属性值") （js取值赋值一体）

    -获取：$().attr("属性名")

    -删除：$().removeAttr("属性名")

  • $().prop() ：操作固有属性 (input标签的checked属性，就必须使用prop)

    -设置：$().prop("属性名","属性值") （js取值赋值一体）

    -获取：$().prop("属性名")

    -删除：$().removeProp("属性名")

  //-设置：$().attr("属性名","属性值")
  $("div").attr("id","active");
  ​
  //-获取：$().attr("属性名")
  console.log($("div").attr("index")); //1
  ​
  //删除：$().removeAttr("属性名"
  $("div").removeAttr("class");
  ​
  ​
  //区别 如果属性值是true false的情况下，使用prop操作属性
  console.log($("input").attr("checked")); //checked  undefined
  console.log($("input").prop("checked")); //true false
  $("input").prop("checked",false);

4.2 操作class属性

//1.$().addClass("类名") ： 追加class
$(this).addClass("active");
​
//2.$().removeClass("类名")：删除对应的class
$(this).removeClass("active");
​
//3.$().hasClass("类名")  ： 判断当前元素是否存在某个类名，有返回true，不存在返回false
if($(this).hasClass("active")){ //有
    $(this).removeClass("active");
}else{ //没有
    $(this).addClass("active");
}
​
​
//4. $().toggleClass("类名") ： 开关，如果当前有这个class就删除，没有就添加
$(this).toggleClass("active");

5.jQuery操作标签内容

• 原生js

  • 表单元素:标签.value

  • 闭合标签：标签.innerHTML/innerText 操作闭合标签内容，覆盖原有内容，innerHTML识别标签，innerText不识别标签

• jQuery

  • 表单元素： $().val();

  • 闭合元素： $().html()/text();

//1.设置表单元素：$().val("值")
$("input").val("黄河入海流");
$(window).keydown(function(ev){
    if(ev.keyCode == 13){
        //2.获取表单元素内容：$().val()
        var v = $("input").val();
        console.log($("input").val());
​
        //3.获取闭合元素内容 $().html()
        console.log($("div").html()); //   <p>白日依山尽</p>
        console.log($("div").text()); //    白日依山尽
​
​
        //4.设置闭合元素内容 $().html();
        //  $("div").html(v);  //会覆盖之前的
        $("div").html($("div").html()+"<p>"+v+"</p>");  //会覆盖之前的
        //  $("div").text($("div").html()+"<p>"+v+"</p>");  //会覆盖之前的
    }
})

6.操作标签样式

• 原生js：标签.style.属性名 = 属性值

• jQuery：$().css()

 //1.写单个样式 $().css("属性名","属性值")
$("div").css("background","pink");
​
//2.写多个样式 $().css({"属性名":"属性值"})
$("div").css({
    "width":200,  //属性值数是数字的话， number，string(要加单位)
    "height":"200px",
    "margin-top":"200", //设置无效
    "height":"hahahah", //給的不对，不报错，只是不给标签设置，相当于这行代码无效
    marginLeft:"200px" //对象key可以不加引号，如果是复合属性，使用驼峰标识
})