JavaScript之jQuery要点记录

一 属性和属性节点

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);

原文地址:https://www.cnblogs.com/xiaonanxia/p/11143612.html

时间: 2024-10-09 08:02:22

JavaScript之jQuery要点记录的相关文章

js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)

最近做了一个项目,需要用子域名调用主域名下的一个现有的功能,于是想到了用jsonp来解决,在我们平常的项目中不乏有这种需求的朋友,于是记录下来以便以后查阅同时也希望能帮到大家,需要了解的朋友可以参考下 很庆幸,我又见到了末日后新升的太阳,所以我还能在这里写文章,言归正传哈,最近做了一个项目,需要用子域名调用主域名下的一个现有的功能,于是想到了用jsonp来解决,在我们平常的项目中不乏有这种需求的朋友,于是记录下来以便以后查阅同时也希望能帮到大家. 什么是JSONP协议? JSONP即JSON w

jQuery学习记录1

jquery 和 js css里面都是坑呀 this.style.backgroundColor 和 css {background:#8df;} 是冲突的,用了前者,再$(this).addClass("css class name");效果显示不出来. http://youchenglin.iteye.com/blog/685026 前他的一些内容参见下列代码 <!DOCTYPE html> <html> <head> <meta char

JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记3

技术非常多,样例非常多.仅仅好慢慢学,慢慢实践!!如今学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] JavaScript.jQuery.HTML5.Node.js实例大全-读书笔记2 3.3 响应鼠标动作 图3-2的效果已经有了,须要鼠标来操作展示想看的照片.这就须要在对应的地方加上事件. 3.3.1 响应小照片单击动作 在3.2.3的代码里提供了显示小图列表的eg.showThumb()方法.在单击小图片时要显示大图片.

jquery学习记录

i{margin:21px 0}#header-wrapper .Menu-indicator>i,.wrapper-embed .Menu-indicator>i{margin:13px 0}.Menu-popover{background-color:#f7f7f7;display:none;border:1px solid #b5b5b5;position:absolute;z-index:9998}.Menu-popover.is-active{display:block}.Menu_

【JavaScript】jQuery Ajax 实例 全解析

jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯. 废话少说,直接进入正题,我们先来看一些简单的方法,这些方法都是对jQuery.ajax()进行封装以方便我们使用的方法,当然,如果要处理复杂的逻辑,还是需要用到jQuery.ajax()的(这个后面会说到). 1. load( url, [data], [callback] ) :载入远程 HTML 文件代码并插入至 DOM 中. url (String) :

【Javascript】jQuery Validate扩展验证方法

/*****************************************************************jQuery Validate扩展验证方法*****************************************************************/// 判断整数value是否等于0 jQuery.validator.addMethod("isIntEqZero", function (value, element) { valu

bootstrap下拉框的例子,提示Error: Bootstrap&#39;s JavaScript requires jQuery

bootstrap很多js依赖jquery,所以需要引入jquery 遇到的问题: 页面访问提示:Error: Bootstrap's JavaScript requires jQuery 解决方法: 在引入bootstrap的js文件之前,先引入jquery.js 导入顺序可以向下面一样 <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><link rel

为什么原生 JavaScript 开发越来越多受欢迎?是否应该跟风用原生JavaScript代替 jQuery等库?

本文标签:  jQuery的作用 原生JavaScript优势 jQuery官网 jQuery处理DOM和跨浏览器 JavaScript新特性 互联网杂谈 随着 JavaScript 本身的完善,越来越多的人开始喜欢使用原生 JavaScript 开发代替各种库,其中不少人发出了用原生 JavaScript 代替 jQuery 的声音.这并不是什么坏事,但也不见得就是好事.如果你真的想把 jQuery从前端依赖库中移除掉,我建议你慎重考虑. 首先 jQuery 是一个第三方库.库存在的价值之一在

通过javascript库JQuery实现页面跳转功能代码

通过javascript库JQuery实现页面跳转功能代码的四段代码实例如下. 实例1: 1 2 3 4 $(function(){ var pn = $("#gotopagenum").val();//#gotopagenum是文本框的id属性 location.href = "NewList.aspx?pagenum="+pn;//location.href实现客户端页面的跳转 }); 实例2: 实现跳转:window.location = 'user!add.