Web前端-JavaScript--jQuery2

最新推荐文章于 2021-11-12 13:14:19 发布

yanghainan0318

最新推荐文章于 2021-11-12 13:14:19 发布

阅读量179

点赞数

分类专栏： web前端文章标签： jquery

本文链接：https://blog.csdn.net/yanghainan0318/article/details/105993435

版权

web前端专栏收录该内容

49 篇文章 1 订阅

订阅专栏

JQ创建一个节点对象:

var JQ新节点对象=$("<标签名></标签名>");

$("父元素").html("<标签名>内容</标签名>");
为父元素设置内部的内容
如果内容包含标签则会直接渲染到页面上

父元素拼接子节点对象:
父元素.append(新节点对象); 拼接到最后

新节点对象.appendTo(父元素);

父节点.prepend(新节点对象) 将新节点拼接到父元素第一位的位置

新节点对象.prependTo(父节点) 也是拼接到第一个

在指定节点之后插入
节点对象.after(新节点)

在指定节点之前插入
节点对象.before(新节点)

html()方法就跟原生js的innerHTML是一样的效果
text()方法就跟原生js的innerText是一样的效果

元素.html("内容") 设置内容
元素.html() 获取内部内容

 var index=0;
    $("button").click(function () {
//        console.log($("<h1>我是新的h1</h1>"));
//        $("#box").append($("<h1>我是新的h1</h1>"))
//        $("#box").html("<h3>我是新来的h3</h3>")

//        $("<h2>我是新节点对象</h2>").appendTo($("#box"));
//        $("#box").prepend($("<p>我是新来的p元素"+(++index)+"</p>"))
//        $("<p>我是新来的p元素"+(++index)+"</p>").prependTo($("#box"))

//        $(".inner").after($("<p>我是新来的p元素"+(++index)+"</p>"))

        $(".inner").before($("<p>我是新来的p元素"+(++index)+"</p>"))
    })

删除元素本身(自杀):

元素.remove()

 $("button").eq(0).click(function () {
//        删除元素用的是自杀
        $("#box>ul").remove();

    })

清空元素内部所有内容

元素.empty()
元素.html("")

   $("button").eq(1).click(function () {
        //清空元素指的是 把内部所有的内容清空 不包括 本身
//        $("#box").empty();
//        $("#box").html("");
    })

替换元素 (把匹配到的老元素都替换成新元素)

新元素.replaceAll($(老元素的选择器))

  $("button").eq(2).click(function () {

        $("<h1>我是新来的</h1>").replaceAll($("#box"))


    })

克隆元素:

元素.clone(布尔值) 默认就是深层克隆
布尔值只是控制事件是否被克隆(经过测试不好用)

  $("button").eq(3).click(function () {
//        $("#box").append($("ul").clone());
//        $("#box").append($("ul").clone(false));


    })

自动补全$() 和字符串方法


    $("button").eq(4).click(function () {
//        $("#box").append($("<h1>我是新来的h1</h1>"))
//        $("#box").append("<h1>我是新来的h1</h1>");
//        将内部的字符串直接拼接到页面上
//        $("#box").append("哈哈");
        //append    prepend  都是可以操作字符串


//        "<h1>我是新来的h1</h1>".appendTo($("#box"))
        //字符串对象没有appendTo方法  prependTo




    })

input框对象.val() 就是获取输入框内容

var course=$("#course").val();
var school=$("#school").val();

标签属性操作: attr方法

对象.attr("标签属性名") 获取属性值

 $("button").eq(0).click(function () {
        console.log($("#box").attr("class"));
        console.log($("input").attr("name"));
        console.log($("input").attr("value"));
        console.log($("input").attr("placeholder"));
        console.log($("input").val());
 
    })

对象.attr("属性名","属性值"); 设置属性值

 $("button").eq(1).click(function () {
        $("#box").attr("class","haha");
//        $("input").attr("value","看我干嘛")
//        $("input").val("val方法改的")

        $("input").attr("type","checkbox")
    })

对象.removeAttr("属性名") 移除整个属性

 $("button").eq(2).click(function () {
//        移除属性
//        $("#box").removeAttr("class");
//        $("input").removeAttr("type");
    })

有三个特殊的属性是不能通过attr操作
如果硬要操作可能效果不是你想要的

disabled checked selected

checked属性如果用attr操作只会生效一次后面都不生效

selected

以上三个属性以后记得就要用prop来操作!!!!!!

对象.prop("属性名",布尔值) 设置状态

对象.prop("属性名") 获取当前状态

    $("button").eq(3).click(function () {
        //增加特殊属性
//        $("#inp").attr("disabled",true);
//        $("#cb").attr("checked",true);

        $("#cb").prop("checked",true)

    })

val方法就是原生js的value属性

专门获取输入框的输入的内容
不传参数就是获取内容
传入参数设置内容

text() 对应原生js的innerText属性
不传参数表示获取内部所有标签内的文本内容(不包括标签本身)

如果传入字符串参数表示设置新内容 (如果字符串内有标签那么也不会渲染标签)

html() 对应原生js的innerHTML属性
不传参数表示回去内部所有的内容(包含标签本身)

如果传入字符串参数表示设置新内容(如果字符串内有标签那么会渲染到页面上)

   $("button").eq(0).click(function () {
 
//        console.log($("input").val());
//        console.log($("#box").text());
        console.log($("#box").html());

    })
    $("button").eq(1).click(function () {
//        $("input").val("我是新设置的输入内容")
//        $("#box").text("我是普普通通的字符串内容")
//        $("#box").text("<h1>我是普普通通的字符串内容</h1>")
        $("#box").html("<h1>我是普普通通的字符串内容</h1>")
        
    })

键盘事件 event.keyCode==按键编码

 $(document).keydown(function (event) {
            console.log(event.keyCode);
            if(event.keyCode===81){
                $("#box").css("background","pink").html("<p>粉色</p><p>你按了Q键</p>");
            }
            if(event.keyCode===87){
                $("#box").css("background","red").html("<p>红色</p><p>你按了W键</p>");
            }
            if(event.keyCode===69){
                $("#box").css("background","green").html("<p>绿色</p><p>你按了E键</p>");
            }
            if(event.keyCode===82){
                $("#box").css("background","#4a20ff").html("<p>蓝色</p><p>你按了R键</p>");
            }

        });
        $(document).keyup(function (event) {
            $("#box").css("background","#ffffff").html("<p>无颜色</p><p>你没按键</p>");
        })

事件触发:

不操作该元素的该事件而是通过其他方式去触发这个事件的驱动代码的执行
例如: 不去点击盒子却通过其他方式执行盒子点击时应该执行的代码

JQ事件触发有三种方式:
1.元素.click() 触发该元素的点击事件代码
会有浏览器的默认行为

2.元素.trigger("事件名称") 手动触发元素的指定事件
触发事件代码的同时也触发浏览器的默认行为
比如输入框的focus事件被触发后也会有光标闪烁

3.元素.triggerHandler("事件名称")
触发事件代码的同时不会触发浏览器默认行为
比如输入框的获取焦点事件被触发但是没有光标闪烁

  $("button").click(function () {
        alert("我是按钮的点击事件代码")
//        $("#box").click(); //触发box点击事件的代码
//        $("#pox").click()

//        $("#box").trigger("click");


//        $("#box").trigger("contextmenu");
//        触发 输入框的获取焦点事件
//        $("#inp").trigger("focus");

//        $("#inp").triggerHandler("focus");

        $("#inp").focus();

    })
    /*$("#box").click(function () {
        alert("我是box的点击事件代码")
    })
    $("#pox").click(function () {
        alert("我是pox,你点我干嘛?")
    })*/
    /*$("#box").contextmenu(function () {
        alert("box点击右键了")

    });*/
//    输入框获取焦点的那一刻事件
    $("#inp").focus(function () {
       console.log("输入框获取焦点的是事件代码");
    })

链式编程:

一般适用于不停的为对象设置不同属性
方法返回this 当前方法返回的this 一定是成功设置该属性的this
然后接受到返回值以后可以继续往下调用

var per={
       setName:function (name) {

           this.name=name;

           return this;

       },
       setAge:function (age) {
           this.age=age;
           return this;

       },
       setLocation:function (location) {
           this.location=location;
           return this;
       },

       getName:function () {
           return this.name;
       }

   }


  per.setName("小强").setAge(16).setLocation("文化大厦");

JQ的each方法和隐藏迭代

JQ的操作本身就是已操作一大把可以一次选择多个元素统一操作
但是某些时候我们可能要针对每个元素做不同的设置
但是JQ已经内置了隐式迭代
隐式迭代: 内部自动帮我们遍历每一个元素进行统一设置

$("选择器").each(function(index,element){
})

这里面 each方法执行几次完全取决于选择器关联了几个元素

element是原生js对象如果要操作JQ的方法记得转换!!!!

  $("div").each(function (index,element) {
//        console.log(index,element);
        $(element).css("opacity",index/10)
    })

插件

下载插件时要自己读教程

JQ自定义插件

JQ已经内置了扩展插件的功能
$.fn.方法名=function(){
}
此功能表示给全局页面所有的JQ对象绑定一个方法

自定义插件的方法里面的this 表示当前调用该方法的盒子
对象默认是JQ对象

自定义插件

$.fn.setColor=function (color) {
    // console.log(this);
    this.css("background-color",color);
}

使用插件

    $("button").click(function () {
//        $("#box").setColor("red");
        $("#box").setColor("blue");
    })

JQ的事件绑定三种方式(不包括bind绑定 bind绑定被替代所以不讲)

第一种: 传统绑定方式:
元素.click(驱动函数)
没有层叠覆盖问题

第二种:
元素.delegate()
特点：性能高，支持动态创建的元素
// 第一个参数：selector，要绑定事件的元素(一定是当前调用delegate方法的那个元素的后代元素)
// 第二个参数：事件类型不带on的事件名称
// 第三个参数：事件处理函数

第二个参数里面可以一次绑定多个事件多个事件名称用空格隔开

delegate自带事件委托新创建的元素也会有老事件

 $("button").eq(0).click(function () {
//        通过父元素来操作
        /*$("body").delegate("#box","click",function () {
            alert("盒子能点击了!!")
        })*/
//        还可以一次绑定多个事件  用空格隔开
        /*$("body").delegate("#box","click mouseenter",function () {
            alert("盒子事件触发了")
        })*/

        $("body").delegate("#box","click mouseenter",function (event) {
            console.log("当前事件类型是:"+event.type);//通过type来区分是哪一个事件触发了
        })
    })

第三种: 最流行最时尚最常用的绑定方式: on
jQuery1.7版本后，jQuery用on统一了所有的事件处理的方法

参数:
第一个参数: 不到on的事件名称
第二个参数: 子元素的选择器(要添加事件的那个元素)
第三个参数: data对象数据可以通过外部传入事件内部
第四个参数: 事件驱动函数

第三个参数是能够在绑定事件时传入的一个数据对象
可以能够让事件内部使用该对象的数据(用的不多)

on绑定事件也可以一次绑定多个事件用空格隔开

on同样也实现了事件委托


    var per={
        name:"小强强",
        age:116,
        length:15,
        location:"文化大厦"
    }


    $("button").eq(0).click(function () {
        /*$("body").on("click","#box",function () {
            alert("盒子的点击事件")

        })*/

      /*  $("body").on("click","#box",per,function () {
            alert("盒子的点击事件")
            console.log(per);

        })*/

        /*$("body").on("click contextmenu","#box",per,function () {
            alert("盒子的点击事件")
            console.log(per);

        })*/

        $("ul").on("click","li",function () {
            alert("我是li的点击事件")
        })

    })

    $("button").eq(1).click(function () {
        $("ul").append("<li>我是新来的li</li>")

    })

JQ中的事件解绑有:

unBind 解绑 bind绑定的事件--->这个不用

undelegate 解绑 delegate绑定的事件
父元素.undelegate("子元素选择器","不带on的事件名称")


    $("button").eq(0).click(function () {
//        绑定事件
       
        $("body").delegate("#box","click",function () {
            alert("盒子的事件被触发了")
        })



    })

   $("button").eq(1).click(function () {
//        解绑事件

       $("body").undelegate("#box","click"); //解绑delegate绑定的事件


    })

off 解绑 on绑定的事件
元素.click()绑定的事件用off解绑


    $("button").eq(0).click(function () {
//        绑定事件
       
        $("body").on("#box","click",function () {
            alert("盒子的事件被触发了")
        })
//或者
      /*  $("#box").on("click","",function () {
            alert("盒子的事件")

        })*/



    })

   $("button").eq(1).click(function () {
//        解绑事件

       $("body").off("#box","click"); //解绑delegate绑定的事件

//   $("#box").off("click");

    })

补充:
如果不想扯父元素就给当前元素绑定事件
那么用on可以使用

元素本身.on("不带on的事件名称","",数据对象,驱动函数)
选择器空字符串表示给自己绑定事件

undeletegate和off 如果方法不传参数则表示解绑所有事件
传入事件名称表示解绑指定事件

注意:
如果是通过父子元素的方式绑定的事件
那么解绑时要操作父元素解绑事件才行

如果:
父元素.on("click","子元素选择器")
那么
父元素.off("子元素选择器","click")
才行

多库共存

有些时候我们可能需要两个版本的jQuery都用
比如大部分功能使用1.X版本为了兼容到IE6
但是其中一两个方法是2.X版本才有的所以2.X版本也要引入使用

这时候就要用到多库共存的方式使用

  $("button").click(function () {
//        获取当前jQuery对象的版本号
/*        console.log($.fn.jquery);//1.11.1
        console.log(jQuery.fn.jquery);//1.11.1*/

/*
        因为同时引入两个版本的jQuery 而且 jQuery用的都是$和jQuery这两个对象
           所以版本号使用的是第二个  把第一个覆盖掉了
        console.log($.fn.jquery);//2.1.4
        console.log(jQuery.fn.jquery);//2.1.4*/


        //让当前$对象 放弃 现在所使用的版本
     /*   $.noConflict();
        console.log($.fn.jquery)//1.11.1
        console.log(jQuery.fn.jquery);//2.1.4*/
        //以后想使用 1.X  就用$对象
        //想使用2.X 就使用jQuery对象


       /* var $q=$.noConflict();//$放弃当前版本  那么 当前版本是3.X 也就是$变成了2.X
        //onConflict方法表示  让当前对象放弃这个版本 并返回被放弃的版本


        console.log($.fn.jquery);//2.X
        console.log(jQuery.fn.jquery);//3.X
        console.log($q.fn.jquery);//3.X*/

        //如果noConflict() 方法内部传入false或者不传 表示 只让当前的$对象放弃版本
        //jQuery对象  不放弃
        //如果传入true表示 $和jQuery对象一起都放弃当前版本 也就是都回到次一级的版本
      /*  var $q=$.noConflict(true);


        console.log($.fn.jquery);//2.X
        console.log(jQuery.fn.jquery);//2.X
        console.log($q.fn.jquery);//3.X*/




        var $q=$.noConflict(true);
         var ww= $.noConflict(true);//jQuery放弃当前版本  因为它是之前被$拉下水的对象


        console.log($.fn.jquery);//1.x
        console.log(ww.fn.jquery);//2.x
        console.log(jQuery.fn.jquery);//1.x
        console.log($q.fn.jquery);//3.X

//        补充: 所谓放弃版本 是指  从当前script:src的引入顺序 最后往上放弃一个
        //并不是版本号大小的方法
    })

JQ关于元素尺寸有两个方法:

width() height()方法

获取元素自身的宽高不包括任何的padding和border还有margin

坐标的操作:
offset()方法

如果不传参数表示获取返回的是一个对象有left和top属性
不管父盒子有没有定位都按照body去算距离

如果传参数表示设置偏移值

心累的总结:
无论offset方法是获取还是设置都是按照 body去计算
如果没有定位默认分配relative

position方法只能获取不能设置
获取的是当前元素设置的那个left和top值
和什么破偏移没半毛钱关系

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 200px;
            height: 200px;
            background-color: hotpink;
            border: 1px solid #000;
            padding: 30px;
            /*margin: 50px;*/
            position: absolute;

        }
        #pox{
            width: 400px;
            height: 400px;
            background-color: red;
            position: absolute;
            left: 735px;
        }



    </style>
</head>
<body>
<button>设置坐标值</button>
<div id="pox">
    <div id="box"></div>

</div>
<script src="jquery-1.11.1.js"></script>
<script>
    $("#box").click(function () {


        
//        console.log($(this).width(),$(this).height());
        
//        console.log($(this).offset());

        console.log($(this).position());
        
        
    })
    $("button").eq(0).click(function () {
        $("#box").offset({
            left:78
        })
    })
    
    
    
    
    
</script>

</body>
</html>

JQ的缓存方法是data

  //    给指定对象绑定 缓存数据
    $("#box").data("name","小砌墙");
    
    
//从指定对象中取出缓存数据
    console.log($("#box").data("name"));


//    给哪个对象绑定的缓存数据 就从哪个对象取出来 其他对象无法获取
    console.log($("#pox").data("name"));

yanghainan0318

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Web前端-JavaScript--jQuery2

JQ创建一个节点对象: var JQ新节点对象=$("<标签名></标签名>"); $("父元素").html("<标签名>内容</标签名>"); 为父元素设置内部的内容如果内容包含标签则会直接渲染到页面上父元素拼接子节点对象: 父元素.append(新节点对象)...
复制链接

扫一扫