jQuery

最新推荐文章于 2024-07-04 12:16:35 发布

首席撩妹指导官

最新推荐文章于 2024-07-04 12:16:35 发布

阅读量779

点赞数 1

分类专栏： HTML 文章标签： jquery

本文链接：https://blog.csdn.net/qq_36864672/article/details/78109905

版权

HTML 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

⼀、jQuery的使用

1. jQuery: jQuery 是1个 JavaScript 库。
jQuery 极大地简化了 JavaScript 编程。

2. jQuery的使用步骤：
2.1.引入jQuer文件
<script src="jquery-1.11.3.js"></script>
2.2.使用选择器定位元素
CSS的选择器 #id .class element ...
getElementById() -> $("#id")
getElementsByTagName() -> $("element")
getElementsByClassName() -> $(".class")
2.3.使用API方法完成需求
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
［示例］jQuery的使用案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function(){
$('p').click(function(){
$(this).hide();
})
})
</script>
</head>
<body>

<p>

jQuery选择器

选择器九大分类：
基本选择器
层级选择器
表单选择器
过滤选择器
基本过滤选择器
内容过滤选择器
可见性过滤选择器
属性过滤选择器
子元素过滤选择器
表单对象属性过滤选择器

1.基本选择器
#id
.class
element
＊（匹配所有元素( body内所有)）
selector1,selector2,…
多个选择器并列使用,用","隔开
多个选择器并列使用的结果是"并集"
2.层级选择器
selector1 空格 selector2:祖先与后代
selector1 > selector2:父子
selector1 + selector2:下一个紧邻兄弟
selector1 ~ selector2:指定元素后面所有兄弟元素

3.过滤选择器
所有的过滤选择器,在该选择器之前增加":"
3.1 基本过滤选择器
:first - 第一个
:last - 最后一个
:not(selector) - 不包含什么
:even - 索引值为偶数(0,2,4)
:odd - 索引值为奇数(1,3,5)
:eq(index) - 索引值等于多少
index表示索引值得角标从0开始。
:gt(index) - 索引值大于多少
:lt(index) - 索引值小于多少
:header - 专门匹配所有标题(h1 ~ h6)元素
:animated - 专门正在执行动画效果的元素
能匹配到jQuery本身完成的动画效果

3.2.内容过滤选择器
:contains(文本内容) - 通过包含文本内容定位元素
:empty - 表示的是空元素(不包含子元素和文本)
:parent - 表示包含子元素或文本元素
:has() - 查找包含指定元素的元素
$(“div:contains(‘one’)”) 文本中包涵有id为one的 div。
$(“div:empty”) 没有有子元素和文本的 div。
$(“div:parent”) 有子元素和文本的 div。
$(“div:has(‘.mini’)”) 含有mini元素的 div。
3.3. 可见性过滤选择器
:hidden - 隐藏
:visible - 可见

3.4.属性过滤选择器
[attribute] $(“div[title]”) 具有title属性的div
[attribute=value] $(“div[title=test]”) title等于test的div
[attribute^=value] $(“div[title^=te]”) title以te开头的div
[attribute$=value] $(“div[title$=st]”) title以st结束的div
[attribute*=value] $(“div[title*=es]”) title有es的div
[attribute!=value] $(“div[title!=test]”) title不等于test的div
[selector1][selector2][selectorN] $(“div[id][title=test]”) 具有id的div并且title 等于test
组合属性过滤选择器:交集

3.5.子元素过滤选择器
子元素: nth-child(index) 选择父元素下的index个子元素，index是从1开始
子元素 : first-child 选择父元素下的第1个子元素
子元素: last-child 选择父元素下的最后1个子元素
子元素: only-child 选择父元素下的只有1个子元素

3.6.表单对象属性过滤选择器
:enabled - 可用的
:disabled - 不可用的
:selected - option标签被选中时
:checked - checkbox\radio被选中时

4.表单选择器
:input - 匹配<input> <textarea> <select> <button> 元素
:text - 匹配单文本框
:password - 匹配所有密码框
:radio - 匹配所有单选框按钮
:checkbox - 匹配所有复选框按钮
:submit - 匹配所有提交按钮
:image - 匹配所有图像域
:reset - 匹配所有重置按钮
:button - 匹配所有按钮
:file - 匹配所有文件域
:hidden - 匹配所有不可见元素（display：none），或者type为hidden 的元素

回顾⼀下原⽣DOM操作：
查找节点
getElementById
getElementsByName
getElementsByTagName
getElementsByClassName
querySelector
querySelectorAll
创建节点
createElement
createTextNode
createAttributeNode
插入节点
appendChild
insertBefore
删除节点
removeChild
遍历节点
parentNode
childNodes
firstChild
lastChild
nextSibling
previousSibling
遍历元素
parentElement
children
firstElementChild
lastElementChild
其它属性
innerHTML
textContent\innerText

1.查询
1.1. html() - 相当于DOM的innerHTML属性
设置：只要是匹配的元素，都会被设置为指定内容
获取：如果匹配是多个的话，只返回第⼀个匹配的元素
1.2. text() - 相当于DOM的textContent属性
该⽅法已经解决浏览器的兼容问题
设置：只要是匹配的元素，都会被设置为指定内容
获取：如果匹配是多个的话，全部返回
1.3. attr() - 相当于DOM的setAttribute和getAttribute
attr(name)：表示是获取指定name的属性值
attr(name, value)：表示是设置指定名为name属性的value值
1.4. removeAttr() - 相当于DOM中的removeAttribute()
1.5. val() - 相当于DOM的value属性
注意：value属性本身就是HTML通用属性中相对比较特殊的一个，有一些HTML标签，即使是定
义value 属性：不一定能得到。
获取：表示获取指定元素的value属性值
设置：表示设置指定元素的value属性值

2. 样式操作：
2.1. attr(“class”,className) 获取和设置
2.2. addClass(“”) 追加样式
2.3. removeClass() 默认情况下，删除所有样式
removeClass(“className”) 传递className参数，删除指定样式
2.4. toggleClass(“”)
只能接受一个参数(指定一个样式名称)
是在没有样式与指定样式之间进⾏切换
2.5. hasClass(“”)
判断当前元素是否含有指定样式
结果值：true false
2.6. css(“propertyname”,”value");
css({"propertyname":"value","propertyname":"value",...});
propertyname：CSS的属性名
value：CSS的属性值
css(“”) 读取css的值
css(“”，“”)设置多个样式

3.遍历节点 selector：选择器
父节点
parent() 方法返回被选元素的直接父元素。
parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)
parentsUntil(selector) 方法返回介于两个给定元素之间的所有祖先元素
子节点
children()/ children( selector) 方法返回被选元素的所有直接子元素
find(selector)方法 - 返回被选元素的后代元素，一路向下直到最后一个后代
兄弟节点
next() 方法返回被选元素的下一个同胞元素
nextAll() 方法返回被选元素的所有跟随的同胞元素
nextUntil(selector) 方法返回介于两个给定参数之间的所有跟随的同胞元素
prev() , prevAll() 以及 prevUntil(selector) 方法的工作方式与上面的方法类似，只不过方向
相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞元素向后遍历，而不
是向前
siblings() /siblings( selector) 方法返回被选元素的所有同胞元素

4.创建节点
元素节点 - $(HTML代码)
可以使用这种方式将元素节点、文本节点及属性节点同时创建
文本节点 - text()
属性节点 - attr()
5.删除节点
empty() - 删除指定元素的所有后代元素(保留自身)
remove() - 删除指定元素的所有元素(自身和后代)

6.插入节点
append()在被选元素的结尾插入内容（1.插入新节点 2.插入原有节点 - 移动）
prepend()在被选元素的开头插入内容
before()在被选元素之前插入内容
after()在被选元素之后插入内容
了解
appendTo() - 颠倒的append() prependTo() - 颠倒的prepend()
binsertBefore()- 颠倒的before() insertAfter()- 颠倒的 after()
$(“#game”).append($(“#city>li:first”));
$(“#city>li:first”).appendTo( $(“#game”)); 把$(“#city>li:first”)插入到#game

7.替换节点
replaceWith()将所有匹配元素替换成指定的元素
replaceAll() - 就是颠倒了的replaceWith()
$(“#game”).replaceWith($(“#city>li:first”)); 用$(“#city>li:first”)替换#game

1. window.onload与$(document).ready()的区别？(面试题)
window.onload
必须等待HTML页面的所有内容都加载完毕
一个HTML页面中只能存在一个window.onload
没有简写
$(document).ready(function(){})
只需要等待HTML页面的DOM相关内容加载完毕
一个HTML页面中允许存在多个ready()
简写：
$().ready(function(){})
(开发常用)$(function(){})
2.概念：
jQuery使用$()工厂函数，具有一个全局对象$
除了jQuery以外，还有很多js库都具有$这种约束
与多个不同的其他库共存
问题：在jQuery的代码中，不能再使用$符？为jQuery对象自定义一个新的符号(简称)？
解决：使用 $.noConflict()方法，将$符的使用权移交给其他js库

3.事件处理
3.1. bind(type, [data], fn) - 事件绑定
type：表示绑定的事件名称
data：表示向绑定的事件的处理函数传递的数据
fn：表示绑定的事件的处理函数
绑定事件的名称
blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown,
mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select,
submit, keydown, keypress, keyup, error
特点：
是通用的事件方法(几乎所有事件bind()可实现的)
既可以绑定单一事件，还可以绑定多个事件
灵活的绑定任何事件
3.2. unbind() - 事件解绑
默认调用时，解绑所有已绑定的事件
传递type参数时，解绑指定的已绑定的事件

3.3. jQuery的事件实现方式
$().click() - 事件绑定简写法最常使用
$().bind("click") - 事件绑定方法最重要
$().trigger("click")- 事件模拟方法很少使用用于在每个匹配元素上触发指定类型的事件
3.4. 事件冒泡
e.stopPropagation() 可以取消事件冒泡
3.5. 事件对象
在处理程序中使用事件对象，需要为函数增加一个参数
$(“obj”).click(function(event){
})
srcElement/target :事件源对象
clientX/offsetX/pageX/screenX: 事件发生的X坐标
clientY/offsetY/pageY/screenY: 事件发生的Y 坐标
cancelBubble: 是否取消事件冒泡

jQuery 动画效果

1.显示与隐藏
show(speed,callback) 默认情况下,⽆动画效果 - 显示
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒
可选的 callback 参数是 fading 完成后所执⾏的函数名称
hide(speed,callback) 隐藏
toggle(speed,callback) 方法来切换 hide() 和 show() 方法
2.滑动式动画效果
slideDown(speed,callback) 方法用于向下滑动元素，从无到有的过程
slideUp(speed,callback) 方法用于向上滑动元素，从有到无的过程
slideToggle(speed,callback) 方法可以在 slideDown() 与 slideUp() 方法之间进行切换
注意：不具有无参的方法
3.淡入淡出动画效果
fadeIn(speed,callback)淡入
fadeOut(speed,callback)淡出
fadeToggle(speed,callback) 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换
fadeTo(speed,opacity,callback) 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）
opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）

4.停止动画
stop(stopAll,goToEnd) 方法用于停止动画或效果，在它们完成之前
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，
允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false 。

5.自定义动画
animate({params}, options,callback) 方法用于创建自定义动画
params : 必需的 params 参数定义形成动画的 CSS 属性，允许接受多个设置参数
{ key : value }
options : 选项
{ key : value }
duration : speed,表示动画执行的速度(时间)，"slow"、"fast" 或毫秒
easing : 默认”swing"(擦除)，"linear"
queue : 默认为true（排队）,为false表示此动画不进入动画队列
callback 参数是动画完成后所执⾏的函数名称
您甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle" , height: "toggle"

、jQuery 插件

1.概念
基于jQuery提供一些扩展功能(jQuery本身没有提供的)
jQuery插件：数量比较多(质量参差不齐) , 方便了
2.查找插件：
访问jQuery的官方网站 - 插件页(http://plugins.jquery.com)
百度一下
3. 插件的使用步骤：
在HTML页面中首先引入jQuery文件
<script src="jquery-1.11.3.js"></script>
在HTML页面中再去引入jQuery插件文件
<script src="My97DatePicker/WdatePicker.js"></script>
在HTML页面中使用jQuery插件提供的功能

4.日历插件
4.1. 使用步骤：
4.1.1. My97日期插件官方要求：
将解压缩后得到的“My97DatePicker”文件夹整体拷贝
“My97DatePicker”目录中的文件结构不能改变
下载地址：http://www.my97.net/
4.1.2. 在HTML页面中：
引入jQuery文件
<script src="jquery-1.11.3.js"></script>
引入WdatePicker文件 ,只需要一个文件，css文件会自动引入
<script src="My97DatePicker/WdatePicker.js"></script>
4.1.3. 如何使用：
创建<input>元素，type指定为text
定义class属性值为Wdate(用于显示日期控件的样式)
绑定事件(click或focus)
事件的处理函数中调用WdatePicker()方法

4.3. 事件
onpicking：选择时期时，激发的事件
onpicked ：选择时期后，激发的事件
onclaering：清除已选时期时，激发的事件（可以配合清空按钮使用）
oncleared：清除已选时期后，激发的事件（可以配合清空按钮使用）

5.表单验证插件(使用方法同上)
使用jQuery方式自定义完成表单验证，都要比原生DOM操作表单验证简便
常用验证插件 formValidator
jQuery.validator
easyForm
5.1. 使用步骤(formValidator)：
5.1.1.下载所需要的文件
5.1.2.引入文件

<script src="../jquery-1.11.3.js"></script>

<script src="formValidator-4.0.1.js"></script>

<script src="formValidatorRegex.js"></script>

<link type="text/css" rel="stylesheet" href=“css/validator.css"></link>
5.1.3.查看demo 文档，学习应用，demo.html

首席撩妹指导官

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery

⼀、jQuery的使用1. jQuery: jQuery 是一个 JavaScript 库。jQuery 极⼤地简化了 JavaScript 编程。2. jQuery的使用步骤：2.1.引入jQuery文件2.2.使用选择器定位元素CSS的选择器 #id .class element ...getElementById() -> $("#id")getEle
复制链接

扫一扫

专栏目录