jQuery笔记

最新推荐文章于 2020-12-22 22:21:55 发布

最好的年纪与你相遇

最新推荐文章于 2020-12-22 22:21:55 发布

阅读量396

点赞数

文章标签： javascript jquery html

本文链接：https://blog.csdn.net/feilixiaozi1/article/details/104373897

版权

入口函数

四种写法
推荐第三种写法

        //入口函数四种写法
        //第一种写法
        $(document).ready(function(){
   
            var $img=$('img')[0];
            console.log($img);
        });
        //第二种写法
        jQuery(document).ready(function(){
   
            var $img=$('img')[0];
            console.log($img);
        });
        //第三种写法
        $(function(){
   
            var $img=$('img')[0];
            console.log($img);
        });
        //第四种写法
        jQuery(function(){
   
            var $img=$('img')[0];
            console.log($img);
        });

冲突问题释放$使用权

//注意点：释放noConflict（）在其他jQuery代码块之前。释放完后就只能用jQuery了
jQery.noConflict();
jQery(function(){
   
	alert(1234);
});
//自定义使用的符号
var nj=jQuery.noconflict();
nj(function(){
   
	alert(1234);
});

jQuery核心函数

        //1.接收一个函数
        $(function(){
   
            //2.接收一个字符串
            //2.1就收一个字符串选择器
            //返回了一个jQuery对象，保留了找到的DOM元素
            var $div1=$('.div1');
            var $div2=$('div2');
            console.log($div1);
            console.log($div2);
            //2.2接受一个字符串代码片段
            //返回了一个jQuery对象，保留了找到的DOM元素
            var $p=$('<p>我是一个段落<p>');
            console.log($p);
            $div1.append($p);
            //3.接收一个DOM元素
            //包装成一个jQuery对象返回
            var oSpan=document.getElementsByTagName('span')[0];
            console.log(oSpan);
            var $span=$(oSpan);
            console.log($span);
        });

什么jQuery对象

1.jQuery对象是一个伪数组
2.什么是伪数组：有0到length-1的属性，并有length属性

jQuery数组操作

/*
eq函数返回的是jQuery对象
参数：索引
*/
var $btn=$("button").eq(0)；
/*
get函数返回的是DOM元素
参数：索引
*/
var oBtn=$("button").get(0);

静态方法和实例方法

    <script>
        //1.定义一个类
        function AClass(){
   }
        //2.给这个类添加一个静态方法
        //直接添加给类的就是静态方法
        AClass.staticMethod=function(){
   
            alert('静态方法');
        };
        //静态方法通过类名调用
        AClass.staticMethod();
        //3.给这个类添加一个实例方法
        AClass.prototype.instanceMethod=function(){
   
            alert('实例方法');
        };
        //实例方法通过类的实例调用
        var a=new AClass();
        a.instanceMethod();
    </script>

jquery中静态方法

1.each方法

    <script>
        var arr=[1,2,3];
        var json={
   0:3,1:5,2:7,3:9,length:4};//伪数组，有0到length-1属性，还有length属性，但不能用forEach遍历，用for（in）

        //原生forEach
        /*
        第一个参数：当前遍历到的元素
        第二个参数：当前遍历到的索引
        注意点：原生的forEach只能遍历数组，不能遍历伪数组。
        */
        arr.forEach(function(value,index){
   console.log(index,value)});

        //1.jQuery静态方法each遍历数组
        /*
        第一个参数：当前遍历到的索引
        第二个参数：当前遍历到的元素
        */
        $.each(arr,function(index,value){
   
            console.log(index,value);
        });
        //2.jQuery静态方法each遍历伪数组
        $.each(json,function(index,value){
   
            console.log(index,value);
        });
    </script>

2.map方法

    <script>
        var arr=[0,1,3,5,7];
        var json={
   0:3,1:5,2:7,3:9,length:4};
        //原生map
        /*
        第一个参数：当前遍历到的元素
        第二个参数：当前遍历到的索引
        第三个参数：当前被遍历的数组
        注意点：原生的map只能遍历数组，不能遍历伪数组。
        */
        arr.map(function(value,index,array){
   
            console.log(index,value,array);
        });
        //1.jQuery静态方法each遍历数组
        /*
        第一个参数：当前遍历到的索引
        第二个参数：当前遍历到的元素
        */
        $.map(arr,function(index,value){
   
            console.log(index,value);
        });
        //2.jQuery静态方法each遍历伪数组
        $.map(json,function(index,value){
   
            console.log(index,value);
        });
    </script>

each和map的区别

    <script src="jquery/jquery-1.12.4.js"></script>
    <script>
        var arr=[0,1,3,5,7];
        var json={
   0:3,1:5,2:7,3:9,length:4};
        /*
        jQuery中each静态方法与map静态方法返回值qubie
        each静态方法的返回值是，遍历谁就返回谁
        map静态方法的返回值是，默认为空数组

        each静态方法不支持在回调函数中对遍历的数组进行处理
        map静态方法可以在回调函数中通过return对遍历数组进行处理，然后生成一个新的数组并返回
        */
        var res1=$.each(arr,function(index,value){
   });
        var res2=$.map(arr,function(index,value){
   });
        var res3=$.map(arr,function(index,value){
   
            return value+index
        });
        console.log(res1);
        console.log(res2);
        console.log(res3);
    </script>

3.jQuery其他静态函数

    <script>
        var str='    yyy    ';
        var arr=[1,2,3];
        var json={
   0:3,1:5,2:7,3:9,length:4};
        console.log(str);
        /*
        $.trim(str);
        作用：去除字符串两端的空格，不修改原字符串
        参数：需要去除空格的字符串
        返回值：去除空格之后的字符串
        */
        var res=$.trim(str);
        console.log(res);
        console.log(str);

        /*
        $.isWindow(obj)
        作用：判断传入的参数是不是window对象
        返回值：true/false
        */
        var w=window;
        var res1=$.isWindow(w);
        console.log(res1);//true

        /*
        $.isArray(obj)
        作用：判断传入的参数是不是数组
        返回值：真数组是true，伪数组是false
        */
        var res2=$.isArray(arr);//true
        var res3=$.isArray(json);//false

        /*
        $.isFunction(func)
        作用：判断传入的参数是不是函数
        返回值：true/false
        注意点：jquery框架本质上是一个函数
        */
        var fn=function(){
   };
        var res4=$.isFunction(fn);//true
        var res5=$.isFunction(jQuery);
        console.log(res4);
        console.log(res5);
    </script>

4.holdReady静态函数

    <script>
        //作用：暂停ready执行
        $.holdReady(true);
        $.ready(function(){
   
            alert(123);
        });
    </script>

jQuery内容选择器

    <script src="jquery/jquery-1.12.4.js"></script>
    <script>
        //:contains(text)
        //:empty
        //:has(selector)
        //:parent
        $(function(){
   
            //:empty找到既没有文本内容也没用子元素的指定元素
            var $div=$('div:empty');
            console.log($div);
            //:parent找到有文本内容或者有子元素的指定元素
            var $div1=$('div:parent');
            console.log($div1);
            //:contains(txt)找到包含指定文本内容的指定元素
            var $div2=$("div:contains('n')");
            console.log($div2);
            //:has(selector)找到包含指定子元素的指定元素
            var $div3=$("div:has(span)");
            console.log($div3);
        });
    </script>

属性和属性节点

1.什么是属性？
对象身上保存的变量就是属性

2.如何操作属性？
对象.属性名称=值;
对象.属性名称;
对象[“属性名称”]=值;
对象[“属性名称”];

操作属性的方法

/*
1.prop方法
注意点：prop方法不仅能操作属性，也能操作属性节点
*/
//在操作属性节点有true和false时用prop其他都用attr
/*
2.removeProp方法
*/
$("span").eq(0).prop("demo","yqh");//eq(0)得到第一个span
$("span").removeProp("demo");

3.什么是属性节点？

在编写HTML代码时，在HTML标签中添加的属性就是属性节点。
在浏览器中找到span这个DOM元素之后，展开看到的都是属性。
在attributes属性中保持的所有内容都是属性节点。

4.怎么操作属性节点？
DOM元素.setAttribute(“属性名称”,“值”);
DOM元素.getAttribute(“属性名称”);

    <script>
        $(function(){
   
            var ospan=document.getElementsByTagName('span')[0];
            ospan.setAttribute("name","yqh");
            console.log(ospan.getAttribute("name"));
        });
    </script>

操作属性节点的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery/jquery-1.12.4.js"></script>
    <script>
        $(function(){
   
            /*
            1.attr(name|pro|key,val|fn);
            作用：获取或者设置属性节点的值
            可以传递一个参数，也可以传递两个参数
            如果传递一个参数，代表获取属性节点的值
            如果传递两个参数，代表设置属性节点的值
            
            注意点：
            如果是获取：无论找到多少个元素，都只会返回第一个元素指定的属性节点
            如果是设置，有多少设置多少
            如果设置的属性节点不存在，系统会自动为你创建
            2.removeAttr(name)
            作用删除属性节点

            注意点：
            会删除所有找到元素指定的属性节点
            如果要一次删除多个属性节点，就在""class name"中间加空格
            */
            $("span").attr("class","box");

        });
    </script>
</head>
<body>
    <span class="span1" name="123"></span>
    <span class="span2"></span>
</body>
</html>

5.属性和属性节点的区别？
任何对象都有属性，但只有DOM元素有属性节点

jQuery类操作相关方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
   width: 100px;height: 100px;}
        .class1{
   
            width: 150px;
            height: 150px;
            background: red;
        }
        .class2{
   
            border: 5px dashed;
        }
    </style>
    <script src="jquery/jquery-1.12.4.js"></script>
    <script>
        /*
        addClass(class|fn)
        作用：添加一个类
        如果想要同时添加多个类，就用空格隔开

        removeClass([class|fn])
        作用：删除一个类
        如果想要同时删除多个类，就用空格隔开

        toggleClass(class|fn[,sw])
        作用：切换类
        如果没有就添加类，如果有就删除
        */
        $(function(){
   
            var aBtn=document.getElementsByTagName('button');
            aBtn[0].onclick=function(){
   
                $("div").addClass("class1");
            };
            aBtn[1].onclick=function(){
   
                $("div").addClass("class2");
            };
            aBtn[2].onclick=function(){
   
                $("div").removeClass("class2");
            };
            aBtn[3].onclick=function(){
   
                $("div").addClass("class1 class2");
            };
            aBtn[4].onclick=function(){
   
                $("div").removeClass("class1 class2");
            };
            aBtn[5].onclick=function(){
   
                $("div").toggleClass("class1 class2");
            };
        });
    </script>
</head>
<body>
    <button>类一</button>
    <button>类二</button>
    <button>删除</button>
    <button>同时添加</button>
    <button>同时删除</button>
    <button>切换类</button>
    <div></div>
<

最低0.47元/天解锁文章