初探jQuery——write Less，Do More

来源：互联网发布：目前最好的排序算法编辑：程序博客网时间：2024/06/05 08:05

简介

看到在jQuery 官网上这样描述jQuery—— jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

jQuery 极大地简化了 JavaScript 编程。

通过 jQuery，我们可以选取（查询，query） HTML 元素，并对它们执行"操作"（actions）。即 jQuery最基本的语法：$(selector).action()

在使用jQuery之前需要引入jQuery的库，我们可以选择去官网下载引入，也可以使用公开CDN加速的库（推荐），这里给出一个百度公开的CDN加速的jQuery库

文档就绪事件

$(document).ready(function(){    // 开始写 jQuery 代码... });

也可以简写为：

$(function(){    // 开始写 jQuery 代码... });

jQuery 选择器

选择器实例选取*$("*")所有元素#id$("#lastname")id="lastname" 的元素.class$(".intro")class="intro" 的所有元素.class,.class$(".intro,.demo")class 为 "intro" 或 "demo" 的所有元素element$("p")所有 <p> 元素el1,el2,el3$("h1,div,p")所有 <h1>、<div> 和 <p> 元素 :first$("p:first")第一个 <p> 元素:last$("p:last")最后一个 <p> 元素:even$("tr:even")所有偶数 <tr> 元素，索引值从 0 开始，第一个元素是偶数 (0)，第二个元素是奇数 (1)，以此类推。:odd$("tr:odd")所有奇数 <tr> 元素，索引值从 0 开始，第一个元素是偶数 (0)，第二个元素是奇数 (1)，以此类推。 :first-child$("p:first-child")属于其父元素的第一个子元素的所有 <p> 元素:first-of-type$("p:first-of-type")属于其父元素的第一个 <p> 元素的所有 <p> 元素:last-child$("p:last-child")属于其父元素的最后一个子元素的所有 <p> 元素:last-of-type$("p:last-of-type")属于其父元素的最后一个 <p> 元素的所有 <p> 元素:nth-child(n)$("p:nth-child(2)")属于其父元素的第二个子元素的所有 <p> 元素:nth-last-child(n)$("p:nth-last-child(2)")属于其父元素的第二个子元素的所有 <p> 元素，从最后一个子元素开始计数:nth-of-type(n)$("p:nth-of-type(2)")属于其父元素的第二个 <p> 元素的所有 <p> 元素:nth-last-of-type(n)$("p:nth-last-of-type(2)")属于其父元素的第二个 <p> 元素的所有 <p> 元素，从最后一个子元素开始计数:only-child$("p:only-child")属于其父元素的唯一子元素的所有 <p> 元素:only-of-type$("p:only-of-type")属于其父元素的特定类型的唯一子元素的所有 <p> 元素 parent > child$("div > p")<div> 元素的直接子元素的所有 <p> 元素parent descendant$("div p")<div> 元素的后代的所有 <p> 元素element + next$("div + p")每个 <div> 元素相邻的下一个 <p> 元素element ~ siblings$("div ~ p")<div> 元素同级的所有 <p> 元素 :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)")所有不为空的输入元素 :header$(":header")所有标题元素 <h1>, <h2> ...:animated$(":animated")所有动画元素:focus$(":focus")当前具有焦点的元素:contains(text)$(":contains('Hello')")所有包含文本 "Hello" 的元素:has(selector)$("div:has(p)")所有包含有 <p> 元素在其内的 <div> 元素:empty$(":empty")所有空元素:parent$(":parent")所有是另一个元素的父元素的元素:hidden$("p:hidden")所有隐藏的 <p> 元素:visible$("table:visible")所有可见的表格:root$(":root")文档的根元素:lang(language)$("p:lang(de)")所有带有以 "de" 开头的 lang 属性值的 <p> 元素 [attribute]$("[href]")所有带有 href 属性的元素[attribute=value]$("[href='default.htm']")所有带有 href 属性且值等于 "default.htm" 的元素[attribute!=value]$("[href!='default.htm']")所有带有 href 属性且值不等于 "default.htm" 的元素[attribute$=value]$("[href$='.jpg']")所有带有 href 属性且值以 ".jpg" 结尾的元素[attribute|=value]$("[title|='Tomorrow']")所有带有 title 属性且值等于 'Tomorrow' 或者以 'Tomorrow' 后跟连接符作为开头的字符串[attribute^=value]$("[title^='Tom']")所有带有 title 属性且值以 "Tom" 开头的元素[attribute~=value]$("[title~='hello']")所有带有 title 属性且值包含单词 "hello" 的元素[attribute*=value]$("[title*='hello']")所有带有 title 属性且值包含字符串 "hello" 的元素[name=value][name2=value2]$( "input[id][name$='man']" )带有 id 属性，并且 name 属性以 man 结尾的输入框 :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")所有启用的元素:disabled$(":disabled")所有禁用的元素:selected$(":selected")所有选定的下拉列表元素:checked$(":checked")所有选中的复选框选项.selector$(selector).selector在jQuery 1.7中已经不被赞成使用。返回传给jQuery()的原始选择器:target$( "p:target" )选择器将选中ID和URI中一个格式化的标识符相匹配的<p>元素

jQuery 事件

鼠标事件键盘事件表单事件文档/窗口事件clickkeypresssubmitloaddblclickkeydownchangeresizemouseenterkeyupfocusscrollmouseleave blurunload
在搞明白这些基础性的知识之后可以来看一个案例，案例很简单，按钮点击时变换样式

<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title></head><style>#btn{color: whitesmoke;background: cornflowerblue;}</style><script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script><script type="text/javascript">//文档就绪事件$(function(){//按钮点击事件$("#btn").click(function(){//$(this)表示触发事件的对象，即上面的这个按钮if($(this).text() === "蓝胖子"){$(this).css("background","red");$(this).text("红胖子");}else{$(this).css("background","cornflowerblue");$(this).text("蓝胖子");}});});</script><body><button id="btn">蓝胖子</button></body></html>

0 0