1、jquery 选择器
含义 | |
---|---|
$(“p”) | 选取<p> 元素 |
$(“p.info”) | 选取 class="info"的<p> 元素 |
$(“p#info”) | 选取 id="info"的<p> 元素 |
$("[href]") | 选取带有 href 属性的元素 |
$("[href=’#’]") | 选取 href=’#'的元素 |
$("[href!=’#’]") | 选取带有 href 属性,但属性值不等于’#'的元素 |
( " [ h r e f ("[href ("[href=’,jpg’]") | 选取带有 href 属性,且属性值以’.jpg’结尾 |
$(this) | 当前 html 元素 |
$(“ul li:first”) | 每一个 ul 的第一个<li> 元素 |
$(“div#intro .head”) | id='intro’且 class='head’的<div> 元素 |
2、名称冲突
var jq=jQuery.noConflict() //使用自己的名称(比如 jq)来代替 $ 符号。
3、事件处理函数
$(document).ready(function(){
});
4、jQuery 效果
效果 | 方法 | 语法 | 备注 |
---|---|---|---|
隐藏 | hide() | $(selector).hide(speed,callback); | speed:slow,fast 或毫秒 |
显示 | show() | $(selector).show(speed,callback); | |
隐藏/显示 | toggle() | $(selector).toggle(speed,callback); | |
淡入 | fadeIn() | $(selector).fadeIn(speed,callback); | |
淡出 | fadeOut() | $(selector).fadeOut(speed,callback); | |
淡入/淡出 | fadeToggle() | $(selector).fadeToggle(speed,callback); | |
淡入/淡出 | fadeTo() | $(selector).fadeTo(speed,opacity,callback); | opacity:为给定的不透明度,0~1 之间 |
下滑 | slideDown() | $(selector).slideDown(speed,callback); | |
上滑 | slideUp() | $(selector).slideUp(speed,callback); | |
滑动 | slideToggle() | $(selector).slideToggle(speed,callback); | |
动画 | animate() | $(selector).animate({params},speed,callback); | 1、色彩动画并不包含在核心 jQuery 库中 2、Camel 标记法书写所有的属性名 3、可以把属性的动画值设置为 “show”、“hide” 或 “toggle” |
停止动画 | stop() | $(selector).stop(stopAll,goToEnd); | 1、可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。2、可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。 |
5、jQuery Html
jQuery DOM 操作–Document Object Model(文本对象模型)
1)、获得和设置内容
text() - 设置或返回所选的元素的文本内容
html() - 设置或返回所选元素的内容(包括html元素)
val() - 设置或返回表单字段的值
2)、获得和设置属性
attr() - 获取和设置属性值
3)、添加
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入元素
before() - 在被选元素之前插入元素
4)、删除
remove([param]) - 删除被选的元素(及其子元素),param可以是任意jQuery选择器
empty() - 删除被选元素的子元素
5)、获取并设置 CSS 类
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性
6)、尺寸
width() - 设置或返回元素的宽度(不包括内边距、边框或外边距)
height() - 设置或返回元素的高度(不包括内边距、边框或外边距)
innerWidth() - 返回元素的宽度(包括内边距)
innerHeight() - 返回元素的高度(包括内边距)
outerWidth() - 返回元素的宽度(包括内边距和边框)
outerHeight() - 返回元素的高度(包括内边距和边框)
$(document).height() // 文档的高度
$(window).width() // 窗口宽度和高度
$(selector).width(500).height(500); //设置元素的宽和高
6、jQuery 遍历
祖先:
parent() 方法返回被选元素的直接父元素
parents() 方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>)
parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素
后代:
children()方法返回被选元素的所有直接子元素
find() 方法返回被选元素的后代元素,一路向下直到最后一个后代
同胞:
siblings() 方法返回被选元素的所有同胞元素
next() 方法返回被选元素的下一个同胞元素
nextAll() 方法返回被选元素的所有跟随的同胞元素
nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素
prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似,只不过方向相反而已:它们返回的是前面的同胞元素(在 DOM 树中沿着同胞元素向后遍历,而不是向前)
7、遍历–过滤
first() 方法返回被选元素的首个元素
last() 方法返回被选元素的最后一个元素
eq() 方法返回被选元素中带有指定索引号的元素
filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回
not() 方法返回不匹配标准的所有元素
8、AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML)
load()方法
$(selector).load(URL,data,callback)
必需的 URL 参数规定您希望加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。
可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数:
responseTxt - 包含调用成功时的结果内容
statusTXT - 包含调用的状态
xhr - 包含 XMLHttpRequest 对象
get()方法和post()方法
GET - 从指定的资源请求数据
POST - 向指定的资源提交要处理的数据
$.get(URL,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 callback 参数是请求成功后所执行的函数名。
$.post(URL,data,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 data 参数规定连同请求发送的数据。
可选的 callback 参数是请求成功后所执行的函数名。
参考手册:https://www.w3school.com.cn/jquery/jquery_reference.asp