jquery

什么是jquery?
优秀的JavaScript库，封装了JavaScript的常用功能
语法简洁：$(‘选择器’).方法()
就是**.js**文件
jquery官网学习网址：jquery.com
jquery中文网 https://www.jquery123.com/
版本：最新版3.4.1
2.0以上的版本，不兼容ie，在开发的时候，一定要用2.0以下的版本
引入方式：
(1) 引入网上 CDN(内容分发网)

<script src='http://libs.baidu.com/jquery/1.11.1/jquery.min.js'></script>

(2) 引入本地(下载到本地 ctrl+s)

3.$的作用：

    $就是jquery对象的别名
     window.jQuery = window.$ = jQuery;

query加载：$(选择器).ready()

    $(document).ready(function(){
            $('#box').css("height",300);
        });

        $().ready(function(){
            $('#box').css("width",300);
        });
 //最常用     
        $(function(){
            $('#box').css("background","yellowgreen");
            console.log("ready"+$("img").css("height"))
        });

window.onload和ready方法的区别？

        window.onload:
            等文档和资源都加载完成后调用
            会覆盖，后面的会覆盖前面
        
        ready：
            等文档加载完成后就调用
            不会覆盖，会叠加

5. jq和js的关系：

 可以共存，不能混用
 jquery对象和DOM对象的互换
 jquery对象转DOM对象，直接加下标获取$("#box")[0]
 DOM对象转jquery对象，直接在外面加$(); $(Div);

基本选择器

 //所有的css选择器都可以在jq中使用   id  元素 类 后代 相邻 通配符  伪类
        //没有优先级，以先后顺序为主
        //1.id选择器 #   
        $("#box").css("background","red");

        //2.类选择器 .box    所有类名叫box的标签
        $(".box").css("background","pink");

        //3.元素选择器  $("标签名")
        $("div").css("background","green");

        //自动给所有选中的标签添加事件，自动循环
        $("div").click(function(){
            console.log(this); //<div></div>  dom
            $(this).css("background","red");

        });
        

        //this：
        $("li").mouseover(function(){
            //console.log(this);//dom对象
            $(this).css("background","red");

            //下标，每一个对象，都会有一个方法index(选择器);
            //index:给当前元素的父元素的所有子元素添加的下标
            var index = $(this).index();   //index:给当前元素的父元素的所有子元素添加的下标
            var index = $(this).index("li");  //指定添加下标的子元素
            console.log(index);

        });

层次选择器

  <div>
        <p><span>我是一个span</span></p>
    </div>
    <div>
            <span>我是一个span</span>
    </div>
    <span>我是一个外面的span</span>

    <ul>

        <li>1</li>
        <li>2</li>
        <li id="box">3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <script src="jquery.js"></script>
    <script>
        //后代选择器  ul li
        $("div span").css("background","red");

        //子代选择器 ul>li  直系
        $("div>span").css("background","blue");

        //相邻选择器   $("#box+li")  紧跟在后面的元素
        $("#box+li").css("background","green");

        //$("#box~li") 兄弟选择器  后面所有的兄弟
        $("#box~li").css("background","orange");


        //方法
        $("#box").next().css("background","pink"); //下一个
        $("#box").nextAll().css("background","pink"); //下面所有的


        $("#box").prev().css("background","skyblue");
        $("#box").prevAll().css("background","skyblue");


        //所有的兄弟
        $("#box").siblings().css("background","yellow");

基本过滤选择器

   <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li class="box">4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <span>23</span>
    </ul>
    <script src="jquery.js"></script>
    <script>    
        //第一个
        $("li:first").css("background","#ccc");
        //最后一个
        $("li:last").css("background","green");
        //第几个
        $("li:nth-child(3)").css("background","red");

        //通过下标获取li:eq(下标)  下标从0开始
        //$("li:eq(4)").css("background","pink");
        var n = 4;
        $("li:eq("+n+")").css("background","pink");
        $("li").eq(n).css("background","orange");

        //:not(选择器)  排除 除了
        $("li:not(.box)").css("background","red");

        //奇 偶
        $("li").css("background","#fff");
        $("li:odd").css("background","red"); //奇
        $("li:even").css("background","green");//偶


        //gt(下标)：下标大于某个值选中的标签   lt(下标):下标小于某个值选中的标签
        $("li").css("background","#fff");
        $("li:lt(3)").css("background","red");
        $("li:gt(2)").css("background","gray");

内容过滤选择器

  <div><p> 今天是星期一</p></div>
    <div><span>明天是星期二</span> </div>
    <div></div>
    <!-- 

        E：contains()	获取包含特定内容的E元素，不考虑层级
        E：empty	获取不包含任何内容的E元素
        E：has(span)	获取包含特定标签的E元素
        E：parent	获取包含内容的E元素
     -->
     <script src="jquery.js"></script>
     <script>
         // E：contains()	获取包含特定内容的E元素，不考虑层级
         //$("div:contains(星期)").css("background","red");

         //E：has(选择器)	获取包含特定标签的E元素
        $("div:has(span)").css("background","red");

        //E：empty	获取不包含任何内容的E元素
        $("div:empty").css("background","green");

        //E：parent	获取包含内容的E元素  找是父元素的div
        $("div:parent").css("background","pink");

属性过滤选择器

  <input type="text">
    <input type="text" class="box3">
    <input type="text">
    <input type="text">
    <input type="password" class="box2">
    <input type="password" class="bx3">
    <input type="password">
    <input type="password">

    <div class="box1">fd</div>


    <script src="jquery.js"></script>
    <script>
    
   /*  E[attr]	获取属性为attr的E元素
    E[attr=value]	获取属性为attr并且值为value的E元素
    E[attr!=value]	获取属性为attr并且值不为value的E元素
    E[attr^=value]	获取属性为attr并且以value开头的E元素
    E[attr$=value]	获取属性为attr并且以value结尾的E元素
    E[attr*=value]	获取属性为attr并且值中包含value的E元素 */
    
        // E[attr]	获取属性为attr的E元素   所有具有type属性的input标签
        $("input[type]").css("width",200);

        //E[attr=value]	获取属性为attr并且值为value的E元素  获取所有具有type属性并且值为text的input标签
        $("input[type=text]").css("display","block");

        //E[attr!=value]	获取属性为attr并且值不为value的E元素
        $("input[type!=text]").css("background","pink");

        //E[attr^=value]	获取属性为attr并且以value开头的E元素

        //E[attr$=value]	获取属性为attr并且以value结尾的E元素

        //E[attr*=value]	获取属性为attr并且值中包含value的E元素
        $("input[class*=o]").css("background","red");

选项卡实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{list-style: none;padding: 0;margin: 0;}
        #box{
            width: 300px;
            margin: 50px auto;
            border: 1px solid;
        }
        ul li{
            float: left;
            width: 98px;
            height: 40px;
            border: 1px solid;
            text-align: center;
            line-height: 40px;
        }
        ul .active{
            background: rgb(113, 158, 247);
            color: #fff;
        }
        #box div{
            width: 298px;
            height: 200px;
            border: 1px solid;
            display: none;
        }
    </style>
   
</head>
<body>
<div id="box">
    <ul>
        <li style="background: rgb(113, 158, 247); color: #fff;">关注</li>
        <li>推荐</li>
        <li>导航</li>
    </ul>
    <div style="display: block">aaa</div>
    <div>bbb</div>
    <div>ccc</div>
</div>

<script src="jquery.js"></script>
<script>
    //点击菜单，切换对应的div
    $("li").click(function(){
        //改变自己的样式
        $(this); //触发事件的对象 被点击的标签
        $(this).css("background",'rgb(113, 158, 247)').css("color",'#fff').siblings().css("background","").css("color","#000");

        //显示对应的div
        $(this).index(); //获取到当前元素的下标
        $("#box div").eq($(this).index()).css("display","block").siblings("div").css("display","none");
    });
</script>
</body>
</html>

子元素过渡

  <div class="box1">
            <ul>

                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>
            <ul>

                <li>a</li>
                <li>a</li>
                <li>c</li>
                <li>d</li>
                <li>e</li>
            </ul>
        </div>
        <div class="box2">
            <ul>

                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>
            <ul>
                <li>a</li>
                <li>a</li>
                <li>c</li>
                <li>d</li>
                <li>e</li>
            </ul>
        </div>
        <script src="jquery.js"></script>
        <script>
        //:first  : 先获取所有选择器选中的标签，在其中找第一个
        //:last  ：先获取所有选择器选中的标签，在其中找最后一个
        
        $(".box1 li:first").css("background","red");
        $(".box1 li:last").css("background","red");

        //:first-child : 在父元素中找第一个子元素
        //:last-child 
        //:nth-child()  : 数字  odd even 2n 
        $(".box2 li:first-child").css("background","green");
        $(".box2 li:nth-child(4n)").css("background","pink");

表单选择器

  //1.表单选择器
    console.log($(":input").length); //7
    console.log($(":input"));//获取表单元素

    console.log($(":text")); //文本框
    console.log($(":radio"));
    console.log($(":checkbox"));

    //2. :checked 获取被选中的input框
   console.log( $(":radio:checked"));
   console.log($(":checkbox:checked"));
    
   //option:selected
   console.log($("option:selected"))

jquery中的循环：

  //jquery循环
        //$.map(循环对象,function(value,index){})  //index:下标 key  value：值
       var arr1 = $.map(arr,function(value,index){
            console.log(index,value);
            return value+"哈哈哈"; //可以有返回值，返回的内容会组成一个新的数组
        });
        console.log(arr1);

        //$(循环对象).map(function(){})
        $(arr).map(function(index,value){
            console.log(index,value);
        })


        //each  : 没有返回值
        $.each(arr,function(index,value){
            console.log(index,value);
        });
        $(arr).each(function(index,value){
            console.log(index);
        })

循环数组，对象，标签

  //1.循环数组
        var arr = ["今天下雪","明天下钱","后天下冰雹","下课"];
        //1.1 map
        $(arr).map(function(index,value){
            console.log(index,value);
        });
        
        //1.2 each
        $(arr).each(function(index,value){
            console.log(index,value);
        });


        //2.循环对象,$.map(循环对象)  $.each(循环对象) 
        var obj = {
            "name":"翠花",
            "age":18,
            "height":160,
            "weight":88
        }
        $.each(obj,function(key,value){ //
            console.log(key); //name age height weight
            console.log(value);//翠花 18  160 88
        })


        //3.循环标签
        $("div" ).each(function(index,elem){
            console.log(index);
            console.log(elem);//<div>3</div> DOM元素
        })

给每一个li添加内容

  <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <script src="jquery.js"></script>
    <script>
        var arr = ["今天下雪","明天下钱","后天下冰雹","下课","明天放假","后天休息","大后天休息","一直休息"];
        //给每一个li添加内容
        /* $(arr).each(function(index,value){//index：数组下标  value：数组值
            
            $("li").eq(index).html(value);
        }); */


        $("li").each(function(index,elem){//index:标签的下标  elem：标签
            $(elem).html(arr[index]);
        });

深拷贝 浅拷贝

  // array,object : 深拷贝 浅拷贝

    //1.浅拷贝: 复制的是地址，只要其中一个改了，一改全改
    var arr1 = [1,2,3,4];
    var arr2 = arr1; //复制的是地址    arr2 = arr1的地址

    arr2.push(5);
    console.log(arr1); //[1, 2, 3, 4, 5]
 
        
    //2.深拷贝：拷贝的是值
    var arr3 = [1,2,3,4];
    var arr4 = [];
    for(var i = 0;i<arr3.length;i++){
        arr4[i] = arr3[i]; 
    }
    console.log(arr4);
    arr3.push(5);
    
    console.log(arr3); //[1,2,3,4,5]
    console.log(arr4);  //[1,2,3,4]

extend

   //1.extend：将多个对象的属性复制到其他对象
        var obj1 = {
            "user1":{
                "name":"苗苗"
            }
        }    

        var obj2 = {
            "age":18,
        }

        
        //$.extend(deep,目标对象，复制对象....)     deep:深拷贝 浅  默认是false：浅拷贝

        var obj = $.extend(true,{},obj1,obj2); //返回复制好的新对象
        console.log(obj);    //{age: 18,  user1: {name: "苗苗"}}


        obj1.user1.name = "芳芳";

        console.log(obj);//{age: 18,  user1: {name: "苗苗"}}

来源：CSDN

作者：yee只鸟儿.

链接：https://blog.csdn.net/yeee1128/article/details/103569260