jQurey

2021-09-16 21:59:50 作者：互联网

jQuery

jQuery是JavaScript一个jQuery 是一个 JavaScript 库。它极大地简化了 JavaScript 编程。

jQuery入口函数

//第一种写法
$(document).ready(function() {
      alert("hello jQuery");
});
//第二种写法
 jQuery(document).ready(function() {
            alert("hello jQuery");
        })；
//第三种写法（import）
 $(function() {
            alert("hello jQuery");
        });   
//第四种写法
  jQuery(function() {
            alert("hello jQuery");
        });

jQuery冲突问题的解决

释放$的使用权
-释放操作必须在编写在其他jQuery之前编写，释放后不能在使用$;改为使用jQuery

jQuery.noConflict();

自定义一个访问符号

//把$换成nj
var nj = jQuery.noConflict();

jQuery核心函数

$();就代表jQuery的核心函数

$(function() {
            //   1. 它可以接收一个函数；
            alert('hello jquery');
            // 2.接收一个字符串
            // 2.1 接收一个字符串选择器
            var $box1 = $(".box1");
            var $box2 = $("#box2");
            console.log($box1);
            console.log($box2);
            // 2.2 接收一个代码片段
            var $p = $("<p>qwertyuio</p>")
            console.log($p);
            $box1.append($p);
            // 3.接受一个DOM元素

            var span = document.getElementsByTagName('span')[0];
            console.log(span);
            var $span = $(span);
            console.log($span);

        })

jQuery对象（是一个伪数组）

伪数组有0-length-1属性，有lenght属性

jQuery静态方法和实例方法

静态方法加在类上，通过类名调用。
实例方法加在类的原型上，通过实例（创建一个对象）调用。

jQuery静态方法

each（index，value）方法（相当于foreach，但是each可以遍历伪数组）
第一个参数：当前遍历到的索引。
第二个参数：当前遍历到的元素。

 var arr = [1, 2, 3, 4, 5];
        var obj = {
            0: 1,
            1: 2,
            2: 3,
            3: 4,
            4: 5,
            length: 5
        };
        $.each(obj, function(index, value) {
            console.log(index, value);
        })

map（）方法（与原生js相比可以遍历伪数组）
第一个参数:当前遍历到的元素。
第二个参数：当前遍历到的索引。

 var arr = [1, 2, 3, 4, 5];
        var obj = {
            0: 1,
            1: 2,
            2: 3,
            3: 4,
            4: 5,
            length: 5
        };
        $.map(obj, function(value, index) {
            console.log(index, value);
        })

jQuery中each静态方法与map静态方法的区别：

each静态方法默认的返回值为遍历谁返回谁。
map静态方法的返回值是空。
each静态方法不支持在回调函数中对遍历的数组进行处理。
map静态方法可以在回调函数中通过return对遍历数组进行处理，然后生成一个新的数组。

 var arr = [1, 2, 3, 4, 5];
        var obj = {
            0: 1,
            1: 2,
            2: 3,
            3: 4,
            4: 5,
            length: 5
        };
        var res = $.map(obj, function(value, index) {
            console.log(index, value);
            return value + index;
        })

tirm(str)删除字符串两端的空格

参数：需要删除空格的字符串
返回值：去除空格之后的字符串

var str = '    yzx    ';
        var res = $.trim(str);
        console.log("---" + res + "---");

isWindow(判断传入的对象属不属于window对象）

返回值：ture false

isArray(判断是不是一个数组）

返回值：ture false

isFunction(判断是不是一个函数)

返回值：ture false
jQuery本质是一个函数

$.holdReady(true);（暂停ready执行）
$.holdReady(false);（恢复ready执行）

 $.holdReady(true);
    $(document).ready(function() {
        alert("ready");
    })
      var btn = document.getElementsByTagName('button')[0];
        btn.onclick = function() {
            $.holdReady(false);
        }

jQuery内容选择器

：empty（找到既没有子元素又没有文本内容的指定元素）
：parent （找到有子元素或者文本内容的指定元素）
:contains（‘123’）（找到包含123的指定元素）
:has("")（找到包含指定子元素的指定元素）

 $(function() {
        var $div = $('div:empty');
        console.log($div);

        var $div = $('div:parent');
        console.log($div);

        var $div = $('div:contains("123")');
        console.log($div);

        var $div = $('div:has("span")');
        console.log($div);

    })

jQuery的属性和属性节点

属性是对象身上保存的变量。
如何操作属性

赋值：1.对象.属性名 = 值
2.对象[“属性名称”] = 值
获取：1.对象.属性名
2.对象[“属性名称”]

 $(function() {
        function Person() {

        }
        var p = new Person();
        p.name = 'yzx';
        console.log(p.name);
        p["age"] = 18;
        console.log(p["age"]);


    })

属性节点是指在编写HTML代码时，在HTML标签中添加的就是属性节点。

在浏览器中找到span这个DOM元素之后，展开看到的都是属性。
在attribute中保存的所有内容都是属性节点。

操作属性节点

  var span = document.getElementsByTagName('span')[0];
        span.setAttribute('name', 'yzx');
        console.log(span.getAttribute('name'));

属性与属性与属性节点的区别
任何对象都有属性，只有DOM对象才有属性节点。

jQuery方法

attr（name|pop|key.value|fn）

作用：获取或者设置属性节点的值
可以传递一个参数，也可以传递两个参数
如果传一个参数代表获取属性节点的值
传两个参数，代表设置属性节点
如果是获取，无论找到多少元素，都只会返回第一个元素的指定属性
设置属性节点，找到多少个元素就设置多少个元素

 $(function() {
console.log($('span').attr("class"));
        $('span').attr("class", 'pay');
        $('span').attr("name", 'yzx');

    })

removeAttr()删除属性节点

//删除两个属性节点用空格隔开
$('span').removeAttr("class name");

prop（）方法

相当于arrt（）
prop不仅能操作属性还能操作属性节点

removeprop（）方法

相当于removeattr（）

在具有true和false两个属性的属性节点如checked，selected或者disabled使用prop（），其他的使用attr（）；

  // .eq(0)是指找到第一个span
        $('span').eq(0).prop("dome", 'it666');

jQuery类操作相关方法

addClass()
removeClass()
toggleClass()

有就删除，没有就添加

<style>
    * {
        margin: 0;
        padding: 0;
    }
    
    .class1 {
        width: 100px;
        height: 100px;
        background-color: #8c8c;
    }
    
    .class2 {
        border-radius: 20%;
        border: crimson 1px solid;
    }
</style>
<script>
    $(function() {
        var btns = document.getElementsByTagName('button');
        btns[0].onclick = function() {
            $('div').addClass('class1 class2');
        }
        btns[1].onclick = function() {
            $('div').removeClass('class2');
        }
        btns[2].onclick = function() {
            $('div').toggleClass('class1 class2');
        }
    })
</script>
    <button>添加类</button>
    <button>删除类</button>
    <button>切换类</button>
    <div></div>

jQuery文本值相关操作

html（）
text（）
val（）

<style>
    * {
        margin: 0;
        padding: 0;
    }
    
    div {
        width: 100px;
        height: 100px;
        background-color: #8c8c;
        border: rgb(131, 27, 48) 1px solid;
    }
</style>
<script>
    $(function() {
        var btns = document.getElementsByTagName('button');
        btns[0].onclick = function() {
            $('div').html('<p>i am a p <span>i am span</span></p>')
        }
        btns[1].onclick = function() {
            console.log($('div').html());
        }
        btns[2].onclick = function() {
            $('div').text('<p>i am a p <span>i am span</span></p>')
        }
        btns[3].onclick = function() {
            console.log($('div').text());
        }
        btns[4].onclick = function() {
            $('input').val('请输入内容');
        }
        btns[5].onclick = function() {
            console.log($('input').val());
        }
    })
</script>

<body>
    <button>设置html</button>
    <button>获取html</button>
    <button>设置text</button>
    <button>获取text</button>
    <button>设置value</button>
    <button>获取value</button>
    <div></div>
    <input type="text">


</body>

jQuery操作样式方法

  $(function() {
        // 逐个设置
        $('div').css('width', '100px');
        $('div').css('height', '100px');
        $('div').css('background', '#8c8c');
        // 链式设置
        $('div').css('width', '100px').css('height', '100px').css('background', '#8c8c');
        // 批量设置
        $('div').css({
            width: '100px',
            height: "100px",
            background: "#5555"
        });
        // 获取css样式值
        console.log($("div").css('width'));
    })

jQuery尺寸和位置操作

获取和修改尺寸

$(function() {
        var btns = document.getElementsByTagName('button');
        // 监听获取
        btns[0].onclick = function() {
                console.log($('.father').width());
            }
            // 监听设置
        btns[1].onclick = function() {
            $('.father').width("500px")
        }
    })

offet（）（获取元素距离窗口的偏移量）
position（）（获取元素距离定位元素的偏移位）

<style>
    * {
        margin: 0;
        padding: 0;
    }
    
    .father {
        width: 200px;
        height: 200px;
        background-color: #5555;
        border: navy 50px solid;
        margin-left: 50px;
        position: relative;
    }
    
    .son {
        width: 100px;
        height: 100px;
        background-color: rgb(114, 203, 219);
        position: absolute;
        left: 50px;
        top: 50px;
    }
</style>
<script>
    $(function() {
        var btns = document.getElementsByTagName('button');
        // 监听获取
        btns[0].onclick = function() {
                console.log($('.father').width());
                console.log($('.son').offset().left);
                console.log($('.son').position().left);
            }
            // 监听设置
        btns[1].onclick = function() {
            $('.father').width("500px");
            $('.son').offset({
                left: 10
            })
            // position只获取不设置
            // $('.son').position({
            //     left: 10
            // });
        }
    })
</script>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <button>获取</button>
    <button>设置</button>

</body>

scrollTop()（滚动条的偏移量）

<style>
    * {
        margin: 0;
        padding: 0;
    }
    
    .scroll {
        width: 100px;
        height: 200px;
        overflow: auto;
    }
</style>
<script>
    $(function() {
        var btns = document.getElementsByTagName('button');
        // 监听获取
        btns[0].onclick = function() {
            console.log($('div').scrollTop());
             // 获取网页滚动的偏移量
           console.log($('body').scrollTop()+$('html').scrollTop())
        }

        // 监听设置
        btns[1].onclick = function() {
            $('div').scrollTop(300);
		// 设置网页滚动的偏移量
            $('html,body').scrollTop(900);
        }
    })
</script>

<body>
    <div class="scroll">
        听到新东方已经18岁时，竟有些恍惚。18年，我们长大成人，新东方也从一个最初我闻所未闻的学校变成了中国首家在美国纽交所上市的教育机构；18岁，也是大多数人走进大学校门的年纪。在这样一个时间节点上，我想跟大家聊聊在大学阶段比较重要的几件事情。 　　 　　关于梦想和人生规划 　　 　　我18岁时还不懂什么是人生规划，甚至都没想过自己有什么梦想。现在回想起来，如果当年可以接触到更多的信息，大学期间的收获或许会更大。至于什么是梦想，我还是在毕业工作了几年之后才悟出来的。我以为，梦想就是每天在你脑海中萦绕，挥之不散、不实现它就不甘心的那个念头。你为了它，愿意起早贪黑，愿意吃尽苦头，就算最后实现不了，也依然无怨无悔。
这件事让我意识到信息资讯的重要性，错过信息就错过了机会。现在获取信息的途径很多，要充分利用网络新闻资讯、微博、社交网站、论坛等等，但同时也需要选择和甄别信息。还想提醒大家，漫无目的地浏览相当浪费时间，看看空间，看看分享，再看看评论，一两个小时就过去了。那些能做出成绩的人，首先都是能管理好自己的人。（励志文章 www.lz13.cn）当年读大学的我比你们幸运，因为没有那么多选择，也就没那么多干扰。当年读大学的我又没有你们幸运，因为没有太多选择，也就没有太多机会和惊喜。 　　关于实习
        　　 
    </div>
    <button>获取</button>
    <button>设置</button>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>

jQuery事件

事件的绑定

// 方式1（编码效率高，部分事件没法实现）
            $('button').click(function() {
                alert('hello')
            })
// 方式2（编码效率相对较低，所有js属性都能添加）
            $('button').on('click', function() {
                alert("hello yzx")
            })

注册多个事件不覆盖，可以添加多个事件

事件的解绑

off()不传参数代表解绑所有事件

 function test1() {
                alert('hello')
            }

            function test2() {
                alert("hello yzx")
            }
            $('button').click(test1);

            $('button').on('click', test2)

            $('button').off();
            $('button').off('click');
            $('button').off('click', test1);

事件冒泡和默认行为

阻止事件冒泡的方法：
1.在子元素事件结尾处加上return：false；
2.event.stopPropagation();也可以阻止事件冒泡
阻止默认行为
1.在你想要阻止的事件里加一个return：false；
event.preventDefault();也行

jQuery自动触发事件

// tigger会触发事件冒泡和默认事件
 $('button').trigger('click');
 // 不会触发事件冒泡和默认事件
  $('button').triggerHandler('click')

自定义事件（只能通过on来绑定，必须用tigger自动触发）
jQuery事件命名空间

通过on绑定的事件才有命名空间

  $('button').on('click.zs', function() {
                alert('hello')
            });

            $('button').on('click.ls', function() {
                alert("hello yzx")
            });
            $("button").trigger('click.zs');

事件委托

<script>
        $(function() {
            $("button").click(function() {
                $("ul").append('<li>我是新增的li</li>')
                //$("ul>li").click(function() {
                   // console.log($(this).html());
                //})
                  // 把li的click事件委托给ul
            $("ul").delegate('li', 'click', function() {
                console.log($(this).html());
            })
            })




        })
    </script>
</head>

<body>
    <ul>
        <li>我是第1个li</li>
        <li>我是第2个li</li>
        <li>我是第3个li</li>
    </ul>
    <button>新增一个li</button>

移入移出事件（mouseover，mouseout）

mouseover，mouseout事件，子元素被移入移除会触发父元素事件
mouseenter，mouseleave事件，子元素被移入移除不会触发父元素事件
hover事件传入两个函数，一个监听移入，一个监听移出

标签：function,jQuery,console,log,var,div,jQurey
来源： https://blog.csdn.net/qq_52314424/article/details/120312216