Xiaoqiang's HTML5 mobile development road (34) - Selector in jQuery-HTML Tutorial-php.cn

Xiaoqiang's HTML5 mobile development road (34) - Selector in jQuery

黄舟

Release： 2017-02-04 14:43:20

Original

1455 people have browsed it

1. What is jQuery?

jQuery was created by American John Resig and has attracted many JavaScript masters from all over the world to join it.

Xiaoqiangs HTML5 mobile development road (34) - Selector in jQuery The founder and technical leader of jQuery, currently working as a JavaScript tool development engineer at Mozilla. He is the author of classic JavaScript books such as "Pro JavaScript Techniques" (ie "Proficient in JavaScript").

jQuery is another excellent JavaScript framework after prototype. Its purpose is - WRITE LESS, DO MORE, write less code and do more things.

jQuery is a lightweight js library (only 21k after compression), which is beyond the reach of other js libraries. It is compatible with CSS3 and various browsers.

Download address: http://jquery.com/download/

jQuery is a fast, concise javaScript library that allows users to more easily process HTML documents, events, and achieve animation effects. , and conveniently provide AJAX interaction for websites.

jQuery can keep the code and html content of the user's html page separated. That is to say, there is no need to insert a bunch of js in the html to call commands. You only need to define Just id.

2. Currently popular javascript libraries

##jQuery

EXTJS

Prototype

DWR

Dojo

YUI

MooTools

3. jQuery library contains The following features

1.HTML element selection

2.HTML element operation

3.CSS operation

4.HTML event function

5. Javascript special effects and animation

6. HTML DOM traversal and modification

7. AJAX

8. Utilites

4. Add jQuery library

You can add Google or Microsoft's CDN jQuery

Google's CDN

<head>  
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs  
/jquery/1.4.0/jquery.min.js"></script>  
</head>

Copy after login

Microsoft's CDN

<head>  
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery  
/jquery-1.4.min.js"></script>  
</head>

Copy after login

Note: In HTML5, it is not necessary to Write type="text/javascript". JavaScript is the default scripting language in HTML5 and all modern browsers.

There are two versions of JQuery that can be downloaded: http://jquery.com/download/

1. Production version: used for actual websites , has been streamlined and compressed.

2. Development version: used for testing and development, uncompressed and readable.

5. Simple and practical method

jQuery syntax is compiled for the selection of HTML elements, and you can perform certain operations on the elements.

The basic syntax is: $(selector).action()

$: dollar sign definition jQuery

selector: query and find HTML elements

action (): Perform operations on elements

For example: $(this).hide Hide the current HTML element

<html>  
<head>  
<script type="text/javascript" src="/jquery/jquery.js"></script>  
<script type="text/javascript">  
<span style="white-space:pre">  </span>$(document).ready(function(){  
  <span style="white-space:pre">        </span>$("button").click(function(){  
  <span style="white-space:pre">            </span>$(this).hide();  
<span style="white-space:pre">      </span>});  
<span style="white-space:pre">  </span>});  
</script>  
</head>  
  
<body>  
<button type="button">Click me</button>  
</body>  
  
</html>

Copy after login

Friends who pay attention to the above code may be confused by the following code above

$(document).ready(function(){  
  
--- jQuery functions go here ----  
  
});

Copy after login

This code is to prevent the jQuery code from running when the document is fully loaded, otherwise problems may occur.

In addition to this above, you can also obtain the element object through other methods

1, element selector

$("# test"): element with id="test".

$("p"):

element.

$(".test"): Element with class="test".

$("p.intro") : The

element of class="intro".

$("p#demo") : The

element with id="demo".

2. Attribute selector

jQuery uses XPath expressions to select elements with given attributes.

$("[href]") Selects all elements with href attribute.

$("[href='#']") Selects all elements with href and value equal to #.

$("[href!='#']") Selects all elements with an href value not equal to "#".

$("[href$='.jpg']") Selects all elements whose href value ends with ".jpg".

3. CSS selector

jQuery CSS selector can be used to change the CSS properties of HTML elements.

$("p").css("background-color","red");

Copy after login

6. jQuery selector table

选择器             实例                              选取
*                   $("*")                      所有元素    
#id                $("#lastname")    id="lastname" 的元素    
.class              $(".intro")    所有 class="intro" 的元素    
element    $("p")    所有 <p> 元素    
.class.class    $(".intro.demo")    所有 class="intro" 且 class="demo" 的元素    
:first    $("p:first")    第一个 <p> 元素    
:last    $("p:last")    最后一个 <p> 元素    
:even    $("tr:even")    所有偶数 <tr> 元素    
:odd    $("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    $(":header")    所有标题元素 <h1> - <h6>    
:animated    所有动画元素    
:contains(text)    $(":contains(&#39;W3School&#39;)")    包含指定字符串的所有元素    
:empty    $(":empty")    无子（元素）节点的所有元素    
:hidden    $("p:hidden")    所有隐藏的 <p> 元素    
:visible    $("table:visible")    所有可见的表格    
s1,s2,s3    $("th,td,.intro")    所有带有匹配选择的元素    
[attribute]    $("[href]")    所有带有 href 属性的元素    
[attribute=value]    $("[href=&#39;#&#39;]")    所有 href 属性的值等于 "#" 的元素    
[attribute!=value]    $("[href!=&#39;#&#39;]")    所有 href 属性的值不等于 "#" 的元素    
[attribute$=value]    $("[href$=&#39;.jpg&#39;]")    所有 href 属性的值包含以 ".jpg" 结尾的元素    
:input    $(":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 元素

Copy after login

The above is Xiaoqiang’s HTML5 mobile development road (34)-jQuery The content of the selector in, please pay attention to the PHP Chinese website (www.php.cn) for more related content!