jQuery
jQuery 是一个轻量级的 JS 库, 是一个被封装好的 JS 文件, 提供了更为简便的元素操作方式, jQuery 封装了 DOM.
使用 jQuery
引入 jQuery 文件
<scrtipt src='jquery-1.11.3.js'> </script>
注意: 引入必须放在其他 jQuery 操作之前.
jQuery 对象
jQuery 对象是由 jQuery 对页面元素进行封装后的一种体现
jQuery 中所提供的所有操作都只针对 jQuery 对象, 其他对象 (DOM) 无法使用
工厂函数 -- $()
想要获取 jQuery 对象, 则必须使用工厂函数 $()
在 $()中允许传递一个选择器 / DOM 对象作为参数,$()能够将选择器和 DOM 对象全部封装成 jQuery 对象再进行返回
例子:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>jQuery 演示</title>
- </head>
- <body>
- <div id="main">
- id 是 mian 的 div 元素
- </div>
- <button onclick="bClick()">获取元素</button>
- <script src="jquery-1.11.3.js"></script>
- <script>
- function bClick() {
- // 通过 jquery 选择器获取 id='main'的元素
- var m = $("#main");
- // 设置元素的内容
- m.html('动态设置的值');
- console.log(m)
- }
- </script>
- </body>
- </html>
DOM 对象和 jQuery 对象之间的转换
DOM 对象不能使用 jQuery 提供的操作, 反之同样.
1, 将 DOM 对象转换为 jQuery 对象
语法: var 变量 = $(DOM 对象);
注意: 所有的 jQuery 对象在起名的时候, 最好在变量前加 $, 主要用于和 DOM 对象的区分
例:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- </head>
- <body>
- <div id="main">
- 这是 div 元素
- </div>
- <button onclick="bClick()">DOM - jQuery</button>
- <script src="jquery-1.11.3.js"></script>
- <script>
- function bClick() {
- // 通过 DOM 的操作, 得到 id 为 main 的元素
- var main = document.getElementById('main');
- // 再将其转换为 jQuery 对象
- var $main = $(main);
- $main.html('转换为 JQ 对象成功!')
- }
- </script>
- </body>
- </html>
2, 将 jquery 对象转换为 DOM 对象
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- </head>
- <body>
- <div id="main">
- 这是 div 元素
- </div>
- <button onclick="JQtoDom()">jQuery-DOM</button>
- <script src="jquery-1.11.3.js"></script>
- <script>
- function JQtoDom() {
- // 使用 jquery 得到 id 为 main 的元素
- var $main = $("#main");
- // 再将其转换为 DOM 对象
- // var m = $main[0];
- var m = $main.get(0);
- m.innerHTML = '转换为 DOM 对象成功!'
- }
- </script>
- </body>
- </html>
jQuery 选择器
作用
获取页面上的元素们, 返回值都是由 jQuery 对象所组成的数组
语法:$("选择器")
基本选择器
1,ID 选择器
$("#id");
返回: 返回页面中指定 ID 值的元素
2, 类选择器
$(".className")
返回: 页面中指定 className 的所有元素
3, 元素选择器
$("element")
返回: 页面中指定标记的所有元素
4, 群组选择器 / 复合选择器
$("selector1,selector2,...")
返回: 返回满足函数内所有选择器的函数们
层级选择器
1,$("selector1 selector2")
后代选择器
2,$("selector1>selector2")
子代选择器
3,$("selector1+selector2")
名称: 相邻兄弟选择器
作用: 匹配紧紧跟在 selector1 后面且满足 selector2 选择器的元素
例:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- </head>
- <body>
- <div id="main">
- <p id="p1">这是 id 为 p1 的元素</p>
- <p > 这是普通元素</p>
- <p > 这是普通元素</p>
- <p > 这是普通元素</p>
- <p > 这是普通元素</p>
- </div>
- <button onclick="bNB()">相邻兄弟选择器</button>
- <script src="jquery-1.11.3.js"></script>
- <script>
- function bNB() {
- $("#p1+p").CSS('background', 'yellow');
- }
- </script>
- </body>
- </html>
- 4,$("selector1~selector2")
名称: 通用兄弟选择器
作用: 匹配 selector1 后面所有满足 selector2 选择器的元素
例:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- </head>
- <body>
- <div id="main">
- <p id="p1">这是 id 为 p1 的元素</p>
- <p > 这是普通元素</p>
- <p > 这是普通元素</p>
- <p > 这是普通元素</p>
- <p > 这是普通元素</p>
- </div>
- <button onclick="bNB()">通用兄弟选择器</button>
- <script src="jquery-1.11.3.js"></script>
- <script>
- function bNB() {
- $("#p1~p").css('color', 'red');
- }
- </script>
- </body>
- </html>
基本过滤选择器
过滤选择器通常都会配合着其他的选择器一起使用
1,:first
只匹配一组元素中的第一个元素
- $("p:first")
- 2,:last
只匹配一组元素中的最后一个元素
3,:not("selector")
在一组元素中, 将满足 selector 选择器的元素排除出去
4,:odd
匹配 偶数行 元素(奇数下标)
5,:even
匹配 奇数行 元素(偶数下标)
6,:eq(index) -- equals
匹配 下标等于 index 的元素
7,:gt(index)
匹配 下标大于 index 的元素
8,:lt(index)
匹配 下标小于 index 的元素
属性过滤选择器
依托于 html 元素的属性来进行元素过滤的
1,[attribute]
作用: 匹配包含指定属性的元素
ex:
div[id]: 匹配具备 id 属性的 div 元素
2,[attribute=value]
作用: 匹配 attribute 属性值为 value 的元素
- ex:
- input[type=text]
- input[type=password]
- 3,[attribute!=value]
作用: 匹配 attribute 属性值不是 value 的元素
4,[attribute^=value]
作用: 匹配 attribute 属性值是以 value 字符开头的元素
- ex:
- p[class^=col]
- 5,[attribute$=value]
作用: 匹配 attribute 属性值是以 value 字符结尾的元素
6,[attribute*=value]
作用: 匹配 attribute 属性值中包含 value 字符的元素
子元素过滤选择器
1,:first-child
匹配属于其父元素中的首个子元素
2,:last-child
匹配属于其父元素中的最后一个子元素
3,:nth-child(n)
匹配属于其父元素中第 n 个子元素
4,jQuery 操作 DOM
基本操作
1,html()
作用: 获取 或 设置 jQuery 对象中的 html 内容
- ex:
- console.log($("#main").html());
- $("#main").html("");
- 2,text()
作用: 获取 或 设置 jQuery 对象中的 text 内容
3,val()
作用: 获取 或 设置 jQuery 对象中的 value 值(表单控件)
4, 属性操作
attr()
作用: 读取 或 设置 jQuery 对象的属性值
- ex:
- $obj.attr("id");
获取 $obj 的 id 属性值
$obj.attr("id","main");
设置 $obj 对象的 id 属性值为 main
removeAttr("attrName")
删除 jQuery 对象的 attrName 属性
- ex:
- $obj.removeAttr("class");
2, 样式操作
- 1,attr()
- $obj.attr("class","redBack");
- 2,addClass("className")
作用: 将 className 添加到元素的 class 值之后
- ex:
- $obj = $obj.addClass("c1");
- $obj = $obj.addClass("c2");
连缀调用:
- $obj.addClass("c1").addClass("c2");
- 3,removeClass("className")
如果无参的话, 则清空类选择器
如果有参数的话, 则删除对应的类选择器
- ex:
- $obj.removeClass("c1")
将 c1 类选择器从 $obj 移除出去
$obj.removeClass()
清空 $obj 的所有类选择器
4,toggleClass("className")
切换样式:
元素如果具备 className 选择器, 则删除
元素如果没有 className 选择器, 则添加
- 5,css("属性名")
- $obj.css("width");
获取 $obj 对象的 width 属性值
- 6,css("属性名","属性值")
- $obj.css("background-color","yellow");
设置 $obj 对象的 background-color 的属性值为 yellow
7,css(JSON 对象)
JSON 对象:
是一种约束了格式的对象表现形式
JSON:JavaScript Object Notation
JSON 对象的表示方式:
1,JSON 对象必须使用 {} 括起来
2, 使用键值对的方式来声明数据(表示属性和值)
3, 所有的属性在使用时必须使用 ""括起来, 值如果是字符串的话, 也必须使用"" 括起来
4, 属性和值之间使用: 连接
5, 多对属性和值之间使用 , 隔开
- ex:
- $obj.css({
- "color":"red",
- "font-size":"32px",
- "float":"left"
- });
遍历节点
1,children() / children("selector")
获取某 jQuery 对象的所有子元素 或 带有指定选择器的子元素
注意: 只考虑子代元素, 不考虑后代元素
2,next() / next("selector")
获取某 jQuery 对象的下一个兄弟元素 / 满足 selector 的下一个兄弟元素
3,prev() / prev("selector")
获取某 jQuery 对象的上一个兄弟元素 / 满足 selector 的上一个兄弟元素
4,siblings() / siblings(selector)
获取某 jQuery 对象的所有兄弟元素 / 满足 selector 的所有兄弟元素
5,find("selector")
查找满足 selector 选择器的所有后代元素
6,parent()
查找某 jQuery 对象的父元素
创建对象
语法:$("创建的标记")
ex:
1, 创建一对 div
- var $div = $("<div></div>");
- $div.html("动态创建的 div");
- $div.attr("id","container")
- $div.css("color","red");
2, 创建一对 div
var $div = $("<div id='container'style='color:red;'>动态创建的 div</div>");
插入元素
作用: 将创建好的元素插入到网页中
1, 内部插入
作为元素的子元素插入到网页中
$obj.append($new);
将 $new 元素插入到 $obj 元素中的最后一个子元素位置处(追加)
$obj.prepend($new);
将 $new 元素插入到 $obj 元素中的第一个子元素位置处
2, 外部插入
作为元素的兄弟元素插入到网页中
$obj.after($new);
将 $new 元素作为 $obj 的下一个兄弟元素插入进来
$obj.before($new);
将 $new 元素作为 $obj 的上一个兄弟元素插入进来
删除元素
$obj.remove();
将 $obj 元素删除出去
jQuery 中的事件处理
1, 页面加载后的执行
类似于 window.onload 但不同于 window.onload
jQuery 加载后执行的特点:
在 DOM 树加载完毕的时候就开始执行
- $(document).ready( function(){
- // 页面的初始化操作
- //DOM 树加载完成后就开始运行
- } );
- $().ready( function(){
- // 页面的初始化操作
- //DOM 树加载完成后就开始运行
- } );
- $( function(){
- // 页面的初始化操作
- //DOM 树加载完成后就开始运行
- } );
2,jQuery 的事件绑定
方式 1
- $obj.bind("事件名称", 事件处理函数);
- ex:
- $obj.bind("click",function(){
- // 事件的行为操作
- console.log("... ....");
- });
方式 2
$obj. 事件名称(function(){
- // 事件处理函数
- });
- ex:
- $obj.click(function(){
- // 通过 this 来表示触发该事件的 DOM 对象
- });
3, 事件对象 - event
在绑定事件的时候, 允许传递 event 参数来表示事件对象
- $obj.bind("click",function(event){
- //event 表示当前事件的事件对象
- });
- $obj.click(function(event){
- //event 表示当前事件的事件对象
- });
event 的使用方式与原生 JS 事件中的 event 使用方式一致.
event.stopPropagation() : 阻止事件冒泡
- event.offsetX:
- event.offsetY:
event.target: 获取事件源
jQuery 动画
1, 基本显示 / 隐藏
语法:
- $obj.show() / $obj.show(执行时间)
- $obj.hide() / $obj.hide(执行时间)
2, 滑动式显示 / 隐藏
语法:
显示:$obj.slideDown() / $obj.slideDown(执行时间)
隐藏:$obj.slideUp() / $obj.slideUp(执行时间)
3, 淡入淡出式显示 / 隐藏
语法:
显示:$obj.fadeIn() / $obj.fadeIn(执行时间)
隐藏:$obj.fadeOut() / $obj.fadeOut(执行时间)
来源: https://www.cnblogs.com/hxgoto/p/9411444.html