JavaScript之jQuery要点记录

Posted 2022-03-20 xiaonanxia

一 属性和属性节点

1.什么是属性?
对象身上保存的变量就是属性
2.如何操作属性?
对象.属性名称 = 值;
对象.属性名称;
对象["属性名称"] = 值;
对象["属性名称"];

3.什么是属性节点?
<span name = "it666"></span>
在编写html代码时,在HTML标签中添加的属性就是属性节点
在浏览器中找到span这个DOM元素之后, 展开看到的都是属性
在attributes属性中保存的所有内容都是属性节点

4.如何操作属性节点?
DOM元素.setAttribute("属性名称", "值");
DOM元素.getAttribute("属性名称");

5.属性和属性节点有什么区别?
任何对象都有属性, 但是只有DOM对象才有属性节点

jQuery的attr方法

1.attr(name|pro|key,val|fn)
作用: 获取或者设置属性节点的值
可以传递一个参数, 也可以传递两个参数
如果传递一个参数, 代表获取属性节点的值
如果传递两个参数, 代表设置属性节点的值

注意点:
如果是获取:无论找到多少个元素, 都只会返回第一个元素指定的属性节点的值
如果是设置:找到多少个元素就会设置多少个元素
如果是设置: 如果设置的属性节点不存在, 那么系统会自动新增

2.removeAttr(name)
删除属性节点

注意点:
会删除所有找到元素指定的属性节点

二 jQuery的prop方法

1.prop方法
特点和attr方法一致
2.removeProp方法
特点和removeAttr方法一致

$("span").eq(0).prop("demo", "aaa");
$("span").eq(1).prop("demo", "bbb");
console.log($("span").prop("demo"));

$("span").removeProp("demo");

注意点:
prop方法不仅能够操作属性, 他还能操作属性节点

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

三 位置和尺寸操作的方法

 获取元素的宽度
 console.log($(".father").width());
 offset([coordinates])
 作用: 获取元素距离窗口的偏移位
 console.log($(".son").offset().left);
 position()
 作用: 获取元素距离定位元素的偏移位

 设置元素的宽度
 $(".father").width("500px")

 $(".son").offset(
 left: 10
  );

 注意点: position方法只能获取不能设置
 $(".son").position( //错误
 left: 10
  );

 可用下面方法替代

$(".son").css(
left: "10px"
);

四 scrollTop方法

 获取滚动的偏移位
 console.log($(".scroll").scrollTop());
 获取网页滚动的偏移位
 注意点: 为了保证浏览器的兼容, 获取网页滚动的偏移位需要按照如下写法
console.log($("body").scrollTop()+$("html").scrollTop());

  

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

五 冒泡和默认行为

 $(".son").click(function (event) 
                alert("son");
                // return false;
                event.stopPropagation();
            );
            $(".father").click(function () 
                alert("father");
            );
            
            $("a").click(function (event) 
                alert("弹出注册框");
                // return false;
                event.preventDefault();
            );

六 事件自动触发

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

trigger: 如果利用trigger自动触发事件,会触发默认行为
triggerHandler: 如果利用triggerHandler自动触发事件, 不会触发默认行为

七 事件命名空间

想要事件的命名空间有效,必须满足两个条件
1.事件是通过on来绑定的
2.通过trigger触发事件
利用trigger触发子元素带命名空间的事件, 那么父元素带相同命名空间的事件也会被触发. 而父元素没有命名空间的事件不会被触发
利用trigger触发子元素不带命名空间的事件,那么子元素所有相同类型的事件和父元素所有相同类型的事件都会被触发

八 委托

1.什么是事件委托?
请别人帮忙做事情, 然后将做完的结果反馈给我们

在jQuery中,如果通过核心函数找到的元素不止一个, 那么在添加事件的时候,jQuery会遍历所有找到的元素,给所有找到的元素添加事件

如

 $("ul>li").click(function () 
       console.log($(this).html());
 );

如果 dom元素是动态创建的，需要用委托绑定事件

以下代码的含义, 让ul帮li监听click事件
之所以能够监听, 是因为入口函数执行的时候ul就已经存在了, 所以能够添加事件
之所以this是li,是因为我们点击的是li, 而li没有click事件, 所以事件冒泡传递给了ul,ul响应了事件, 既然事件是从li传递过来的,所以ul必然指定this是谁

$("ul").delegate("li", "click", function () 
                console.log($(this).html());
            );

九 移入移除事件

mouseover/mouseout事件, 子元素被移入移出也会触发父元素的事件
mouseenter/mouseleave事件, 子元素被移入移出不会触发父元素的事件

十 stop方法

  立即停止当前动画, 继续执行后续的动画
  $("div").stop();
  $("div").stop(false);
  $("div").stop(false, false);

  立即停止当前和后续所有的动画
  $("div").stop(true);
  $("div").stop(true, false);

  立即完成当前的, 继续执行后续动画
  $("div").stop(false, true);

  立即完成当前的, 并且停止后续所有的
  $("div").stop(true, true);