一篇jquery知识让你快速了解jquery

1.释放 $的使用权** 注意点: 释放操作必须在编写其它jQuery代码之前编写释放之后就不能再用$ ,改为使用jQuery
jQuery原理.noConflict();
var nj = jQuery.noConflict(); nj(function () { alert("hello lnj"); });

2、静态方法和实例方法
// 1.定义一个类

       function AClass() {
       }
       // 给这个类添加一个静态方法
       // 直接添加给类的就是静态方法
       AClass.staticMethod = function () {
           alert("staticMethod");
       }
       // 静态方法通过类名调用
       AClass.staticMethod();

 //给这个类添加一个实例方法
        AClass.prototype.instanceMethod = function () {
            alert("instanceMethod");
        }
        // 实例方法通过类的实例调用
        // 创建一个实例(创建一个对象)
        var a = new AClass();
        // 通过实例调用实例方法
        a.instanceMethod();

each方法：

        第一个参数: 当前遍历到的索引
        第二个参数: 遍历到的元素
        注意点:
        jQuery的each方法是可以遍历伪数组的
        */
        // $.each(arr, function (index, value) {
        //     console.log(index, value);
        // });
        $.each(obj, function (index, value) {
            console.log(index, value);
        });

map方法

    第一个参数: 要遍历的数组
    第二个参数: 每遍历一个元素之后执行的回调函数
    回调函数的参数:
    第一个参数: 遍历到的元素
    第二个参数: 遍历到的索引
    注意点:
    和jQuery中的each静态方法一样, map静态方法也可以遍历伪数组
    */
    // $.map(arr, function (value, index) {
    //     console.log(index, value);
    // });
    var res = $.map(obj, function (value, index) {
        console.log(index, value);
        return value + index;
    });

    var res2 = $.each(obj, function (index, value) {
        console.log(index, value);
        return value + index;
    });
     console.log(res);
    console.log(res2);

jQuery中的each静态方法和map静态方法的区别:
1. each静态方法默认的返回值就是, 遍历谁就返回谁
2. map静态方法默认的返回值是一个空数组
3. each静态方法不支持在回调函数中对遍历的数组进行处理
4. map静态方法可以在回调函数中通过return对遍历的数组进行处理, 然后生成一个新的数组返回

holdReady方法

$.holdReady(true); 作用: 暂停ready执行

3.内容选择器

:empty 作用:找到既没有文本内容也没有子元素的指定元素
:parent 作用: 找到有文本内容或有子元素的指定元素
:contains(text) 作用: 找到包含指定文本内容的指定元素
:has(selector) 作用: 找到包含指定子元素的指定元素

4. getAttribute() attr()
DOM元素.setAttribute(“属性名称”, “值”);
DOM元素.getAttribute(“属性名称”);

    <body>
    <span name = "it666"></span>
    <script src="js/jquery-3.3.1.js"></script>
    <script>
        $(function () {
            var span=document.querySelector('span');
            //获取的div是[object HTMLDivElement]
            console.log(span.getAttribute("name"));
        })
    </script>
    </body>

5.attr(name|pro|key,val|fn)

<body>
<span name = "it666"></span>
<script src="js/jquery-3.3.1.js"></script>
<script>
    $(function () {
       $("span").attr("name");
    })
</script>
</body>

主要区别

调用 getAttribute() 的主体必须是元素(Element) 不可用$()访问
调用 attr() 的主体必须是对象(Object) 不可用Element访问

6.prop方法
特点和attr方法一致
注意点:

   prop方法不仅能够操作属性, 他还能操作属性节点
    **官方推荐**:在操作属性节点时,具有 true 和 false 两个属性的属性节点，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()

7.jquery操作类相关的方法
1.addClass(class|fn)
作用: 添加一个类
如果要添加多个, 多个类名之间用空格隔开即可
2。removeClass([class|fn])
作用: 删除一个类
如果想删除多个, 多个类名之间用空格隔开即可
3.toggleClass(class|fn[,sw])
作用: 切换类
有就删除, 没有就添加

8.jquery操作文本相关方法
1.html([val|fn])
和原生JS中的innerHTML一模一样
2.text([val|fn])
和原生JS中的innerText一模一样
3.val([val|fn|arr]) 操作有value属性的元素

9.jquery位置和尺寸操作方法
1.offset() 作用: 获取元素距离窗口的偏移位
2.position() 作用: 获取元素距离定位元素的偏移位

注意：原生js中的offsetLeft相当于position() offsetLeft必须用Element主体调用与jquery的offset()不一样

10.srollTop()方法
作用：获取滚动的偏移位
注意点: 为了保证浏览器的兼容, 获取网页滚动的偏移位需要按照如下写法

// 设置网页滚动偏移位
 // 注意点: 为了保证浏览器的兼容, 设置网页滚动偏移位的时候必须按照如下写法
 $("html,body").scrollTop();

11、事件绑定 jQuery中有两种绑定事件方式

 1.eventName(fn);
    编码效率略高/ 部分事件jQuery没有实现,所以不能添加
2.on(eventName, fn);
    编码效率略低/ 所有js事件都可以添加

注意：js中有HTML DOM addEventListener() 方法绑定事件的方式
12、事件移除 off();
off方法如果不传递参数, 会移除所有的事件
off方法如果传递一个参数, 会移除所有指定类型的事件
$("button").off("click");
off方法如果传递两个参数, 会移除所有指定类型的指定事件
$("button").off("click", test1);

13、事件冒泡和默认行为
阻止事件冒泡：
if(event && event.stopPropagation){ event.stopPropagation() }else { window.event.cancelable=true; };
阻止默认行为： event.preventDefault();

14.事件自动触发
trigger: 如果利用trigger自动触发事件,会触发事件冒泡
triggerHandler: 如果利用triggerHandler自动触发事件, 不会触发事件冒泡

15、jquery自定义事件
想要自定义事件, 必须满足两个条件
1.事件必须是通过on绑定的
2.事件必须通过trigger来触发

  $(".son").myClick(function (event) {
          alert("son");
       });
` $(".son").on("myClick", function () {
                alert("son");
       });
  $(".son").triggerHandler("myClick");

自定义命名空间
想要事件的命名空间有效,必须满足两个条件
1.事件是通过on来绑定的
2.通过trigger触发事件

 $(".son").on("click.zs", function () {
                alert("click1");
            });
            $(".son").on("click.ls", function () {
                alert("click2");
            });
            // $(".son").trigger("click.zs");
            $(".son").trigger("click.ls");

**16、jquery自定义动画 animate({}) **
delay方法的作用就是用于告诉系统延迟时长

	 第一个参数: 接收一个对象, 可以在对象中修改属性
            第二个参数: 指定动画时长
            第三个参数: 指定动画节奏, 默认就是swing
            第四个参数: 动画执行完毕之后的回调函数

17、事件委托delegate() 方法
delegate() 方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//事件委托
  $("div").delegate("button","click",function(){
    $("p").slideToggle();
  });
});
</script>
</head>
<body>
<div style="background-color:red">
<p>这是一个段落。</p>
<button>请点击这里</button>
</div>

</body>
</html>

一篇jquery知识 让你快速了解jquery

猜你喜欢

一篇jquery知识让你快速了解jquery