JQuery（一）

不念不忘少年蓝@ 2022-05-25 03:24 125阅读 0赞

**(学习留存，如有侵权，请告知，立刻删除！)**

**JQuery是一个轻量级的JavaScript库；简化了JS编程；**

**例子：**

（1）

（2）

（3）

**添加JQuery库：**

`<script type="text/javascript" src="jquery.js"></script>`

`请注意，<script> 标签应该位于页面的 <head> 部分`

下载url：http://jquery.com/download/\#Download\_jQuery；

两个版本：

Production version - 用于实际的网站中，已被精简和压缩；

Development version - 用于测试和开发（未压缩，是可读的代码）；

库的替代：

Google 和 Microsoft 对 jQuery 的支持都很好；

如果您不愿意在自己的计算机上存放 jQuery 库，那么可以从 Google 或 Microsoft 加载 CDN jQuery 核心文件；

**Google的CDN：**

在 URL 中规定了 jQuery 版本 (1.4.0)。如果您希望使用最新版本的 jQuery，也可以从版本字符串的末尾（比如本例 1.4）删除一个数字0，谷歌会返回 1.4 系列中最新的可用版本（1.4.0、1.4.1 等等），或者也可以只剩第一个数字，那么谷歌会返回 1 系列中最新的可用版本（从 1.1.0 到 1.9.9）；

**Microsoft 的CDN：**

**JQuery语法：**

基础语法是：$(selector).action()；

$(this).hide() - 隐藏当前元素；

$("p").hide() - 隐藏所有p段落；

$(".test").hide() - 隐藏所有class="test" 的元素；

$("\#test").hide() - 隐藏所有 id="test" 的元素；

**文档就绪函数：**

$(document).ready(function(){
    ---  jQuery functions go here  ----
    --- 这是为了防止文档在完全加载(就绪)之前运行jQuery代码 ---
     });

**JQuery元素选择器：**

jQuery 使用 CSS 选择器来选取 HTML 元素：

$("p") 选取 <p> 元素；

$("p.intro") 选取所有 class="intro" 的 <p> 元素；

$("p\#demo") 选取所有 id="demo" 的 <p> 元素；

**JQuery属性选择器：**

jQuery 使用 XPath 表达式来选择带有既定属性的元素：

$("\[href\]") 选取所有带有 href 属性的元素；

$("\[href='\#'\]") 选取所有带有 href 属性，值等于 "\#" 的元素；

$("\[href!='\#'\]") 选取所有带有 href 属性，值不等于 "\#" 的元素；

$("\[href$='.jpg'\]") 选取所有 href 属性，值以 ".jpg" 结尾的元素；

例子：

$("p").css("background-color","red");    //把所有p元素的背景颜色更改为红色；

<table> 
 <tbody> 
  <tr> 
   <th>选择器</th> 
   <th>实例</th> 
   <th>选取</th> 
  </tr> 
  <tr> 
   <td>*</td> 
   <td>$("*")</td> 
   <td>所有元素</td> 
  </tr> 
  <tr> 
   <td>#id</td> 
   <td>$("#demo")</td> 
   <td>所有 id="demo" 的元素</td> 
  </tr> 
  <tr> 
   <td>.class</td> 
   <td>$(".demo")</td> 
   <td>所有 class="demo" 的元素</td> 
  </tr> 
  <tr> 
   <td>element</td> 
   <td>$("p")</td> 
   <td>所有 &lt;p&gt; 元素</td> 
  </tr> 
  <tr> 
   <td>.class.class</td> 
   <td>$(".element.demo")</td> 
   <td>所有 class="element" 且 class="demo" 的元素<span style="color:#ff0000;">（很少用）</span></td> 
  </tr> 
  <tr> 
   <td>:first</td> 
   <td>$("p:first")</td> 
   <td>第一个 &lt;p&gt; 元素</td> 
  </tr> 
  <tr> 
   <td>:last</td> 
   <td>$("p:last")</td> 
   <td>最后一个 &lt;p&gt; 元素</td> 
  </tr> 
  <tr> 
   <td>:even</td> 
   <td>$("tr:even")</td> 
   <td>所有奇数 &lt;tr&gt; 元素</td> 
  </tr> 
  <tr> 
   <td>:odd</td> 
   <td>$("tr:odd")</td> 
   <td>所有偶数 &lt;tr&gt; 元素</td> 
  </tr> 
  <tr> 
   <td>:eq(index)</td> 
   <td>$("ul li:eq(3)")</td> 
   <td>列表中 index 等于 3 的元素 第四个元素（index 从 0 开始）</td> 
  </tr> 
  <tr> 
   <td>:gt(no)</td> 
   <td>$("ul li:gt(3)")</td> 
   <td>列表中 index 大于 3 的元素</td> 
  </tr> 
  <tr> 
   <td>:lt(no)</td> 
   <td>$("ul li:lt(3)")</td> 
   <td>列表中 index 小于 3 的元素</td> 
  </tr> 
  <tr> 
   <td>:not(selector)</td> 
   <td>$("input:not(:empty)")</td> 
   <td>所有 input 元素节点不为空的元素<span style="color:#ff0000;">（很少用）很少去定义input节点</span></td> 
  </tr> 
  <tr> 
   <td>:header</td> 
   <td>$(":header")</td> 
   <td>所有标题元素 &lt;h1&gt; - &lt;h6&gt;</td> 
  </tr> 
  <tr> 
   <td>:animated</td> 
   <td>&nbsp;</td> 
   <td>所有动画元素<span style="color:#ff0000;">（很少用）</span></td> 
  </tr> 
  <tr> 
   <td>:contains(text)</td> 
   <td>$(":contains('string')")</td> 
   <td>包含指定字符串的所有元素</td> 
  </tr> 
  <tr> 
   <td>:empty</td> 
   <td>$(":empty")</td> 
   <td>无子（元素）节点的所有元素<span style="color:#ff0000;">（很少用）</span></td> 
  </tr> 
  <tr> 
   <td>:hidden</td> 
   <td>$("p:hidden")</td> 
   <td>所有隐藏的 &lt;p&gt; 元素<span style="color:#ff0000;">（很少用）</span></td> 
  </tr> 
  <tr> 
   <td>:visible</td> 
   <td>$("table:visible")</td> 
   <td>所有可见的表格</td> 
  </tr> 
  <tr> 
   <td>s1,s2,s3</td> 
   <td>$("th,td,.intro")</td> 
   <td>所有带有匹配选择的元素<span style="color:#ff0000;">（很少用）</span></td> 
  </tr> 
  <tr> 
   <td>[attribute]</td> 
   <td>$("[href]")</td> 
   <td>所有带有 href 属性的元素</td> 
  </tr> 
  <tr> 
   <td>[attribute=value]</td> 
   <td>$("[href='#']")</td> 
   <td>所有 href 属性的值等于 "#" 的元素</td> 
  </tr> 
  <tr> 
   <td>[attribute!=value]</td> 
   <td>$("[href!='#']")</td> 
   <td>所有 href 属性的值不等于 "#" 的元素</td> 
  </tr> 
  <tr> 
   <td>[attribute$=value]</td> 
   <td>$("[href$='.jpg']")</td> 
   <td>所有 href 属性的值包含以 ".jpg" 结尾的元素</td> 
  </tr> 
  <tr> 
   <td>:input</td> 
   <td>$(":input")</td> 
   <td>所有 &lt;input&gt; 元素</td> 
  </tr> 
  <tr> 
   <td>:text</td> 
   <td>$(":text")</td> 
   <td>所有 type="text" 的 &lt;input&gt; 元素</td> 
  </tr> 
  <tr> 
   <td>:password</td> 
   <td>$(":password")</td> 
   <td>所有 type="password" 的 &lt;input&gt; 元素</td> 
  </tr> 
  <tr> 
   <td>:radio</td> 
   <td>$(":radio")</td> 
   <td>所有 type="radio" 的 &lt;input&gt; 元素</td> 
  </tr> 
  <tr> 
   <td>:checkbox</td> 
   <td>$(":checkbox")</td> 
   <td>所有 type="checkbox" 的 &lt;input&gt; 元素</td> 
  </tr> 
  <tr> 
   <td>:submit</td> 
   <td>$(":submit")</td> 
   <td>所有 type="submit" 的 &lt;input&gt; 元素</td> 
  </tr> 
  <tr> 
   <td>:reset</td> 
   <td>$(":reset")</td> 
   <td>所有 type="reset" 的 &lt;input&gt; 元素</td> 
  </tr> 
  <tr> 
   <td>:button</td> 
   <td>$(":button")</td> 
   <td>所有 type="button" 的 &lt;input&gt; 元素</td> 
  </tr> 
  <tr> 
   <td>:image</td> 
   <td>$(":image")</td> 
   <td>所有 type="image" 的 &lt;input&gt; 元素</td> 
  </tr> 
  <tr> 
   <td>:file</td> 
   <td>$(":file")</td> 
   <td>所有 type="file" 的 &lt;input&gt; 元素</td> 
  </tr> 
  <tr> 
   <td>:enabled</td> 
   <td>$(":enabled")</td> 
   <td>所有激活的 input 元素</td> 
  </tr> 
  <tr> 
   <td>:disabled</td> 
   <td>$(":disabled")</td> 
   <td>所有禁用的 input 元素</td> 
  </tr> 
  <tr> 
   <td>:selected</td> 
   <td>$(":selected")</td> 
   <td>所有被选取的 input 元素</td> 
  </tr> 
  <tr> 
   <td>:checked</td> 
   <td>$(":checked")</td> 
   <td>所有被选中的 input 元素</td> 
  </tr> 
 </tbody> 
</table>

<body>  
<h1 id="header">Welcome to Here</h1>  
<p>My name is ZhaoYan</p>  
<p>My name is LiLong</p>  
<p class="intro">My name is LiYan</p>  
<p>My name is PengHongJun</p>  
<p>My name is QiTao</p>  
<div id="choose">  
Who is your favourite:  
<ul>  
<li>Goofy</li>  
<li>Mickey</li>  
<li>Pluto</li>  
<li>Linie</li>  
<li>Yunemo</li>  
</ul>  
</div>  
Name: <input type="text" name="user" />  
<br />  
Password: <input type="password" name="password" disabled="disabled"/>  
<br />  
<input type="button" value="useless button" />  
<br />  
<input type="reset" value="Reset" />

<input type="radio" name="student" value="stu" checked="checked" />学生

<input type="checkbox" name=techer" value=ther" checked="checked" />老师

<br/>

<select id="sle">  
  <option>Volvo</option>  
  <option selected="selected">Saab</option>  
  <option>Mercedes</option>  
  <option>Audi</option>  
</select>

</body>

$(document).ready(function()\{

$("body \*").css("background-color","red");  //所有元素

$("\#choose").css("background-color","red");  //id = choose

$(".intro").css("background-color","red");  //class = intro

$("p").css("background-color","red");  //所有p元素

$("p:first").css("background-color","red");  //第一个p元素；<p>My name is ZhaoYan</p>

$("p:last").css("background-color","red");  //最后一个p元素；<p>My name is QiTao</p>

$("p:even").css("background-color","red");   //所有奇数p元素；135

$("p:odd").css("background-color","red");   //所有偶数p元素；24

$("ul li:eq(1)").css("background-color","red");  //ul li 索引1的元素；<li>Mickey</li>  索引从0开始

$("p:eq(1)").css("background-color","red");  //p索引1的元素；<p>My name is LiLong</p>

$("ul li:gt(2)").css("background-color","red");  //ul li索引大于2的元素；<li>Linie</li>和<li>Yunemo</li>

$("p:gt(2)").css("background-color","red");  //p索引大于2的元素；<p>My name is PengHongJun</p>和 <p>My name is QiTao</p>

$("ul li:lt(2)").css("background-color","red");  //ul li索引小于2的元素；<li>Goofy</li>和<li>Mickey</li>

$("p:lt(2)").css("background-color","red");  //p索引小于2的元素；<p>My name is ZhaoYan</p>和<p>My name is LiLong</p>

$(":header").css("background-color","red");  //所有标题元素 <h1> - <h6>；<h1 id = 'header'>Welcome to Here</h1>

$("p:contains(Li)").css("background-color","red");  //含指定字符串的元素；<p>My name is LiLong</p>和<p class="intro">My name is LiYan</p>

$("p:visible").css("background-color","red");  //所有可见的p元素；

$("\[id\]").css("background-color","red");  //所有带有id属性的元素；

$("body \[id='header'\]").css("background-color","red");  //body内所有带有id属性，并且值等于header的元素；

$("body \[id!='header'\]").css("background-color","red");  //body内所有带有id属性，并且值不等于header的元素；

$("body \[id$='se'\]").css("background-color","red");  //body内所有带有id属性，并且值以'se'结尾的元素；

$(":input").css("background-color","red");  //选择所有input元素；

$(":text").css("background-color","red");  //所有 type="text" 的input元素；

$(":password").css("background-color","red");  //所有 type="password"的input元素；

$(":radio").css("background-color","red");  //所有type="radio"的input元素；

$(":checkbox").css("background-color","red");  //所有 type="checkbox"的input元素；

$(":submit").css("background-color","red");  //所有 type="submit"的input元素；

$(":reset").css("background-color","red");  //所有 type="reset"的input元素；

$(":button").css("background-color","red");  //所有 type="button"的input元素；

$(":image").css("background-color","red");  //所有 type="image"的input元素；

$(":file").css("background-color","red");  //所有 type="file"的input元素；

$(":enabled").css("background-color","red");  //所有启用的 <input> 和 <button> 元素；

$(":disabled").css("background-color","red");  //所有禁用的 <input> 和 <button> 元素；

$(":selected").css("background-color","red");  //被选中的元素；

$(":checked").css("background-color","red");  //被选中的元素；

JQuery（一）

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 JQuery学习（一）

相关 Jquery UI (一)

相关 jQuery学习记录一

相关 jQuery整理笔记一----jQuery开始

相关【JQuery】熟能生巧JQuery（一）——目录

相关 JQuery（一）

相关 JQuery（学习笔记一）初识JQuery

相关深入浅出 JQuery (一) 浅析JQuery

相关 JQuery基础学习（一）

相关 jQuery学习（一）认识jQuery