All chapters >>>>
Contents of this chapter
6.1.2 Basic functions of jQuery
6.1.3 Set up jQuery development environment
6.1.4 Write a simple jQuery application
6.2.1 Overview of jQuery selectors
6.3.2 Content Filtering Selector
6.3.3 Visibility filter selector
6.3.4 Attribute filter selector
6.4 Hierarchical selector and form selector
6.1 Overview of jQuery
6.1.1 Getting to know jQuery
In order to solve the compatibility problem in the development process, many JavaScript libraries have been produced. The JavaScript libraries that are currently frequently used include jQuery, Prototype, Spry and Ext JS
The most widely used JavaScript library is jQuery, a JavaScript library created in 2006
- A powerful framework system integrating JavaScript, CSS, DOM and Ajax
- Its main purpose is to achieve more functions with less code (Write less, do more)
6.1.2 Basic functions of jQuery
jQuery basic functions
- Access and manipulate DOM elements
- Handling of page events
- The use of a large number of plugins in the page
- Perfect combination with Ajax technology
- Significantly improve development efficiency
6.1.3 Set up jQuery development environment
- Download the jQuery file library (http://jquery.com)
- Introduce jQuery file library
Add the following code to the <head></head> tag pair on the page:
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
Example: When the button is clicked, the hidden <div> is gradually enlarged and displayed
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#btn").click(function() {
$("#info").show(2000);//show(2000) 表示用 2 秒显示标签
});
});
</script>
<input type="button" value=" 显示 " id="btn"/>
<div id="info" style= "display:none">
<img src="../img/mobile.jpg" width="350"/>
</div>
6.1.4 Write a simple jQuery application
- $(document).ready(function(){ }); Similar to JavaScript code: window.οnlοad=function(){}
- $(document).ready is executed after the page frame is downloaded; window.onload must be executed after the page has been loaded (including downloading pictures)
- $(document).ready(function(){ }) can be abbreviated as $(function(){ })
- $("#btn").click(function(){ }); Use the click() method to bind the function to the click event of the specified element. When the button is clicked, the bound function will be executed
6.1.5 Features of jQuery code
Example: When the <h3> tag is clicked, the attribute value is switched, and the subsequent sibling elements will switch their display or hidden state
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("h3").click(function() {
$(this).toggleClass("highLight").next("ul").toggle();
});
});
</script>
- $ Symbol sign: is the short form of JQuery object, $() is equivalent to jQuery(), is the sign of jQuery program
- Implicit loop: When using jQuery to find the elements that meet the requirements, you do not need to traverse each element one by one, and directly operate the elements that meet the requirements through jQuery commands
- Chain writing: You can write multiple operation commands for the same object in one sentence, and you can also insert line breaks and spaces
6.1.6 Practice exercises
6.2 jQuery basic selector
6.2.1 Overview of jQuery selectors
Use the jQuery selector to select page elements and generate jQuery objects. You can use the methods in jQuery. jQuery's selection of page elements completely inherits the syntax rules of CSS selectors
6.2.2 Basic selector
The basic selector is composed of tag id, class, tag name and multiple selectors
| Selector |
Features |
return value |
| #id |
Select elements based on the id attribute value |
Single element |
| .class |
Select elements based on the value of the class attribute |
Element collection |
| element |
Select elements based on the given tag name |
Element collection |
| * |
Select all elements, including html and body |
Element collection |
| selector1,selector2,…,selectorN |
Combine the elements matched by each selector and return them together |
Element collection |
Example: Use jQuery to display and style elements
<script type="text/javascript">
$(function() {
// 选取 <div> 和 <span> 元素，合并选取
$("div,span").css("display","block");
// 根据 id 属性值选取元素
$("#one").css("color","#f30");
// 根据给定的标签名选取元素
$("span").css("font-size","20px");
// 根据 class 属性值选取元素
$("div.two").css("background-color","#ccc");
$("#one,span").css("border-style","dashed");
});
</script>
<div id="one"> 设置了 div 的 id 属性 </div>
<div class="two"> 设置了 div 的 class 属性 </div>
<span>SPAN</span>
6.2.3 Practice exercises
6.3 Filter selector
6.3.1 Basic filter selector
The filter selector is attached to the back of all selectors, and a part of the elements is filtered out through specific filter rules, starting with a colon (:) when writing
Filter selectors can be divided into
- Basic filter selector
- Content filter selector
- Visibility filter selector
- Attribute filter selector
| Selector |
Features |
return value |
| first() 或 :first |
Get the first element |
Single element |
| last() 或 :last |
Get the last element |
Single element |
| :not(selector) |
Get all elements except the given selector |
Element collection, such as $("li:not(.title)") to obtain <li> elements whose class is not title |
| :even |
Get the element whose index value is even, the index number starts from 0 |
Element collection |
| :odd |
Combine the elements matched by each selector and return them together |
Element collection |
| :eq(index) |
Get the element whose index value is equal to index, the index number starts from 0 |
A single element, such as $("li:eq(1)") to get the <li> element whose index is equal to 1 |
| :gt(index) |
Get the element whose index value is greater than index, the index number starts from 0 |
Element collection, such as $("li:gt(1)") to get the index <li> elements that are less than but not including 1 |
| :lt(index) |
Get the element whose index value is less than index, the index number starts from 0 |
Element collection, such as $("li:lt(1)") to get the index smaller <li> elements that are less than but not including 1 |
| :header |
Get all heading elements, such as h1~h6 |
Element collection |
| :animated |
Get the element that is performing the animation effect |
Element collection |
Example: Use basic filters to locate DOM elements and change element styles
<script type="text/javascript">
$(function() {
$("#btnTitle").click(function() {
// 单独使用过滤选择器，等同于附加在基本选择器 * 的后面
$(":header").css("color","#f00");});
$("#btnEven").click(function() {
// 获取索引值为偶数的 <li> 元素
$("li:even").css("color","#00f");});
$("#btnOdd").click(function() {
// 获取索引值为奇数的 <li> 元素
$("li:odd").css("color","#f93");});
});</script>
6.3.2 Content Filtering Selector
The content filter selector obtains elements based on the text content in the element or the characteristics of the sub-elements contained
| Selector |
Features |
return value |
| :contains(text) |
Get the element with text content as text |
Element collection |
| :empty |
Get empty elements that do not contain descendant elements or text |
Element collection |
| :has(selector) |
Get the element with descendant element as selector |
Element collection |
| :parent |
Get non-empty elements containing descendant elements or text |
Element collection |
In the :contains(text) content filter selector, if the parameter text content appears in any descendant element of the matched element, the element is also considered to contain text content text. If the parameter text uses English letters, there is a case difference
Tags such as <input>, <img>, <br> and <hr> are empty elements that do not contain descendant elements and text
Example: Use content filter selector to find DOM element and change element style
$(function() {
$("#btnContain").click(function() {
// 获取含有文本内容为 A 的 div
$("div:contains('A')").css("background-color","#f00");
});
$("#btnEmpty").click(function() {
$("div:empty").css("background-color","#0f0"); //获取不包含后代元素或文本的div
});
$("#btnHas").click(function() {
$("div:has(span)").css("background-color","#00f"); //获取含有后代元素为span的元素
});
$("#btnParent").click(function() {
//获取含有后代元素或者文本的div元素
$("div:parent").css("background-color","white"); }); });
6.3.3 Visibility filter selector
The visibility filter selector obtains the element according to the characteristics of whether the element is visible
| Selector |
Features |
return value |
| :hidden |
Select invisible elements |
Element collection, such as $(":hidden") to select all hidden elements |
| :visible |
Select visible elements |
Element collection, such as $(":visible") to select all visible elements |
Invisible elements include: elements whose display attribute value is none in css style, <input> elements whose type attribute value is hidden, and elements whose width and height are set to 0
Example: Use visibility filter selector to lock DOM element and change element style
<script type="text/javascript">
$(function() {
$("#btnShow").click(function() {
$(".pic:hidden").show().addClass("current");
});
$("#btnHidden").click(function() {
$(".pic:visible").hide();
});
});
</script>
<img src="../img/mobile.jpg" class="pic"/>
<p><input type="button" value=" 显示 " id="btnShow"/>
<input type="button" value=" 隐藏 " id="btnHidden"/></p>
6.3.4 Attribute filter selector
The attribute filter selector obtains the element according to a certain attribute of the element, starting with "[" and ending with "]"
| Selector |
Description |
return value |
| [attribute] |
Get all the elements with this attribute, such as $('li[title]') means get all the <li> elements that contain the title attribute |
Element collection |
| [attribute=value] |
Get all elements whose attribute value is value, such as $('li[title=test2]') means to get all <li> elements that contain title attribute and whose attribute value is equal to test2 |
Element collection |
| [attribute!=value] |
Get all elements whose attribute value is not equal to value, such as $('li[title!=test2]') means to get all <li> elements that contain title attribute and whose attribute value is not equal to test2 |
Element collection |
| [attribute^=value] |
Select all elements whose attribute value starts with value. For example, $('a[href^="mailto:"]') means to get all <a> elements that contain href attributes and whose attribute values start with mailto: |
Element collection |
| [attribute$=value] |
Select all elements whose attribute value ends with value, such as $('a[href$=".zip"]') means to get all <a> elements that contain href attributes and whose attribute values end with .zip |
Element collection |
| [attribute*=value] |
Select all elements that contain value in the attribute value, such as $('a[href*="jquery.com"]') means to get all <a> elements that contain the href attribute and the attribute value contains jquery.com |
Element collection |
| [selector1][selector2]…[selectorN] |
Combine multiple selectors to meet multiple conditions. Each selection will narrow down the scope, such as $('li[id][title^=test]') to select all <li> with attribute id and attribute title starting with test element |
Element collection |
Example: Use attribute filter selector to lock DOM elements, select all filter boxes
<script type="text/javascript">
$(function() {// 页面加载事件
$("input[type='button']").click(function() {
$("input[name='songs']").attr("checked","checked");
});
});
</script>
<p>
请选择喜欢的歌曲：<br/>
<input type="checkbox" name="songs"/> 小幸运
<input type="checkbox" name="songs"/> 非酋
<input type="checkbox" name="songs"/> 佛系少女
<input type="checkbox" name="songs"/> 醉赤壁
</p>
<input type="button" value=" 全选 "/>
6.3.5 Practice exercises
6.4 Hierarchical selector and form selector
6.4.1 Level selector
The hierarchical selector obtains elements through the hierarchical relationship between DOM elements, and its main hierarchical relationships include offspring, parent-child, neighbor, and sibling relationships. Hierarchical selector is composed of two selectors
| name |
grammar |
Features |
return value |
| Descendant selector |
selector1 selector2 |
Select selector2 from the descendant elements of selector1 |
元素集合，如 $(“#nav span”) 表示选取 #nav下所有的<span>元素 |
| 子选择器 |
selector1>selector2 |
从 selector1 的子元素里选取 selector2 |
元素集合，如("#nav>span")表示选取 #nav 的子元素<span> |
| 相邻元素选择器 |
selector1+selector2 |
从 selector1 后面的第一个 兄弟元素里选取 selector2 |
元素集合，如 $("h2+dl") 表示选取紧邻<h2>元素之后的同辈元素 <dl> |
| 同辈元素选择器 |
selector1~selector2 |
从 selector1 后面的所有兄 弟元素里选取 selector2 |
元 素 集 合， 如 $("h2~dl") 表 示 选 取<h2> 元素之后所有的同辈元素<dl> |
selector1 selector2 与 selector1>selector2 所选择的元素集合是不同的，前者的层次关系是祖先与后代，而后者是父子关系
selector1+selector2 可以使用 jQuery 对象的 next() 方法代替
selector1~selector2 从 selector1 后面的所有兄弟元素里选取 selector2，不能获取前面部分，可以使用nextAll() 方法代替。而 siblings() 方法获取全部的相邻元素，不分前后
selector1 selector2 与 selector1:has(selector2) 虽然这两个选择器都要求 selector2 是 selector1 的后代元素，但是前者最终选取的是后代元素，后者最终选取的是拥有这些后代元素的元素
示例：使用层次选择器锁定 DOM 元素
<script type="text/javascript">
$(function() {// 页面加载完毕事件
// 设置标题的颜色
$(":header").css("color","red");
// 设置第一层无序列表的字体颜色
$(":header+ul>li").css("color","green");
// 设置第二层无序列表的字体颜色
$(":header+ul>li>ul>li").css("color","blue");
});
</script>
html代码略
6.4.2 表单选择器
| 选择器 |
功能 |
返回值 |
| :input |
获取 <input><textarea><select><button> 元素 |
元素集合 |
| :text |
获取符合 [type=text] 的 <input> 元素 |
元素集合 |
| :password |
获取符合 [type=password] 的 <input> 元素 |
元素集合 |
| :radio |
获取符合 [type=radio] 的 <input> 元素 |
元素集合 |
| :checkbox |
获取符合 [type=checkbox] 的 <input> 元素 |
元素集合 |
| :image |
获取符合 [type=image] 的 <input> 元素 |
元素集合 |
| :file |
获取符合 [type=file] 的 <input> 元素 |
元素集合 |
| :hidden |
参考“可见性过滤选择器” |
元素集合 |
| :button |
获取 <button> 元素和符合 [type=button] 的 <input> 元素 |
元素集合 |
| :submit |
获取符合 [type=submit] 的 <input> 元素 |
元素集合 |
| :reset |
获取符合 [type=reset] 的 <input> 元素 |
元素集合 |
表单对象属性过滤选择器
表单对象属性过滤选择器也是专门针对表单元素的选择器，它属于过滤选择器的范畴，可以附加在其他选择器的后面，主要功能是对所选择的表单元素进行过滤
| 选择器 |
功能 |
| :enabled |
选取可用的表单元素 |
| :disabled |
选取不可用的表单元素 |
| :checked |
选取被选中的 <input> 元素 |
| :selected |
选取被选中的 <option> 元素 |
示例：使用表单选择器和表单对象属性过滤选择器锁定 DOM 元素
$(function() {// 页面加载完毕事件
$("#pa :button").click(function() {
// 选择器 #pa 后的空格表示获取后代元素
$("#pa :text:enabled").css("border","1px solid red");
});
$("#pb :button").click(function() {
$("#pb :radio:checked").parent().css("background-color","#63c");
});
$("#pc :button").click(function() {
$("#pc :checkbox:checked").parent().css("background-color","#63c");
});
$("#pd :button").click(function() {
var info = " 你最喜欢的球星是："
info += $("#pd :input option:selected").val();
alert(info);
});
});
6.4.3 实践练习
总结:
- jQuery代码的特点：”$”标志、隐式循环、链式书写
- jQuery中基本选择器有“#id”、“.class”、“element”和“*”
- 基本过滤选择器有“:first”、“:last”、“:not”、“:even”、“：odd”、“:eq”、“:gt”、“:lt”、“:header”和“：animated”
- 内容过滤选择器有“：contains”、“:empty”、“:has”和“:parent” 可见性过滤选择器有“：hidden”和“:visible”
- 属性过滤选择器有“[attribute]”、“[attribute=value]”和“ [attribute=!value]”等
- 层次选择器有“selector1 selector2”、“ selector1> selector2”、“ selector1 +selector2”和“ selector1 ~selector2”
- 表单选择器有“:input”、“:text”、“:password”、“:radio”和“:checkbox”等