jQuery学习笔记
2012-09-19 09:15
288 查看
jQuery简介与基础语法
jQuery是一个Javascript库。它极大的简化了Javascript编程。
jQuery库包含以下特性：HTML元素选取，HTML元素操作，CSS操作，HTML时间函数，Javascript特效和动画，HTML DOM遍历和修改，AJAX和Utilites。
jQuery库位于一个Javascript文件中，其中包含了所有的jQuery函数。可以通过下面的标记将jQuery添加到网页中：
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
ps：可以通过外部加载jQuery，分别是：Google和Microsoft。
Google：<head><script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script></head>
Microsoft：<head><script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script></head>
jQuery语法：jQuery语法是为HTML元素的选取编制的，可以对选取的元素执行某些操作。
基础语法是： $ ( selector ) . action ( )
美元符号定义jQuery，选择符 （selector）“查询” 和 “查找” HTML 元素，jQuery 的 action () 执行对元素的操作。
简单范例：
$(this).hide() - 隐藏当前的HTML元素
$("#test").hide() - 隐藏所有 id="test" 的元素
$("p").hide() - 隐藏所有段落元素
$("p.test").hide() - 隐藏所有 class="test" 的段落
$(".test").hide() - 隐藏所有 class="test" 的元素
文档就绪函数 （document ready）
$ ( document ) . ready (function () {
}); // 文档加载完毕后 ， 执行 该 jQuery 函数。防止文档在完全加载之前运行jQuery代码。
jQuery 选择器
jQuery选择器允许你对元素组或单个元素进行操作。
学习选择器，最关键的是学习jQuery选择器准确的选取所需的HTML、CSS等元素。选择器允许通过标签名、属性名或内容对HTML元素进行选择。选择器允许你对HTML元素组或单个元素进行操作。
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" 结尾的元素。
jQuery CSS选择器，jQuery CSS选择器可用于改变HTML元素的CSS属性
简单范例：
$("p").css("background-color","red")将所有p元素的背景颜色更改为红色
jQuery选择器参考表
选择器
实例 选取
* $("*") 所有元素
#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)") 列表中的第4个元素(index从0开始)
:gt(index) $("ul li:gt(3)") 列表中index大于3的元素
:lt(index) $("ul li:lt(3)") 列表中index小于3的元素
:not(selector) $("input:not(:empty)") 所有不为空的input元素
:header $(":header") 所有标题元素<h1> - <h6>
:naimated $(":animated") 所有动画元素
:hidden $("p:hidden") 所有隐藏的<p>元素
:visible $("table:visible") 所有可见的表格
:contains(text) $(":contains("hello") ) 包含指定字符串的所有元素
:empty $(":empty") 无子（元素）节点的所有元素
s1,s2,s3 $("th,td,.intro") 所有带有匹配选择的元素
[attribute] $("[href]") 所有带有href属性的元素
[attribute=value] $("[href='#']") 所有href属性的值等于“#”的元素
[attribute!=value] $("[href!='#']") 所有href属性的值不等于“#”的元素
[attribute$=value] $("[href$='.jpg']") 所有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元素
jQuery事件
jQuery是为事件处理特别设计的，jQuery事件处理方法是jQuery中的核心函数。
事件处理程序指的是当HTML中发生某些事件时所调用的方法。
对jQuery事件（函数）的建议处理方式：把所有jQuery代码置于事件处理函数中；把所有事件处理函数置于文档就绪事件处理器中；把jQuery代码置于单独的.js文件中；如果存在名称冲突，则重命名jQuery库。
jQuery是一个Javascript库。它极大的简化了Javascript编程。
jQuery库包含以下特性：HTML元素选取，HTML元素操作，CSS操作，HTML时间函数，Javascript特效和动画，HTML DOM遍历和修改，AJAX和Utilites。
jQuery库位于一个Javascript文件中，其中包含了所有的jQuery函数。可以通过下面的标记将jQuery添加到网页中：
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
ps：可以通过外部加载jQuery，分别是：Google和Microsoft。
Google：<head><script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script></head>
Microsoft：<head><script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script></head>
jQuery语法：jQuery语法是为HTML元素的选取编制的，可以对选取的元素执行某些操作。
基础语法是： $ ( selector ) . action ( )
美元符号定义jQuery，选择符 （selector）“查询” 和 “查找” HTML 元素，jQuery 的 action () 执行对元素的操作。
简单范例：
$(this).hide() - 隐藏当前的HTML元素
$("#test").hide() - 隐藏所有 id="test" 的元素
$("p").hide() - 隐藏所有段落元素
$("p.test").hide() - 隐藏所有 class="test" 的段落
$(".test").hide() - 隐藏所有 class="test" 的元素
文档就绪函数 （document ready）
$ ( document ) . ready (function () {
}); // 文档加载完毕后 ， 执行 该 jQuery 函数。防止文档在完全加载之前运行jQuery代码。
jQuery 选择器
jQuery选择器允许你对元素组或单个元素进行操作。
学习选择器，最关键的是学习jQuery选择器准确的选取所需的HTML、CSS等元素。选择器允许通过标签名、属性名或内容对HTML元素进行选择。选择器允许你对HTML元素组或单个元素进行操作。
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" 结尾的元素。
jQuery CSS选择器，jQuery CSS选择器可用于改变HTML元素的CSS属性
简单范例：
$("p").css("background-color","red")将所有p元素的背景颜色更改为红色
jQuery选择器参考表
选择器
实例 选取
* $("*") 所有元素
#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)") 列表中的第4个元素(index从0开始)
:gt(index) $("ul li:gt(3)") 列表中index大于3的元素
:lt(index) $("ul li:lt(3)") 列表中index小于3的元素
:not(selector) $("input:not(:empty)") 所有不为空的input元素
:header $(":header") 所有标题元素<h1> - <h6>
:naimated $(":animated") 所有动画元素
:hidden $("p:hidden") 所有隐藏的<p>元素
:visible $("table:visible") 所有可见的表格
:contains(text) $(":contains("hello") ) 包含指定字符串的所有元素
:empty $(":empty") 无子（元素）节点的所有元素
s1,s2,s3 $("th,td,.intro") 所有带有匹配选择的元素
[attribute] $("[href]") 所有带有href属性的元素
[attribute=value] $("[href='#']") 所有href属性的值等于“#”的元素
[attribute!=value] $("[href!='#']") 所有href属性的值不等于“#”的元素
[attribute$=value] $("[href$='.jpg']") 所有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元素
jQuery事件
jQuery是为事件处理特别设计的，jQuery事件处理方法是jQuery中的核心函数。
事件处理程序指的是当HTML中发生某些事件时所调用的方法。
对jQuery事件（函数）的建议处理方式：把所有jQuery代码置于事件处理函数中；把所有事件处理函数置于文档就绪事件处理器中；把jQuery代码置于单独的.js文件中；如果存在名称冲突，则重命名jQuery库。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jQuery学习笔记
- jQuery学习笔记之一——jQuery入门与基础核心
- jQuery学习笔记
- jQuery学习笔记之JavaScript脚本库和元素选择器研究[图]
- jQuery学习笔记(1)
- jQuery 学习笔记
- jQuery插件学习笔记
- jQuery学习笔记之二
- 【jQuery学习笔记------操作HTML、文本和值】
- 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.7.Slider控件
- learning jQuery 学习笔记五（+jQuery 1.4.1 API）--复合事件
- jQuery 学习笔记 Working with Selections
- jQuery 学习笔记1_初始 jQuery
- jQuery学习笔记--JqGrid相关操作 方法列表 备忘 重点讲解(超重要)
- JQuery学习笔记（一） 核心函数
- jQuery学习笔记
- jquery插件开发学习笔记（一）
- jQuery学习笔记（一）
- 【jQuery学习笔记-----绝对偏移位置】
- jquery总结--学习笔记（1）