jQuery学习笔记汇总2-jQuery

最新推荐文章于 2023-06-26 22:22:38 发布

言人冰

最新推荐文章于 2023-06-26 22:22:38 发布

阅读量362

点赞数

分类专栏：《JavaScript笔记》文章标签： jquery

本文链接：https://blog.csdn.net/YRB20/article/details/119479695

版权

《JavaScript笔记》专栏收录该内容

11 篇文章 0 订阅

订阅专栏

知识点提炼

方法show( );等价于设置元素的display属性为block
方法hide( );等价于设置元素的display属性为none

prev( );上一个兄弟。 prevAll( );之前所有的兄弟
next( ); 下一个兄弟。 nextAll( );之后所有的兄弟

on可用来注册事件。off（）用来解绑事件
常见选择器汇总（例）：
$('#id'),$('.class'),$('div'),$('div,p,li'),$('div.box') ,$('ul>li'),$('ul li'), $('li:eq(2)'),$('li:even'),$('li:odd'),$('ul').find('a'),$('ul').children('li'), $('#div1').siblings('li'),$('#div1').parent(),$('#nav').hasClass('nav');

阻止事件冒泡： event.stopPropagation(); //event为参数
阻止浏览器默认行为： event.preventDefault();
阻止事件冒泡+浏览器默认行为： return false；

animate动画不会改变背景颜色，如非需要使用插件
隐式迭代：在方法的内部会为匹配到的所有元素进行循环遍历，执行相应的方法
若要对每一个相同的元素做不同的处理则需要用 each（） 方法

Push( ) 方法：向数组的末尾添加一个或多个元素，并返回新的数组长度
unshift( ): 向数组的最前面添加一个或多个元素，并返回新的数组长度

join( ) 方法可以将数组中所有元素转换成为字符串
三个简单实用的用于 DOM 操作的 jQuery 方法：

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值

overflow : auto; 当内容超过限定位置会出现滚动条

overflow : auto; 当内容超过限定位置会出现滚动条

attr() 方法用于获取属性值。//不传参则获取属性，传参则修改属性
removeAttr( ) 可移除单属性，也可移除多属性（用空格隔开）
【注】对标签内的属性用attr来读取和设置，对DOM对象的固有的一些属性，使用prop()来获取和设置

在jQuery1.6之后，对于checked、selected、disabled这类布尔型的属性来说不能用attr方法只能用prop方法

清空元素的内容： empty( ); 不推荐使用html("");有可能会造成内存泄漏，不安全。
移除某一元素：
$(父元素).remove(子元素)；【jQuery写法】
父元素.removeChild(子元素);【原生js写法】
克隆节点：clone( );默认参数是false。//true会将其事件一同克隆到，false则不会

jQuery中的宽高总结：
不包括内外边距和边框的方法：width( ),height( )
包括内边距的方法：innerWidth( ),innerHeight( )
包括内边距和边框的方法：outerWidth( ),outerHeight( )
包括内外边距和边框的方法：outerWidth( true ),outerHeight( true )
获取页面的可见宽高的方法：$(window).width( ); $(window).heighth( );
表示元素被卷曲的宽高的方法： scrollLeft( );scrollTop( ); 【传表“设置”，不传表“获取”】

e.pageX和e.pageY属性获得鼠标点击时的坐标位置,相当于e.clientX和e.clientY;
e.target属性获得触发事件的元素,相当于window.event.srcElement属性;(在事件冒泡的时候将得到最先触发事件的那个对象,而this不能做到) // e为参数

e.keyCode和e.charCode属性得到用户按下的键盘上哪一个键; // e为参数

移除事件绑定:unbind(“click”)移除click事件,其它事件移除方式相同;(可以实现在用户操作的某种状态下移除对象的事件)

1.jQuery语法

https://www.runoob.com/jquery/jquery-syntax.html

2.jQuery选择器

https://www.runoob.com/jquery/jquery-selectors.html
选择器包括：基础选择器、层次选择器、过滤选择器、筛选选择器

基础选择器

在这里插入图片描述

层次选择器

在这里插入图片描述

过滤选择器

在这里插入图片描述

筛选选择器

在这里插入图片描述

3、jQuery的常用API

3.1设置获取样式
1.获取样式：.css(‘样式’); //假如选择获取一堆元素，只能获取第一个样式

2.设置样式

单样式：
.css(‘样式名’，‘样式值’);

1)样式值若只有数值不需要加引号
2)设置的样式是行内样式

多样式：
.css({ width:300, ‘height’:’300px’})；

1)以对象形式修改样式那么就可以不用加引号
2)假如获取的是一堆元素，则全部都设置（隐式迭代）
3)如果是合成样式必须采用驼峰方法 backgroundColor

3.2设置类样式方法

添加类 .addClass(“类名”)
删除类 .removeClass(“类名”)
切换类 .toggle(“类名”) //点一下加点一下删
判断类 .hasClass(“类名”)

3.3类操作与className的区别

原生JS中ClassName会覆盖元素原先的类名
jQuery中类操作只是对指定类进行添加删除，不会影响原类名

提示：这里可以添加计划学习的时间
例如：
1、周一至周五晚上 7 点—晚上9点
2、周六上午 9 点-上午 11 点
3、周日下午 3 点-下午 6 点

4.jQuery事件

https://www.runoob.com/jquery/jquery-events.html

on注册事件（重点）

on 简单注册事件（不支持动态注册）
on 委托注册【绑定代理事件的选择器必须为其父节点】（支持动态注册）

on委托注册的原理是 事件的冒泡
$(selector).on('click','span',function(){});

jQuery用on来注册事件就用off来解绑事件

[不传参数即解绑所有的事件，传参即解绑指定事件]

trigger() : 用代码的方式来触发事件【用来处理提交按钮在表单外面】

例如：

$('#one').on('abc',function(){ console.log("......");});
$('#btn').on('click',function(){
	var a = confirm('我帅吗？');
	if(a){
		$('#one').trigger('abc');
	}
});

5.什么时候可以使用链式方程？

若一个元素调用一个方法，其有返回值且为一个jQuery对象，就可再继续点出jQuery方法，当返回的对象不是我们想要的对象时，我们可以用 .end()回复到上一次的状态并且返回匹配元素之前的状态

显示迭代

若要对每一个相同的元素做不同的处理则需要用 each（） 方法
例子

<script src="jQuery/jquery-1.12.3.js"></script>
    <script>
        $(function () {
 
               // for(var i=0;i<$(".comment li").length;i++){
               //     $(".comment li").eq(i).css("opacity",(i+1)/10);
               // }
                $("li").each(function (index,element) {
                    $(element).css("opacity",(index+1)/10);
                })
                //index 为每个li标签的索引
                //element为li标签，dom对象
        });
    </script>

6.jQuery中添删设置获取元素的方法

jQuery - 设置内容和属性
 jQuery - 获取内容和属性
 jQuery - 添加元素
 jQuery - 删除元素

三个简单实用的用于 DOM 操作的 jQuery 方法：

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值

JQuery中的val()方法对应Dom中的value属性;
JQuery中的text()方法对应Dom中的innerText属性;
JQuery中的html()方法对应Dom中的innerHTML属性;

获取属性 - attr()
jQuery attr() 方法用于获取属性值。
removeAttr( ) 可移除单属性，也可移除多属性（用空格隔开）

【注】对标签内的属性用attr来读取和设置，对DOM对象的固有的一些属性，使用prop()来获取和设置

添加元素

子元素.appendTo(父元素)
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容 (作为所选元素的兄弟关系)
before() - 在被选元素之前插入内容 (作为所选元素的兄弟关系)

清空元素
empty( ); 可清空元素上的内容、事件、但该元素还存在，不推荐使用html("");有可能会造成内存泄漏，不安全。

移除某一元素

原生js: 父元素.removeChild(子元素)
jQuery： $(元素).remove( ); //元素连同内容一同消失

jQuery中克隆节点

clone( ) ；//只有在内存中，若要在页面上显示则需加到页面上，传参true/false都会克隆到后代节点【默认为false】

传参为 true 表示会将事件一起克隆到，若为false则不会

7.jQuery中设置宽高的问题

width( ),height( ) 不包括 border，margin，padding
innerWidth( ),innerHeight( ) 包括内边距
outerWidth( ),outerHeight( ) 包括内边距和边框
outerWidth( true ),outerHeight( true ) 包括内外边距和边框
- 获取页面的可见宽度 $(window).width();
offset( ) 会得到1个对象（包括top和left的值）该方法可获取元素距离document的位置
position( ) 该方法可获取到元素距离父元素（offsetParent）的位置
scrollLeft( )，scrollTop( );表示元素被卷曲的宽度和高度传参表“设置”，无参表“获取”

8.jQuery中的效果

https://www.runoob.com/jquery/jquery-hide-show.html

在这里插入图片描述

言人冰

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery学习笔记汇总2-jQuery

 知识点提炼  方法show( );等价于设置元素的display属性为block 方法hide( );等价于设置元素的display属性为none prev( );上一个兄弟。 prevAll( );之前所有的兄弟 next( ); 下一个兄弟。 nextAll( );之后所有的兄弟 on可用来注册事件。off（）用来解绑事件常见选择器汇总（例）：$('#id'),$('.class'),$('div'),$('div,p,li'),$('div..
复制链接

扫一扫