把最近学习的前端框架 jQuery 整理一下. 你可能听说过 jQuery, 因为他是 JavaScript 世界中使用最广泛的一个库.
江湖传言, 全世界大约有 80~90% 的网站直接或间接地使用了 jQuery. 鉴于它如此流行, 又如此好用, 所以每一个入门 JavaScript 的前端工程师都应该了解和学习它.
一, 什么是 jQuery?
1.jQuery 是由美国人 John Resig 创建, 至今已吸引了来自世界各地的众多 JavaScript 高手加入其 team.
2.jQuery 是继 prototype 之后又一个优秀的 JavaScript 框架. 其宗旨是 --WRITE Less,DO MORE!
3. 它是轻量级的 JS 库(压缩后只有 21k) , 这是其它的 JS 库所不及的, 它兼容 CSS3, 还兼容各种浏览器
4.jQuery 是一个快速的, 简洁的 JavaScript 库, 使用户能更方便地处理 htmldocuments,events, 实现动画效果, 并且方便地为网站提供 Ajax 交互.
5.jQuery 还有一个比较大的优势是, 它的文档说明很全, 而且各种应用也说得很详细, 同时还有许多成熟的插件可供选择
二, 什么是 jQuery 对象?
jQuery 对象就是通过 jQuery 包装 DOM 对象后产生的对象. jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $("#test").HTML();
- $("#test").HTML()
- // 意思是指: 获取 ID 为 test 的元素内的 HTML 代码. 其中 HTML()是 jQuery 里的方法
- // 这段代码等同于用 DOM 实现代码: document.getElementById("test").innerHTML;
- // 虽然 jQuery 对象是包装 DOM 对象后产生的, 但是 jQuery 无法使用 DOM 对象的任何方法, 同理 DOM 对象也不能使用 jQuery 里的方法. 乱使用会报错
- // 约定: 如果获取的是 jQuery 对象, 那么要在变量前面加上 $
所以,$variable = jQuery 对象, variable = DOM 对象 (variable 指的是变量). 通过 $variable[0], 可以将 jQuery 对象转为 DOM 对象, 比如:$("#test").HTML() 和 $("#test")[0].innerHTML
就是一个意思.
jQuery 的基础语法:$(selector).action()
三, 寻找元素(选择器和筛选器)
3.1 选择器
前端操作元素的两个步骤, 就是找到这个元素, 然后操作他, 首先看一下 jQuery 是怎么寻找元素的:
选择器 | 实例 | 选取 |
---|---|---|
基本选择器 | ||
* http://www.cnblogs.com/jquery/selector_all.asp | $("*") | 所有元素 |
#id | $("#lastname") | id="lastname" 的元素 |
.class | $(".intro") | 所有 class="intro" 的元素 |
http://www.cnblogs.com/jquery/selector_element.asp | $("p") | 所有 <p> 元素 |
.class .class | $(".intro.demo") | 所有 class="intro" 且 class="demo" 的元素 |
基本筛选器 | ||
:first http://www.cnblogs.com/jquery/selector_first.asp | $("p:first") | 第一个 <p> 元素 |
:last http://www.cnblogs.com/jquery/selector_last.asp | $("p:last") | 最后一个 <p> 元素 |
:even http://www.cnblogs.com/jquery/selector_even.asp | $("tr:even") | 所有偶数 <tr> 元素 |
:odd http://www.cnblogs.com/jquery/selector_odd.asp | $("tr:odd") | 所有奇数 <tr> 元素 |
:eq(index | $("ul li:eq(3)") | 列表中的第四个元素(index 从 0 开始) |
:gt(no | $("ul li:gt(3)") | 列出 index 大于 3 的元素 |
:lt(no | $("ul li:lt(3)") | 列出 index 小于 3 的元素 |
:not(selector ) | $("input:not(:empty)") | 所有不为空的 input 元素 |
:header http://www.cnblogs.com/jquery/selector_header.asp | $(":header") | 所有标题元素 <h1> - <h6> |
:animated | 所有动画元素 | |
:contains(text | $(":contains(‘W3School‘)") | 包含指定字符串的所有元素 |
:empty http://www.cnblogs.com/jquery/selector_empty.asp | $(":empty") | 无子(元素)节点的所有元素 |
:hidden | $("p:hidden") | 所有隐藏的 <p> 元素 |
:visible http://www.cnblogs.com/jquery/selector_visible.asp | $("table:visible") | 所有可见的表格 |
s1,s2,s3 | $("th,td,.intro") | 所有带有匹配选择的元素 |
属性选择器 | ||
[attribute | $("[href]") | 所有带有 href 属性的元素 |
[attribute =value | $("[href=‘#‘]") | 所有 href 属性的值等于 "#" 的元素 |
[attribute !=value | $("[href!=‘#‘]") | 所有 href 属性的值不等于 "#" 的元素 |
[attribute $=value | $("[href$=‘.jpg‘]") | 所有 href 属性的值包含以 ".jpg" 结尾的元素 |
表单选择器 | ||
:input http://www.cnblogs.com/jquery/selector_input.asp | $(":input") | 所有 <input> 元素 |
:text | $(":text") | 所有 type="text" 的 <input> 元素 |
:password | $(":password") | 所有 type="password" 的 <input> 元素 |
:radio | $(":radio") | 所有 type="radio" 的 <input> 元素 |
:checkbox | $(":checkbox") | 所有 type="checkbox" 的 <input> 元素 |
:submit | $(":submit") | 所有 type="submit" 的 <input> 元素 |
:reset | $(":reset") | 所有 type="reset" 的 <input> 元素 |
:button | $(":button") | 所有 type="button" 的 <input> 元素 |
:image | $(":image") | 所有 type="image" 的 <input> 元素 |
:file | $(":file") | 所有 type="file" 的 <input> 元素 |
:enabled | $(":enabled") | 所有激活的 input 元素 |
:disabled | $(":disabled") | 所有禁用的 input 元素 |
:selected | $(":selected") | 所有被选取的 input 元素 |
:checked | $(":checked") | 所有被选中的 input 元素 |
3.1.1 左侧菜单练习
根据上面的选择器, 做了一个简单的左侧菜单练习, 大概的功能就是点击菜单选项, 下面的子选项就显示, 其他菜单选项的子选项就隐藏:
首先, 我们把基本的标签都写好, 设置好初始状态:
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Title
- </title>
- <style>
- .back{ height: 600px; width: 100%; } .menu{ float: left; width: 30%; height:
- 600px; background-color: blue; } .content{ float: left; width: 70%; height:
- 600px; background-color: #84a42b; } .m{ line-height: 40px; background-color:
- mediumaquamarine; } .hide{ display: none; }
- </style>
- </head>
- <body>
- <div class="back">
- <div class="menu">
- <div class="item">
- <div class="m">
- 菜单一
- </div>
- <div class="con">
- <div>
- 111
- </div>
- <div>
- 111
- </div>
- <div>
- 111
- </div>
- </div>
- </div>
- <div class="item">
- <div class="m">
- 菜单二
- </div>
- <div class="con hide">
- <div>
- 222
- </div>
- <div>
- 222
- </div>
- <div>
- 222
- </div>
- </div>
- </div>
- <div class="item">
- <div class="m">
- 菜单三
- </div>
- <div class="con hide">
- <div>
- 333
- </div>
- <div>
- 333
- </div>
- <div>
- 333
- </div>
- </div>
- </div>
- </div>
- <div class="content">
- </div>
- </div>
- </body>
- </HTML>
View Code
现在的状态是这样:
但是这只是静态的, 点击菜单二没有任何反应. 下一步, 我们应该要给三个菜单标签绑定点击事件了, 就是点击他之后, 其他两个下面的子标签要隐藏:
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Title
- </title>
- <style>
- .back{ height: 600px; width: 100%; } .menu{ float: left; width: 30%; height:
- 600px; background-color: blue; } .content{ float: left; width: 70%; height:
- 600px; background-color: #84a42b; } .m{ line-height: 40px; background-color:
- mediumaquamarine; } .hide{ display: none; }
- </style>
- </head>
- <body>
- <div class="back">
- <div class="menu">
- <div class="item">
- <div class="m" onclick="show(this)">
- 菜单一
- </div>
- <div class="con">
- <div>
- 111
- </div>
- <div>
- 111
- </div>
- <div>
- 111
- </div>
- </div>
- </div>
- <div class="item">
- <div class="m" onclick="show(this)">
- 菜单二
- </div>
- <div class="con hide">
- <div>
- 222
- </div>
- <div>
- 222
- </div>
- <div>
- 222
- </div>
- </div>
- </div>
- <div class="item">
- <div class="m" onclick="show(this)">
- 菜单三
- </div>
- <div class="con hide">
- <div>
- 333
- </div>
- <div>
- 333
- </div>
- <div>
- 333
- </div>
- </div>
- </div>
- </div>
- <div class="content">
- </div>
- </div>
- <script src="jquery-3.4.0.js">
- </script>
- <script>
- function show(ele) {
- // 首先我们要把点击的菜单下面并列的 div 标签找到, 通过. next(),
- // 然后移除 hide 属性
- $(ele).next().removeClass('hide');
- // 第二步就是把其他的菜单下面并列的 div 标签加上这个 hide 属性
- // 我的思路是先找到父级, 然后找父级的兄弟级, 然后是兄弟级下面子级中有 class=con 的
- // 注意 con 前面要加上那个点
- $(ele).parent().siblings().children('.con').addClass('hide');
- }
- </script>
- </body>
- </HTML>
View Code
下面是一个切换 table 的练习, 可以试着做一下:
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Title
- </title>
- <style>
- *{ margin: 0px; padding: 0px; } .tab_outer{ width: 60%; margin: auto;
- } .menu{ background-color: #5689ff; line-height: 40px; } .content{ background-color:
- yellowgreen; height: 300px; } .menu li{ display: inline-block; color: #f9f9f9;
- } .current{ background-color: dimgrey; color: orangered; } .hide{ display:
- none; }
- </style>
- </head>
- <body>
- <div class="tab_outer">
- <ul class="menu">
- <li xxx="c1" class="current" onclick="tab(this);">
- 菜单一
- </li>
- <li xxx="c2" onclick="tab(this);">
- 菜单二
- </li>
- <li xxx="c3" onclick="tab(this);">
- 菜单三
- </li>
- </ul>
- <div class="content">
- <div id="c1">
- 内容一
- </div>
- <div id="c2" class="hide">
- 内容二
- </div>
- <div id="c3" class="hide">
- 内容三
- </div>
- </div>
- </div>
- </div>
- <script src="jquery-3.4.0.js">
- </script>
- <script>
- function tab(ele) {
- var index = $(ele).attr('xxx');
- $('#' + index).removeClass('hide').siblings().addClass('hide');
- $(ele).addClass('current').siblings().removeClass('current');
- }
- </script>
- </body>
- </HTML>
View Code
3.2 筛选器
在上面两个练习中, 还是出现了没有讲到的筛选器, 下面说一下筛选器:
3.2.1 过滤筛选器
下面这几个是常用的基本筛选器, 在上面的表中也可以找到, 所以上面表格中的内容背都要背下来.
$("li").eq(2) 也可以写为 $("li:eq(2)"), 就是所有 li 标签的第 3 个, index 从 0 开始
$("li").first() 也可以写为 $("li:first"), 就是所有 li 标签中的第一个
$("ul li").hasclass("test") 列表中, 有 class="test" 的 li 标签
3.2.2 查找筛选器
$("div").children(".test")
.children()返回匹配元素集合中每个元素的所有子元素(仅儿子辈). 参数可选, 添加参数表示通过选择器进行过滤, 对元素进行筛选
$("div").find(".test")
.find()方法是返回匹配元素集合中每个元素的后代. 参数是必选的, 可以为选择器, jQuery 对象可元素来对元素进行筛选.
- <div class="outer">outer
- <div class="inner">
- inner
- <p>inner p</p>
- </div>
- <p>alex</p>
- </div>
- <script src="jquery-3.4.0.js"></script>
- <script>
- $(".outer").children("p").CSS("color","red");
- // $(".outer").find("p").CSS("color","red");
- </script>
.children()和. find()
最后结果:
.siblings(expr) --- 查找所有兄弟(包括哥哥和弟弟)
.next(expr) --- 查找紧挨着的弟弟
.nextAll(expr) --- 查找所有的弟弟
.nextUntil(expr) --- 查找所有弟弟, 直到碰到符合 expr 条件, 不包含符合 expr 条件的那个元素
.prev(expr) --- 查找紧挨着的哥哥
.prevAll(expr) --- 查找所有哥哥
.prevUntil(expr) --- 查找所有哥哥, 直到碰到符合 expr 条件, 不包含符合 expr 条件的那个元素
注: expr 是指可选的参数, 包含用于匹配元素的选择器表达式.
- <ul class="test">
- <li class="begin">1111</li>
- <li>2222</li>
- <li>3333</li>
- <li>4444</li>
- <ul>
- <li>aaaaaaaaaaaaaa</li>
- </ul>
- <h2>hahaha</h2>
- <li>4444</li>
- <li id="end">5555</li>
- <li>6666</li>
- </ul>
测试代码
$("li:eq(1)").siblings().CSS("color","red") // 让第二个 li 的所有兄弟改变颜色, 如果不加 eq(1), 所有的都变红
$("li").eq(2).next().CSS("color","red"); // 让第三个 li 后面的弟弟变色
$("li").eq(2).nextAll().CSS("color","red"); // 让第三个 li 后面所有的弟弟变色
$("li").eq(2).nextUntil("#end").CSS("color","red"); // 让第三个 li 后面所有的弟弟变色, 直到出现一个 id 是 end 的弟弟为止, 这个弟弟不变色
.prev 的用法也是一样的, 就是换成了前面的哥哥.
$(".test").parent() 获得当前匹配元素集合中每个元素的父元素, 由选择器筛选(可选)
$(".test").parents() 获得当前匹配元素集合中每个元素的祖先元素, 由选择器筛选(可选)
$(".test").parentUntil() 获得当前匹配元素集合中每个元素的祖先元素, 直到 (但不包括) 被选择器, DOM 节点或 jQuery 对象匹配的元素
经过了前面的学了, 这三个大概都能猜到怎么用了:
- <div class="outer">outer
- <div class="inner">
- inner
- <p>inner p</p>
- </div>
- <p>pengfy</p>
- </div>
测试代码
console.log($(".outer .inner p").parent().HTML()) //p 标签打印父元素中的内容
$(".outer .inner p").parents().CSS("color","red"); //p 标签祖先元素都变色
这里如果也打印的话, 你会发现找到的祖先元素已经到了 HTML 标签了
$(".outer .inner p").parentsUntil("body").CSS("color","red");
这里暂时看不出差别, 试着打印一下内容就清楚了, 这里只到了 outer 类这一层.
下一篇会介绍操作元素, 操作属性等内容.
前端 jQuery 学习(一)
来源: http://www.bubuko.com/infodetail-3136104.html