jQuery 就是一个由 JavaScript 编写的轻量库, 简单的说就是封装了一些 JavaScript 的操作, 所以使用 jQuery 比使用原生的 JavaScript 可以达到用更少的代码做更多的事的效果.
一, 初识 jQuery:
1, 使用方法:
去官网 http://jquery.com/download / 下载 jQuery 的包, 然后放到项目中存放 JS 代码的目录下, 最后在需要用 jQuery 的 HTML 中用 < script type="text/javascript" src="js 目录 / jquery.js"></script > 引入即可.
2,jQuery 对象与 DOM 对象:
jQuery 对象与 DOM 对象是不一样的, 看下面例子:
需求: 我们要获取页面上这个 id 为 test 的 p 元素, 然后给这个文本节点增加一段文字:"hello world", 并且让文字颜色变成红色.
- <p id="test">
- </p>
- <!-- 用原生 JavaScript 的做法 -->
- var p = document.getElementById('test'); p.innerHTML = 'hello world';
- p.style.color = 'red';
- <!-- 通过 jQuery 操作 -->
- var $p = $('#test'); $p.HTML('hello world').CSS('color','red');
用 JavaScript 操作是过取到 DOM 对象, 再进行操作, 而 jQuery 获取到的 $p 是 jQuery 对象.
jQuery 对象与 DOM 对象的转换:
- <div>
- 元素一
- </div>
- <div>
- 元素二
- </div>
- <div>
- 元素三
- </div>
- var $div = $('div') //jQuery 对象 var div = $div[0] // 转化成 DOM 对象 var div
- = $div.get(0) // 通过 get 方法, 转化成 DOM 对象 var div = document.getElementsByTagName('div');
- //dom 对象 var $div = $(div); //jQuery 对象 var $first = $div.first(); // 找到第一个
- div 元素
二, jQuery 选择器:
1,id 选择器 $( "#id" ):
所谓 id 选择器, 就是相当于 JavaScript 的 getElementById() 方法. 语法:$( "#id" ), 也就是说 #号后面跟上要操作的标签的 id 的值即可.
2, 类选择器 $( ".class" ):
就是通过标签的 class 属性来选择标签的选择器. 语法:$( ".class" ), 也就是 . 后面跟上标签的 class 的值即可.
3, 元素选择器 $( "element" ):
也就是直接通过标签名选择标签, 比如 $("p").CSS("border", "3px solid blue"); 就是通过 jQuery 的元素选择器选择到所有的 p 标签, 然后改变其样式.
4, 全选择器 $( "*" ):
顾名思义, 全选择器就是选择所有的标签.
5, 层级选择器:
一个页面就是由各种标签构成的, 各个标签之间存在着不同的关系, 父子关系, 兄弟关系等, 层级选择器就可以处理这种关系. 用法如下表:
选择器 | 描述 |
---|---|
$("parent > child") | 子选择器,选择所有指定 “parent” 元素中指定的 “child” 直接子元素 |
$("ancestor descendant") | 后代选择器,选择给定的祖先元素 “ancestor” 的所有 descendant 后代,包括儿子、孙子、曾孙等 |
$("prev + next") | 相邻兄弟选择器,选择紧 < br ztid="93" ow="0" oh="0">接在 “prev” 元素后的 “next” 元素 |
$("prev ~ siblings") | 一般兄弟选择器,与相邻兄弟选择器的区别是 < br ztid="97" ow="0" oh="0">,相邻的指挥选择相邻的,而这个是选所有。 |
6, 基本筛选选择器:
筛选选择器的用法与 CSS 中的伪元素相似, 选择器用冒号 ":" 开头, 通过一个列表, 看看基本筛选器的描述:
7, 内容筛选选择器:
基本筛选选择器针对的都是元素 DOM 节点, 如果我们要通过内容来过滤, jQuery 也提供了一组内容筛选选择器. 其描述如下:
8, 可见性筛选选择器:
元素有显示状态与隐藏状态, jQuery 根据元素的状态扩展了可见性筛选选择器: visible 与: hidden
选择器 | 描述 |
---|---|
$(":visible") | 选择所有显示的元素 |
$(":hidden") | 选择所有隐藏元素 |
9, 属性筛选选择器:
属性选择器让你可以基于属性来定位一个元素. 可以只指定该元素的某个属性, 这样所有使用该属性而不管它的值, 这个元素都将被定位, 也可以更加明确并定位在这些属性上使用特定值的元素, 这就是属性选择器展示它们的威力的地方.
10, 子元素筛选选择器:
这个不是很常用, 用法如下:
11, 表单元素选择器:
顾名思义, 表单元素选择器就是方便操作表单的选择器.
12, 表单对象属性筛选选择器:
除了表单元素选择器外, 表单对象属性筛选选择器也是专门针对表单元素的选择器, 可以附加在其他选择器的后面, 主要功能是对所选择的表单元素进行筛选.
13, 特殊选择器 this:
this, 表示当前的上下文对象是一个 HTML 对象, 可以调用 HTML 对象所拥有的属性和方法.
$(this), 代表的上下文对象是一个 jQuery 的上下文对象, 可以调用 jQuery 的方法和属性值. 直接看案例代码:
- $('p').click(function(){
- // 把 p 元素转化成 jQuery 的对象
- var $this= $(this)
- $this.CSS('color','red')
- })
三, jQuery 的属性与样式:
1,.attr() 与. removeAttr():
操作特性的 DOM 方法主要有 3 个, getAttribute 方法, setAttribute 方法和 removeAttribute 方法, 就算如此在实际操作中还是会存在很多问题, 这里先不说. 而在 jQuery 中用一个 attr() 与 removeAttr() 就可以全部搞定了, 包括兼容问题. 直接看案例来体会其用法:
- <form>
- <input type="text" value="设置 value" />
- <input type="text" value="获取 value"/>
- <input type="text" value="回调拼接 value" />
- <input type="text" value="删除 value" />
- </form>
- <script type="text/javascript">
- $("input:first").attr('value','测试')// 把 "设置 value" 改成 "测试"
- $("input:eq(1)").attr('value')// 获取第二个 input 的 value 属性的值
- // 把新的值与现有的值联系在一起:
- $("input:eq(2)").attr('value',function(i, val){// 拼接第三个 input 的 value 属性的值
- return '通过 function 设置' + val
- })
- $("input:eq(3)").removeAttr('value')// 删除第四个 input 的 value 属性的值
- </script>
运行结果如下图:
2,.HTML(),.text() 和. val():
读取, 修改元素的 HTML 结构或者元素的文本内容又或者操作表单字段 value 值是常见的 DOM 操作, jQuery 针对这样的处理提供了 3 个便捷的方法. HTML(),.text() 和. val().
.HTML() 的用法: 操作元素的 HTML 结构
语法:$("element").HTML(),$("element").HTML(htmlString),$("element").HTML(function(index,HTML){...})
案例:
- <div class="demo">
- <p> <a href="#">baidu</a></p>
- </div>
- <script type="text/javascript">
- // 第一种用法 (如果有多个 p 标签, 那么只能获取第一个 p 标签的内容)
- alert($(".demo p").HTML());// 会弹出 "<a href="#">baidu</a>"
- // 第二种用法 (如果有多个 p 标签, 那么每一个 p 标签都会加上 .HTML 方法里面的内容)
- ($(".demo p").HTML('<a href="#">taobao</a>'));
- // 结果会把 HTML 方法里面的 a 标签添加到 p 标签里面, p 标签里面就有两个 a 标签了
- // 第三种用法
- $(".demo p").HTML(function(index,oldHtml){
- return "我是第" + (index+1) + "个 p 标签:" + oldHtml;
- })
- // 结果就是 (假设已经执行了第二种用法中的演示代码):
- /*
- <p > 我是第 1 个 p 标签 < a href="#">baidu</a></p>
- <p > 我是第 2 个 p 标签 < a href="#">taobao</a></p>
- */
- </script>
.text() 的用法: 操作元素的纯文本内容
语法:$("element").text(),$("element").text(textString),$("element").text(function(index,text){...})
案例:
- <div class="demo">
- <p> <a href="#">baidu</a></p>
- </div>
- <script type="text/javascript">
- // 第一种用法 (如果有多个 p 标签, 那么其他 p 标签里的文本内容也能获取到)
- alert($(".demo p").text());// 会弹出 "baidu", 所以该方法只能获取纯文本内容
- // 第二种用法 (如果有多个 p 标签, 那么每一个 p 标签都会被替换成纯文本内容)
- ($(".demo p").text('<a href="#">taobao</a>'));
- // 结果会把 class 为 demo 的 div 下面的所有 p 标签替换成 text 方法里面的纯文本内容
- // 第三种用法
- $(".demo p").text(function(index,oldText){
- return "我是第" + (index+1) + "个 p 标签里面的文本:" + oldText;
- })
- // 结果就是:
- /*
- 我是第 1 个 p 标签里面的文本: baidu
- */
- </script>
.val() 的用法: 操作表单字段 value 值
语法:$("element").val(),$("element").val(value),$("element").val(function(index,value){...})
案例:
- <div id="test">
- <input type="radio" name="color" id ="rd1" value="red" /> 红色
- <input type="radio" name="color" id ="rd2" value="blue" /> 蓝色
- </div>
- <script type="text/javascript">
- // 第一种用法 (只会获取到第一个 input 的值, 跟有没有选中没关系)
- alert($("#test input:radio").val());// 弹出 "红色"
- // 第二种用法 (获取用户选中的值, 而不是返回第一个)
- alert($("input:radio[name=color]:checked").val());// 弹出用户选中的颜色
- // 第三种用法
- $("input").val("blank");// 会把所有 input 的 value 值替换成 blank
- // 第四种用法 (会依次获取 input 的 value 值)
- $("input:radio[name=color]").val(function(index,oldVal){
- return "color-"+(index+1)+":"+oldVal;
- })
- </script>
- 3,.addClass():
过动态改变类名 (class), 可以让其修改元素呈现出不同的效果. 直接看案例:
- <style>
- .firstClass{
- background: #bbffaa;
- }
- .secondClass{
- background: red;
- }
- </style>
- <div class="left">
- <div class="aaron">
- <p > 测试 1</p>
- </div>
- <div class="aaron">
- <p > 测试 2</p>
- </div>
- </div>
- <script type="text/javascript">
- $('.left div').addClass('firstClass')
- </script>
本来 "测试 1" 和 "测试 2" 都是没有颜色的, 下面的 JS 代码运行后, 就会给这两个 div 添加 "firstClass", 所以 "测试 1" 和 "测试 2" 背景就会变成红色. 还有删除 class 的 removeClass() 方法和切换 class 的 toggleClass() 方法, 用法类似.
4,.CSS():
在 jQuery 中我们要动态的修改 style 属性我们只要使用 CSS() 方法就可以实现了. 看案例:
- <div class="first"> 获取颜色 </div>
- <p></p>
- <script type="text/javascript">
- $('p:eq(0)').text( $('.first').CSS("background-color","red") )
- </script>
本来 "获取颜色" 这四个字是没有颜色的, 运行了 JS 代码后, 就会有红色的背景颜色. 添加样式还有. addClass() 方法, 它的优先级低于. CSS() 方法.
5, 元素的数据存储:
jQuery 提供的存储接口:
- jQuery.data( element, key, value ) // 静态接口, 存数据
- jQuery.data( element, key ) // 静态接口, 取数据
- .data( key, value ) // 实例接口, 存数据
- .data( key ) // 实例接口, 存数据
看到这些语法也是摸不着头脑, 直接看案例体会其用法:
- <h2>jQuery.data() 静态方法 </h2>
- <div class="left">
- <div class="aaron">
- <p > 点击看结果 </p>
- <p>jQuery.data</p>
- </div>
- <div><span></span></div>
- </div>
- <h2>.data() 实例方法 </h2>
- <div class="right">
- <div class="aaron">
- <p > 点击看结果 </p>
- <p>.data</p>
- </div>
- <div><span></span></div>
- </div>
- <script type="text/javascript">
- $('.left').click(function() {
- var ele = $(this);
- // 通过 $.data 方式设置数据
- $.data(ele, "a", "data test")
- $.data(ele, "b", {
- name : "简书"
- })
- // 通过 $.data 方式取出数据
- var reset = $.data(ele, "a") + "</br>" + $.data(ele, "b").name
- ele.find('span').append(reset)
- })
- </script>
- <script type="text/javascript">
- $('.right').click(function() {
- var ele = $(this);
- // 通过. data 方式设置数据
- ele.data("a", "data test")
- ele.data("b", {
- name: "简书"
- })
- // 通过. data 方式取出数据
- var reset = ele.data("a") + "</br>" + ele.data("b").name
- ele.find('span').append(reset)
- })
- </script>
没点击 "点击看结果" 的时候是这样的:
点击了 "点击看结果" 后是这样的:
也就是说, data 可以用来暂时存储数据, 然后还可以取出来.
四, DOM 操作:
1,jQuery 创建节点:
- var div = $("<div > 我是文本节点 </div>")
- $body.append(div)
这段代码就会在 HTML 的 body 中添加一个 div 节点, 并且内容是 "我是文本节点".
2, 内部插入的 append() 和 appendTo:
这两个方法都是向页面追加内容, 不同的是 append() 前面是被插入的对象, 后面是要在对象内插入的元素内容, 而 appendTo() 前面是要插入的元素内容, 而后面是被插入的对象. 具体用法如下:
- <div class="content"></div>
- <script type="text/javascript">
- //.append(), 内容在方法的后面,
- // 参数是将要插入的内容.
- $(".content").append('<div class="append"> 通过 append 方法添加的元素 </div>')
- //.appendTo() 刚好相反, 内容在方法前面,
- // 无论是一个选择器表达式 或创建作为标记上的标记
- // 它都将被插入到目标容器的末尾.
- $('<div class="appendTo"> 通过 appendTo 方法添加的元素 </div>').appendTo($(".content"))
- </script>
3, 外部插入的 after() 和 before():
上面的 append 和 appendTo 是插入到匹配元素的内部, 而这两个是插入到匹配元素的外部. 看下面代码:
- <div class="aaron">
- <p class="test1"> 测试 before</p>
- </div>
- <div class="aaron">
- <p class="test2"> 测试 after</p>
- </div>
- <script type="text/javascript">
- // 在匹配 test1 元素集合中的每个元素前面插入 p 元素
- $(".test1").before('<p style="color:red">before, 在匹配元素之前增加 </p>',
- '<p style="color:red"> 多参数 </p>')
- // 在匹配 test1 元素集合中的每个元素后面插入 p 元素
- $(".test2").after('<p style="color:blue">after, 在匹配元素之后增加 </p>',
- '<p style="color:blue"> 多参数 </p>')
- </script>
看运行结果:
通过上面的代码和运行结果就很容易理解什么是外部插入了. 类似的还有 prepend(),prependTo(),insertBefore(),insertAfter() 方法.
4,empty() 和 remove():
通过下面的代码理解 empty() 用法:
- <div class="hello">
- <p > 百度 </p>
- </div>
- // 通过 empty 处理
- $('.hello').empty()
- // 结果:<p > 百度 </p > 被移除
- <div class="hello"></div>
可以发现 empty 会清空选中的元素的内部结构.
通过下面的代码理解 remove() 用法:
- <div class="hello">
- <p > 百度 </p>
- </div>
- // 通过 remove 处理
- $('.hello').remove()
结果是整个 div 都被移除了, 且如果这个 div 绑定有事件, 使用 remove 方法会自动销毁这个事件. remove 还可以根据条件移除, 如下:
- div class="test2">
- <p>p 元素 3</p>
- <p>p 元素 4</p>
- </div>
- // 找到所有 p 元素中, 包含了 3 的元素
- $("p").remove(":contains('3')")
这样就只会移除 "p 元素 3","p 元素 4" 不会被移除. detach() 也是移除元素, 但是这个删除只是页面中不可见, 这个节点还是保存在内存中.
5, 克隆节点 clone():
克隆可以理解为复制, 用法如下:
- //clone 处理一
- $("div").clone() // 只克隆了 div 结构, 事件丢失
- //clone 处理二
- $("div").clone(true) //div 结构, div 绑定的事件与数据都克隆
6, 替换节点之 replaceWith() 和 replaceAll():
这两个方法作用类似, 主要是语法不一样. 看下面的例子:
- <div>
- <p > 第一段 </p>
- <p > 第二段 </p>
- <p > 第三段 </p>
- </div>
- <script>
- //replaceWith 操作:
- $("p:eq(1)").replaceWith('<a style="color:red"> 替换第二段的内容 </a>')
- //replaceAll 操作:
- $('<a style="color:red"> 替换第二段的内容 </a>').replaceAll('p:eq(1)')
- </script>
结果就是 "第二段" 被替换成了 "替换第二段的内容", 并且文字为红色.
7,wrap(),unwrap(),wrapAll() 和 wrapInner() 方法:
如果要将元素用其他元素包裹起来, 也就是给它增加一个父元素, 针对这样的处理, jQuery 提供了一个 wrap 方法. 看案例:
- <p > 哈哈 </p>
- <script>
- // 给 p 增加一个 div
- $('p').wrap('<div></div>')
- // 或者这样写
- $('p').wrap(function() {
- return '<div></div>'; // 与第一种类似, 只是写法不一样
- })
- </script>
结果就是给 p 增加了一个 div 包裹, 如下:
- <div>
- <p > 哈哈 </p>
- </div>
unwrap() 方法就是删除一个元素的父元素, 作用与 wrap() 刚好相反. wrap() 方法只能包裹一个元素, 比如说如果有多个 p 元素, 需要用 div 来包裹, 那么就得用 wrapAll() 方法. 看下面代码:
- <p > 哈哈 </p>
- <p > 嘻嘻 </p>
- <script>
- // 给所有 p 元素增加一个 div 包裹
- // 方式一
- $('p').wrapAll('<div></div>')
- // 方式二
- $('p').wrapAll(function() {
- return '<div><div/>';
- })
- </script>
不过这两种方式处理的结果有差别, 结果如下:
- <!-- 方式一处理结果 -->
- <div>
- <p > 哈哈 </p>
- <p > 嘻嘻 </p>
- </div>
- <!-- 方式二处理结果 -->
- <div>
- <p > 哈哈 </p>
- </div>
- <div>
- <p > 嘻嘻 </p>
- </div>
wrapInner() 方法的作用说起来就感觉很绕, 直接看代码感受一下:
- <div > 哈哈 </div>
- <div > 嘻嘻 </div>
- <script>
- // 给所有元素增加一个 p 包裹
- // 方式一:
- $('div').wrapInner('<p></p>')
- // 方式二:
- $('div').wrapInner(function() {
- return '<p></p>';
- })
- </script>
两种方法处理结果相同, 结果就是:
- <div>
- <p > 哈哈 </p>
- </div>
- <div>
- <p > 嘻嘻 </p>
- </div>
五, jQuery 的遍历:
jQuery 的遍历有很多种方式, 下面来看一下都如何使用.
1,children() 和 find() 方法:
快速查找合集里面的第一级子元素, 此时可以用 children() 方法. 比如:
- <div class="div">
- <ul class="son">
- <li class="grandson">1</li>
- </ul>
- </div>
- <script>
- // 找到所有 class=div 的元素
- // 找到其对应的子元素 ul, 然后筛选出最后一个, 给边宽加上颜色
- $('.div').children(':last').CSS('border', '3px solid blue')
- </script>
注意, $('.div').children() 只能找到 ul, 因为 div 与 ul 是父子关系, li 与 div 是祖辈关系, 因此无法找到. 如果想连 li 也找到, 那就得用 find() 方法:
$("div").find("li")
2,parent() 和 parents() 方法:
parent 方法, 和 children 方法相反, 就是查找上一级元素, 这里就不再举例说明. parents 方法和 parent 方法的不同之处在于 parent 只查找父级一级的元素, 而 parents 则会一直往上查找.
3,closest() 方法:
以选定的元素为中心, 往内查找可以通过 find,children 方法. 如果往上查找, 也就是查找当前元素的父辈祖辈元素, jQuery 提供了 closest() 方法, 这个方法类似 parents 但是又有一些细微的区别, 属于使用频率很高的方法. 区别有以下 3 点:
起始位置不同:.closest 开始于当前元素 .parents 开始于父元素
遍历的目标不同:.closest 要找到指定的目标,.parents 遍历到文档根元素, closest 向上查找, 直到找到一个匹配的就停止查找, parents 一直查找到根元素, 并将匹配的元素加入集合
结果不同:.closest 返回的是包含零个或一个元素的 jQuery 对象, parents 返回的是包含零个或一个或多个元素的 jQuery 对象
4,next(),prev() 和 siblings() 方法:
用于快速查找指定元素集合中每一个元素紧邻的后面同辈元素的元素集合.
- <div class="div">
- <ul class="level-1">
- <li class="item-1"> 哈哈 </li>
- <li class="item-2"> 嘿嘿 </li>
- <li class="item-3"> 嘻嘻 </li>
- </ul>
- </div>
- <div class="div">
- <ul class="level-1">
- <li class="item-1"> 哈哈 </li>
- <li class="item-2"> 嘿嘿 </li>
- <li class="item-3"> 嘻嘻 </li>
- </ul>
- </div>
- <script>
- $('.item-1').next().CSS('border', '1px solid red');
- </script>
运行 JS 后, 那么这两个 class="item-2" 的元素就会被选中, 然后这两个 "嘿嘿" 都会添上红色边框. prev 方法和 next() 相反, next 是找下一个, prev 是找前一个.$('.item-1').next() 是 item-2,$('.item-2').prev() 就是 item-1.siblings 方法就不管前后, 反正就是找同辈的元素,$('.item-2').siblings() 就是 item-2 的同辈元素, 那么 item-1 和 item-3 都会被选到.
5,add() 方法:
- <ul>
- <li>list item 1</li>
- <li>list item 3</li>
- </ul>
- <p > 新的 p 元素 </p>
- <script>
- $('li').add('p');
- </script>
p 元素和 ul 元素本来是同一级别的, 如果 $('li').add('p') 运行后, 那么就会把 p 与 li 归结到一组. 这就是 add 的作用. 还有一种方式, 就是动态创建 P 标签加入到合集, 然后插入到指定的位置, 但是这样就改变元素的本身的排列了, 语法如下:
$('li').add('<p > 新的 p 元素 </p>').appendTo(目标位置)
6,each() 方法:
each 是一个 for 循环的包装迭代器, each 通过回调的方式处理, 并且会有 2 个固定的实参, 索引与元素 each 回调方法中的 this 指向当前迭代的 dom 元素. 看案例:
- <ul>
- <li > 哈哈 </li>
- <li > 嘻嘻 </li>
- </ul>
- <script>
- $("li").each(function(index, element) {
- //index 索引 0,1
- //element 是对应的 li 节点 li,li
- //this 指向的是 li
- $(this).CSS('color','red');
- })
- </script>
这样就会把 "哈哈" 和 "嘻嘻" 的颜色设置为红色.
更多 Web 前端课程 https://www.html.cn/ 相关知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/jquery/17927.html