JQuery(2)

HTML，text，value

text：会将所有元素的内容连接成一个字符串。

 $("div").text("a");
         $("div:lt(3)").text("a");
        var arr=["北京","上海","天津","武汉","广州"]
         $("div").text(function(index,item){
            return arr[index];

html:仅获取jQuery列表中第一个元素的html内容
console.log($(“div”).html());

var arr=[
        //     {site:"网易",url:"www.163.com"},
        //     {site:"腾讯",url:"www.qq.com"},
        //     {site:"淘宝",url:"www.taobao.com"},
        //     {site:"京东",url:"www.jd.com"},
        //     {site:"天猫",url:"www.tmall.com"}
        // ];
        
        // $("div").html(function(index){
        //     // return `<a href='http://${arr[index].url}'>${arr[index].site}</a>`;
        //     let {site,url}=arr[index];
        //     return `<a href='http://${url}'>${site}</a>`;

val：只适用于input

  // 仅获取jQuery列表中第一个元素的val内容
            // console.log($("input").val());
$("input").on("blur").function(){
    console.log($(this).val());
}         （获取输入的值）

attr和prop
arr：仅能获取jQuery列表中第一个元素的指定属性的内容

 $("div").attr("toggle","a");//给所有标签增加相同的属性名
        // 给所有标签增加同一个属性名,但是不同的属性值
        // $("div").attr("toggle",function(index){
        //     return index+1;
        // })
 给所有标签增加多个属性,并且属性值相同
        // $("div").attr({
        //     key:1,
        //     name:"xie",
        //     class:"div0"
        // })
        // 给所有标签增加多个属性,并且属性值不同
    // var names=["a","b","c","d"]
    // $("div").attr({
    //     key:function(index){
    //         return index;
    //     },
    //     name:function(index){
    //         return names[index];
    //     },
    //     class:function(index){
    //         return "div"+index;
    //     },
    //     a:function(index){
    //         // 返回null就是不添加该属性
    //         return index===0 ? null : index;
    //     }
    // });

removeAttr：删除标签属性
prop：自定义的对象属性和DOM元素的对象属性（在对象属性添加或删除，原标签不改变）
data 自定义的对象属性

css,class

css:可以设置div的多个属性,不同的属性值
addClass：添加
removeClass：删除
toggclass：切换样式

宽高

width（）：获取第一个元素宽度
innerwidth：宽度+（2*padding）
outerwidth：宽度+padding+border
outerWidth(true)：不能设置,只能获取 width+padding+border+margin
offset：相对页面顶端的距离
position:和定位中left和top相同,相对父元素,等同于DOM offsetLeft和offsetTop。（不可以设置，用于获取）
scrollTop：获取当前的滚动条位置。可以获取

DOM元素的使用

append 添加在子元素的尾部
        // $("div").append(div);
        appendTo()将什么元素放在某个选择器的子项尾部,返回这个被放入的jQuery元素
        append  appendTo  插入在父容器的尾部
              prepend prependTo  插入在父容器的头部
              同级兄弟元素的插入
             before(目标在后)  insertBefore(目标在前) 插入在指定元素的前面
             after  insertAfter 插入在指定元素的后面

包裹
wrap：在元素的外层添加一个标签包裹这个元素
unwrap：删除
wrapAll：将所有选择内容外面统一增加一个父容器
wrapInner：将元素的子元素或者内容包裹一层标签
删除
remove：将当前JQ对象的事件删除
detach：仅删除元素，不删除事件，
empty：将内容清除掉
替换
要替换的内容.replaceWith(替换后的目标);
/ 替换后的目标.replaceAll(要替换的内容)

事件

on：添加事件（可以增加多个事件）
off：删除事件
off(“click”)：删除匿名函数；删除所有当前点击对象的点击事件
，事件类型用空格隔开
e.data：是事件传入的参数对象

侦听时传参 on(事件类型,传的参数,事件函数)
抛发时传参 on(事件类型,事件函数(e,收到的参数)) trigger(事件类型,[抛发传入参数])
多个参数,是传递参数数组的解构赋值
trigger和triggerHander都可以抛发
trigger：会影响所有，会冒泡
triggerHandler：不会触发事件的默认行为，只影响第一个匹配的元素。
one:运行一次事件
blur：当元素失去焦点时，
focus：获得焦点
keydown：键盘点击事件
keyup：键盘松开
mousedown：鼠标点击事件
mousemove:鼠标移动

动画

hide：隐藏
show：显示
hide（100，function()）{：动画完成后执行函数
tooggle:切换
slideUp：向上
slideDown：向下
fadeIn；fadeOut：淡入淡出，透明显示
自动切换淡入淡出的方法：fade Toggle();
fadeTo()： 透明时间；透明度
animate：只能变化数值

JQ插件

静态插件模式
$.extend()
随机颜色

   (function(){
                    $.extend({
                        randomColor:function(){
                            var col="rgb(";
                            for(var i=0;i<3;i++){
                                col+=Math.floor(Math.random()*256)+",";
                            }
                            col=col.slice(0,-1);
                            return col+")";
                        }
                    });
    
    
                    $.fn.bg=function(color){
                       this.css("backgroundColor",color);
                       return this;
                    }
              })();
     $("<div></div>").appendTo("body").width(50).height(50).bg($.randomColor())
            .clone(false).bg($.randomColor()).appendTo("body"

);

拖拽
动态插件方法 这种方法里面使用到this,this就是jQuery对象,里面必须返回this,以便于连缀

  $.fn.bg=function(color){
            if(!color) return this.css("backgroundColor");
           this.css("backgroundColor",color);
           return this;
        }
        
    $.fn.drag=function(bool){
        if(!bool){
            this.off("mousedown.drag");
            return this;
        }
        this.css("position","absolute");
       this.on("mousedown.drag",function(e1){
           e1.stopPropagation();
           var elem=$(this);
           $(document).mousemove(function(e2){
                elem.css({
                    left:e2.clientX-e1.offsetX,
                    top:e2.clientY-e1.offsetY
                });
           }).mouseup(function(){
                 $(document).off("mousemove mouseup");
           })
       });
       return this;

    }

    $("div").width(50).height(50).bg("red").drag(true).dblclick(function(){
         this.bool=!this.bool;
        $(this).drag(!this.bool);
    });

JQ中的AJAX

$.ajax(); 最基础的ajax

  中层
        // $("div").load();
        // $.get();
        // $.post();
    
    // 最高层
    // $.getScript();
    // $.getJSON();![在这里插入图片描述](https://img-blog.csdnimg.cn/20190731210438965.png)





 加载js文件,后面的函数即时加载完成后调用的函数
        // $.getScript("./js/a.js",function(response,status,xhr){
        //     // Utils.b();
        //     console.log(response,status,xhr)
        // });

    // $.getJSON("./package-lock.json",function(response,status,xhr){
    //     console.log(response);//加载进来的json直接变成对象
    // })

中层

    // $.get("http://10.9.15.176:4001",{id:1001,name:"xietian"},function(response){
    //     console.log(response)
    // })


    // $.post("http://10.9.15.176:4002",{id:1001,name:"xietian"},function(response){
    //     console.log(response)
    // })

加粗样式

    // $("div").load("./a.xml");
    // $("div").load("./package-lock.json");
    // $(".div1").load("./菜单.html");

    // $("div").load("http://10.9.15.176:4001?id=1001&name=xie");

最基础

 // $.ajax({
    //     url:"http://10.9.15.176:4001",
    //     type:"get",
    //     data:{id:1001,name:"xietian"},
    //     success:function(res){
    //         console.log(res);
    //     }
    // })

//    $(":submit").click(function(e){
//        e.preventDefault();
//        $.ajax({
//         url:"http://10.9.15.176:4001",
//         type:"get",
//         // 表单序列化的方式
//         data:$("form").serialize(),
//         success:function(res){
//             console.log(res);
//         }
//     })
//    })