jQuery 精华一页纸

最新推荐文章于 2021-12-04 22:00:00 发布

airpor

最新推荐文章于 2021-12-04 22:00:00 发布

阅读量535

点赞数

分类专栏：前端文章标签： jquery javascript 精华一页纸 js

本文链接：https://blog.csdn.net/airpor/article/details/69574636

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1、选择器 $() -- 基于 CSS + XPath 的选择器语法

I、基本选择器
元素 | ID | Class - 替代JS的3种 getElement;可以有多层
$("div p #id") -- div 元素子元素为p

II、属性选择器
$("[属性]")
属性选择器支持属性 | 判断属性值 = != | 属性值 | ^ $ 开头和结尾 | 包含 *=
$("[href$='.jp']") -- 选择 href 属性以.jpg结尾的元素

IV、伪类选择器 -- 这些伪类基本都是CSS支持的
A、后代
基于任意位置 :first-child :first-of-type | :last-child :last-of-type | :nth-child(n) :nth-last-child(n) :nth-of-type(n) :nth-last-of-type(n)
基于数目 :only-child :only-of-type
这些选择器有两种使用方式：
a、直接使用 :first-child 表明是第一个元素；第一个类型（只要类型发生切换后，出现新的类型也是第一个类型）
$("div :first-child")
<div>
<p>
</div>
$("div :first-child-type")
<div>
<span> -- 可以选中
<p> -- 可以选中（因为类型不同）
</div>

b、指定元素 p:first-child 指定元素后，就要找第一个元素 = p 的；第一个类型 = p的（由直接使用可以看到，第一个类型=p的，并不限定子元素出现的位置，只要是父元素的第一个类型=p的子元素即可。
$("div p:first-child")
<div>
<p> -- 选中
<p> -- 无法选中
</div>
$("div :first-child-type")
<div>
<span>
<p> -- 第一次出现可以选中
</div>

C、逻辑判断（内容选择）
:not(selector) | :empty | :contains | :has
:parent

根据状态来选择
:enabled | :disabled | :checked | :selected

2、过滤器 (filter)

I、过滤器 -- 基于选择器选择后，再通过方法进行过滤
位置： first | last
逻辑： eq | not | filter

$("div p").filter("#id1); -- 选出div 子元素中，id为 id1 的元素

II、过滤样式 -- 基于CSS 样式，筛选选择器内容，主要用在DOM和过滤器方法参数中

$("div").parents(".class1") -- 选出祖先元素中，class 为 class1 的元素

选择器 + 过滤器 = 选出需要的元素；所以很多选择器的用法，同样适用在过滤器，特别是伪类部分，比如状态（可见性）；内容选择（自身位置）；表单元素选择；还有父子层次元素叠加 ("div p") (div>p) (div+p) (div~p)
选择器和过滤器基本上最终目的途径是差不多

3、DOM 操作

I、节点内容操作 getter/setter - 和js操作是一样的逻辑
提供4个方法可以获取元素的内容/属性/ 以及表单用户输入的内容：text | html | val | attr
无参方法是获取内容；有参方法是设置值
设置值内容，有两种方法：1 键值 - 对 & 键值对对象； 2、通过 callback 回调函数返回值设置 - callback 可选的参数是 (i, origValue) 当前元素索引和原先的旧值。
$("button").click(function(){
$("#runoob").attr("href","http://www.runoob.com/jquery");
});

II、新增/删除节点
append prepend | before after -- 替代了JS的appendChild /nsertBefore
这两组的区别是，如果可以包含子元素的，则 append 是追加子元素；如果不不能包含的两者意思差不多
这两组组方法，都可以接收可变参数，支持多个元素同时增加
function appendText(){
var txt1="<p>文本1。</p>"; // 使用 HTML 标签创建文本
var txt2=$("<p></p>").text("文本2。"); // 使用 jQuery 创建文本
var txt3=document.createElement("p");
txt3.innerHTML="文本3。"; // 使用 DOM 创建文本 text with DOM
$("body").append(txt1,txt2,txt3); // 追加新元素
}

remove -- 包含自身和子元素都删除 | empty -- 只清空子元素 -- 替代了JS的removeChild 等方法
如果选择器选中的元素很多是个列表，则 remove 方法可以通过参数来过滤（同样是选择），比如 id，class

III、样式操作
addClass -- 增加，可以批量增加，空格分隔 | removeClass -- 删除 | toggleClass -- 替代了JS的className
css() -- 不带参数是获取；可以指定 key - value 两个参数；也可以是多个key-value参数的对象 -- 替代了JS的style属性
除了通过 css 来设置尺寸外，jQuery 提供了 6组方法来获取设置尺寸，好处是避免了同css 盒子模型逐个去设置和计算

4、事件

基本覆盖了 JS的几大事件种类键盘、鼠标、浏览器、表单；在JS的事件基础上去掉 on，比如onclick 编程click
I、常用事件
$(document).ready
$("p").click / dbclick
mouseenter/mouseover/mousemove/mouseleave/mousedown/mouseup
hover(= mouseenter + mouseleave)
focus/blur/change/select/submit
scorll

jQuery的事件基本都是基于 DOM level2 的；所以，同一个click 可以编写、调用多次，相当于多次注册；
这些事件都是省略的事件;

II、实际中的事件模型有两种：冒泡和捕获；
冒泡：点击元素后，事件不断向上传递，直到 document IE标准
捕获：点击元素后，从父节点不断递归到，子元素其他标准
jQuery 因为要支持IE，默认使用了冒泡的事件传递模型；

on/bind(绑定方法）/live(并没有直接绑定,而是绑定到document,由document分发到指定选择元素)/delegate(和live方法类似，不过是绑定到唯一的父元素，然后再分发） -- on是最终方法，支持live和bind、delegate的所有功能
off/unbind/undelegate -- 与on 类似
$(selector).on(event,childSelector,data,function,map)
$(document).ready(function(){
$("p").on({
mouseover:function(){$("body").css("background-color","lightgray");},
mouseout:function(){$("body").css("background-color","lightblue");},
click:function(){$("body").css("background-color","yellow");}
});
});
通过on可以注册多个事件，可以指定子选择器派发事件，还可以在事件基础上绑定数据

如何选择通用事件模型 on 还是常用的简化事件？
a、如果能唯一选择到一个元素、事件是单一的，那就使用简化事件、处理很清晰。
b、如果选择了多个元素使用相同的事件（比如多个button响应相同的事件）、或者有多个类似事件不同元素可以派发，使用简化事件需要逐个事件调用addEventListerner(handler)，效率非常低；使用通用事件模型
c、还有几种情况，新增元素（还未插入），绑定事件；特别是自定义事件

冒泡的副作用及解决？
如果绑定了上层元素的一个事件，但底层元素相同事件发生时，会冒泡到上层，结果上层触发了该事件；比如mouseout事件，jQuery在处理时，对事件进行了判断，通过event.realtedTarget 进行判断，只有真的移出注册的元素，才执行事件。具体可以参见 JS 总结的target部分。mouseenter和mouseleave替换 mouseover和mouseout

III、自定义事件
这个事件模型最大的作用就是可以自定义事件，这样用户可以在控件开发时，极大丰富了模型
$().trigger 触发事件
$(document).ready(function(){
$("p").on("myOwnEvent", function(event, showName){
$(this).text(showName + "! What a beautiful name!").show();
});
$("button").click(function(){
$("p").trigger("myOwnEvent",["Anja"]);
});
});

5、动画效果

基本所有的动画效果，都提供无参的默认操作；有参的 (speed ,callback) 操作，可以在样式后执行回调；speed可以是毫秒，也可以是 slow/fast/normal 等描述
I、隐藏/显示
hide / show / toggle

II、淡入/淡出
fadeIn / fadeOut / fadeToggle / fadeTo - 固定渐变透明度

III、滑动
slideDown / slideUp / slideToggle

IV、动画 - 自定义效果
动画效果，完全是基于 CSS3 的动画功能来设置;从当前状态过渡到一个新的位置
$(selector).animate({params},speed,callback);
默认情况下，所有 HTML 元素都有一个静态位置，且无法移动。如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！

虽然，annimate 可以操作所有 CSS 属性，不过不支持 - 分隔符：当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等

jQuery 还可以把多个动画排在队列中，按顺序执行
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});

V、停止
$().stop(stopAll, goToEnd)
stop方法可以停止该元素的一些动画效果（淡入淡出、滑动、自定义动画）
stopAll 参数，是如果有队列停止所有队列中的动画
goToEnd 参数，当前动画是否立即万恒

VI、chaing技术（就是把多个方法串联起来执行、JS、Scala很多都可以）
$("#p1").css("color","red").slideUp(2000).slideDown(2000);

实现逻辑并不复杂，应该是每个方法返回值就是 this 这个元素本身，所以可以逐级调用；PS：注意如果是不带参数，获取值的方法，估计就不能使用了

6、Ajax

I、基线方法 $.ajax(); -- 可以发送任何HTTP请求
$.ajax({
url:
cache:
dataType:
success: function(xml){
}
});

II、其他常用方法
($.) get/getJSON/getScript/post/load
-- 返回一些特定类型数据，这些可以通过 ajax 方法之后处理实现

III、附带方法
$.param - 提供 URL 查询字符串(index.htm?id=1) 这种查询串
$.ajaxComplete / $.ajaxError / $.ajaxSend / $.ajaxStart / $.ajaxStop / $.ajaxSuccess 都是ajax发送、运行时、执行的回调通过，通过这些方法，把回调函数绑定到某个阶段

7、工具函数

II、字符串和数字操作
$.isNumberic | $.parseHTML | $.parseJSON | $.parseXML | $.trim

III、Dom相关
$.contains 判断一个元素是否是另一个元素的后代 | $.data 元素绑定的数据 | $.hasData

IV、插件编写
$.fn.extend -- 为jQuery框架编写新的方法(插件）
$(function () {
$.fn.extend({
check: function() {
return this.each(function() {
this.checked = true;
});
},
uncheck: function() {
return this.each(function() {
this.checked = false;
});
}
});
// 使用新创建的.check() 方法
$( "input[type='checkbox']" ).check();
})

V、杂项
$.conflict -- 关键字切换
$.now() -- 当前时间
$.noop -- 空函数，可以提供一些需要回调函数的方法使用

airpor

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery 精华一页纸

1、选择器 $() -- 基于 CSS + XPath 的选择器语法I、基本选择器元素 | ID | Class - 替代JS的3种 getElement;可以有多层$("div p #id") -- div 元素子元素为pII、属性选择器$("[属性]")属性选择器支持属性 | 判断属性值 = != | 属性值 | ^ $ 开头和结尾 | 包含 *=
复制链接

扫一扫

专栏目录