101.《jquery详细总结》

JQuery总结

前言

/* jquery优点
1、轻量级
2、强大的选择器
3、出色的DOM操作的封装
4、可靠的事件处理机制
5、完善的ajax
6、不污染顶级变量
7、出色的浏览器兼容
8、链式操作方式
9、隐式迭代
10、行为层和结构层的分离
11、丰富的插件支持
12、完善的文档
13、开源

jquery库的类型氛围两种
jquery.js  (未压缩版) 开发版本
jquery.min.js  (压缩版) 生产版本：经过工具压缩之后的版本
 */

1.JQuery与原生js对象相互转换

  1.将jQuery转换为dom对象的方法 [index] 或者.get(index)：
   a、$(“#form”)[index]
   b、$(“#form”).get(index)
   原生js对象转jQuery对象
  2.只需要把原生对象放入jQuery集合里面
	const div = document.querySelector('div')
	$(div).html('原生js')

2.让权

jQuery.noConflict()函数用于让出jQuery库对变量$(和变量jQuery)的控制权。

静态函数jQuery.noConflict()的语法如下：
jQuery.noConflict( [ removeAll ] )

3.选择器

一.基本选择器

($(".one").css("color","red")
$(".two")
$("#two")
$("#two,three")

二.层次选择器

    $(".ul li").css("color","red")
    $("li").css("border","1px solid red")
    $(".one+li").css("backgroundColor","green")
    $(".one~li").css("backgroundColor","pink")

三.过滤选择器

  // 基本过滤器
        $("ul>li:first").css("color","red")
        $("ul>li:last").css("color","green")
        $("ul>li:last").css("color","green")
        $("ul>li:eq(4)").css("border","1px solid red")
        $("ul>li:gt(5)").css("backgroundColor","pink")
        $("ul>li:lt(5)").css("backgroundColor","green")
        $("ul>li:odd").css("backgroundColor","yellow")
        $("ul>li:even").css("color","white")
        $("ul>li:not(.name)").css("backgroundColor","#555")
   // 属性过滤
        $(".odiv>p[title=123]").css("color","red")
        $(".odiv>p[class^=z]").css("color","yellow")
        $(".odiv>p[id*=n]").css("border","1px solid red")
        $(".odiv>p[name$=x]").css("backgroundColor","yellow")
    // 表单选择器
        $(":password").val("123")
        $(":text").val("你好 我在测试")
        $(":button").val("btn")
        $(":submit").val("你好  提交")
        $(":reset").val("这里是重置按钮")
        $(":input").attr("width","300px")
        console.log($(":input:disabled"));

4.遍历节点操作

        $("ul").children().css("color","red") 			 	    $("ul").children("p").css("backgroundColor","red")
        $(".two").next().css("backgroundColor","yellow")
        $(".two").nextAll().css("fontSize","50px")
        $(".two").prev().css("fontSize","20px")
        $(".two").prevAll().css("color","pink")
        $("ul").siblings().css("backgroundColor","green")
        
// 遍历父节点  		$("th").parent().css({"color":"white","width":"100px","height":"100px","backgroundColor":"yellow"})        
     $("th").parents().css({"color":"white","width":"100px","height":"100px","backgroundColor":"yellow"})
                                    $("th").parents("tr").css({"color":"white","width":"100px","height":"100px","backgroundColor":"yellow"})
                                    
                                    
// 过滤节点
  $("ul").find("li").css("color","red")
  $("li").filter(".one").css("color","green")
  $("li").not(".one").css("border","1px solid green")
  
  
  

5.属性操作

 $(".three").attr("title","你好 这里是标题");
        $(".three").attr("color","你好  这里是颜色");
        // 弹出
        alert( $(".three").attr("color"))

6.Class操作

<style>
    .color{
        color: red;
        font-size: 30px;
    }
    .bg{
        background-color: rosybrown;
        color: white;
        font-size:40px;
    }
</style>

// jq操作元素的calss属性
    // jq提供四个方法操作calss
    // addClass()  追加
    // removeClass() 删除calss
    // hasClass() 查找
    // toggleClass() 有就删除，没有就添加
    // is()   判断是否有class  calss必须加上.
    
//1.添加样式
    $(".two").addClass("color")
//2.删除样式
	$(".two").removeClass("color")
//3.查找样式
	 console.log($('div').hasClass('Clo')); //true
// toggleClass() 有就删除，没有就添加
 	  $(".four").toggleClass("bg")

7.操作内容

 操作标签内容
// html()  类似于innerHTML() 识别标签
// text()  类似于innerText() 不识别标签

// 获取
    console.log($('div').html());
    // 设置
    $('div').html('家不可一日无主')
    // 设置  含有字符串标签
    $('div').html('<h6>老子想尔注</h6>')

    // 获取
    console.log($('div').text());
    // 设置
    $('div').text('家不可一日无主')
    // 设置  含有字符串标签
    $('div').text('<h6>老子想尔注</h6>')

8.JQuery循环

  	    // jQuery 提供了两种遍历方式
        // 1、jquery对象.each()
        // 2、$.each()
        // 1、$.each(数组，function(index,item){})
        // 2、$.each(对象，function(key,val){})
        var  arr=['鲁智深','武松','晁盖','宋江','林冲','卢俊义','李逵'] 
        $.each(arr,function(index,item){
            console.log(index+'------'+item);
        })
        var obj={
            'history1':"倒拔垂杨柳",
            'history2':"风雪山神庙",
            'history3':"杨志卖刀",
            'history4':"醉打蒋门神",
            'history5':"怒杀阎婆惜"
        }
        $.each(obj,function(key,val){
            console.log(key+'------'+val);
        })
        // 1.6 不支持对象，1.6以上对象和数组都可以
        // $.map(数组,function(index,item){})
        // $.map(对象,function(key,val){})
        // 和$.each() 区别  函数中第一个参数表示项，第二个参数表示下标 
       var arr1= $.map(arr,function(item,index){
            console.log(item)
            return '水浒传'+item
        })
        console.log(arr1)
        var obj1= $.map(obj,function(val,key){
            return '事迹:'+val
        })
        console.log(obj1)

8.深浅拷贝

    // 基本数据类型比较的是值
    // 引用数据类型比较的是地址
    // 浅拷贝(一改全改  地址指向的是同一个地址)
    var obj={
        a:{
            name:'张三'
        }
    }
    var obj1=obj
    obj1.a.name='李四'
    console.log(obj);
    // jQuery里的拷贝
    var obj2={}
    //1、深拷贝 (重新开辟一个地址存放拷贝的值)
    var obj3=$.extend(true,obj2,obj)
    console.log(obj3)
    obj3.a.name='李四'
    console.log(obj);
    console.log(obj3)

    //2、 浅拷贝 （一改全改）
    // var obj3=$.extend(obj2,obj)
    // console.log(obj3)
    // obj3.a.name='李四'
    // console.log(obj);
    // console.log(obj3)

9.原生js模拟深浅拷贝1

        //判断类型 是数组还是对象
        function getType(data) {
            return Object.prototype.toString.call(data).slice(8, -1);
        }

        function deepCopy(data) {
            //1.根据数据类型，创建对应空数组或者空对象
            if (getType(data) === "Array") {
                var res = [];
            } else if (getType(data) === "Object") {
                var res = {};
            } else {
                return data;
            }
            //2.循环赋值
            for (var key in data) {
                // console.log(getType(data[key]));
                // 在循环过程中，如果遇到一个对象，
                // 针对于这个对象再进行深拷贝
                if ((getType(data[key]) =='Array')||(getType(data[key]) =='Object')) {
                    res[key] = deepCopy(data[key]); //递归
                } else {
                    res[key] = data[key];
                }
            }
            //3.返回复制好的对象
            return res;
        }

        var arr = ['鲁智深', '宋江', {
            name: '晁盖'
        }, ['西施', '杨贵妃']]
      var arr3 = deepCopy(arr)

      arr3[2].name='kkk'
      console.log(arr);

10.原生js模拟深浅拷贝2

 // var  arr=['鲁智深','宋江',{
        //     name:'晁盖'
        // },['西施','杨贵妃']]

        //     var obj={
        //         name:'张三',
        //         age:24
        //     }

        // 对象的深拷贝1
        // var obj = {
        //     name: 'FungLeo',
        //     sex: 'man',
        //     old: '18'
        // }
        // var obj2 = JSON.parse(JSON.stringify(obj))
        // obj2.name='kkk'
        // console.log(obj)
        // console.log(obj2);


        // 对象的深拷贝2
        // var obj = {
        //     name: 'FungLeo',
        //     sex: 'man',
        //     old: '18'
        // }
        // var obj2 = copyObj(obj)
        // function copyObj(obj) {
        //     let res = {}
        //     for (var key in obj) {
        //         res[key] = obj[key]
        //     }
        //     return res
        // }

        // obj2.name='kkkk'
        // console.log(obj2,obj);

        // 数组的深拷贝1
        // var arr = [1,2,3,4,5]
        // var arr2 = arr.concat()
        // arr[2] = 5
        // console.log(arr)
        // console.log(arr2)
        // 数组的深拷贝1
        var arr = [1,2,3,4,5]
        var arr1 = copyObj(arr)
        function copyObj(arr) {
            let res = []
            for (var key in arr) {
                res[key] = arr[key]
            }
            return res
        }
        arr[3]='9'
        console.log(arr1);
        console.log(arr);