jQuery
jQuery 简介
用JavaScript来做的一个库，用于方便HTML DOM元素进行各种各样的操作的接口库.
就是用JavaScript封装了一些方便我们对HTML DOM元素进行各种各样的操作的接口库.
也可以理解为一个方便我们对HTML DOM元素进行各种各样的操作的API函数集
jQuery是不能进行逻辑处理的，逻辑处理要用JavaScript实现
jQuery 语法
基础语法是：$(selector).action()
美元符号定义 jQuery
选择符（selector）“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操作
文档就绪函数(表示在HTML加载完成时触发的函数)
$(document).ready(function(){
--- jQuery functions go here ----
});
jQuery 选择器
jQuery 元素选择器
$(this) 当前 HTML 元素
$("p") 所有 <p> 元素
$("p.intro") 所有 class="intro" 的 <p> 元素
$(".intro") 所有 class="intro" 的元素
$("#intro") id="intro" 的元素
$("ul li:first") 每个 <ul> 的第一个 <li> 元素
$("[href$='.jpg']") 所有带有以 ".jpg" 结尾的属性值的 href 属性
$("div#intro .head") id="intro" 的 <div> 元素中的所有 class="head" 的元素
jQuery 属性选择器
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
“:”表示是条件的意思
: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('W3School')") 包含指定字符串的所有元素
:empty $(":empty") 无子（元素）节点的所有元素
:hidden $("p:hidden") 所有隐藏的 <p> 元素
:visible $("table:visible") 所有可见的表格
s1,s2,s3 $("th,td,.intro") 所有带有匹配选择的元素(就是多个选)
: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 代码放到 <head>部分的事件处理方法中：
$("button").click(function() {..some code... } )
实例:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
jQuery 名称冲突
var jq=jQuery.noConflict()，帮助您使用自己的名称（比如 jq）来代替 $ 符号。
就是jQuery默认是用$表示jQueryr的，但当有其他库也是用$表示简写时，就会冲突,
但这个方法可以解决这种冲突(就是你自己定义一个符号表示jQueryr)
默认：（它们一样）
jQuery("p").hide();
$("p").hide();
应用noConflict（它们一样）
var jq=jQuery.noConflict()
jQuery("p").hide();
jq("p").hide();//这样之后你就为jQuery定义了一个简化的符号了（$不再表示jQuery）
jQuery 事件(一些)
$(document).ready(function) 将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function) 触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件
$(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件
jQuery 效果 - 隐藏和显示
$(selector).hide(speed,callback); //显示 HTML 元素
$(selector).show(speed,callback); //隐藏 HTML 元素
$(selector).toggle(speed,callback); //切换 hide() 和 show() 方法(就是取反操作)
(可选)speed 参数:可以取以下值："slow"、"fast" 或毫秒
(可选)callback:是隐藏或显示完成后所执行的函数名称
$(selector).fadeIn(speed,callback); //淡入已隐藏的元素
$(selector).fadeOut(speed,callback); //淡出可见元素
$(selector).fadeToggle(speed,callback); //在 fadeIn() 与 fadeOut() 方法之间进行切换(就是取反操作)
$(selector).fadeTo(speed,opacity,callback);//渐变为给定的不透明度（值介于 0 与 1 之间(值越小越透明)）
$(selector).slideDown(speed,callback); //向下滑动元素
$(selector).slideUp(speed,callback); //向上滑动元素
$(selector).slideToggle(speed,callback);//在 slideDown() 与 slideUp() 方法之间进行切换(就是取反操作)
$(selector).animate({params},speed,callback);
(必需)params 参数定义形成动画的 CSS 属性。
实例：
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
实例：（使用相对值）
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
实例：（使用预定义的值）
把属性的动画值设置为 "show"、"hide" 或 "toggle"，就是隐藏和显示
$("button").click(function(){
$("div").animate({
height:'toggle'
});
});
实例：（使用队列功能）
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
$(selector).stop(stopAll,goToEnd); //用于停止动画或效果，在它们完成之前。
(可选)stopAll:规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
(可选)goToEnd:规定是否立即完成当前动画。默认是 false。
默认地，stop() 会清除在被选元素上指定的当前动画
实例：
$("#stop").click(function(){
$("#panel").stop();
});
jQuery Callback 函数
实例：
$("p").hide(1000,function(){
alert("The paragraph is now hidden");
});
jQuery 方法链接(由左向右一个个完成)
允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条
例子:("p1" 元素首先会变为红色，然后向上滑动，然后向下滑动)
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
jQuery 在语法上不是很严格；您可以按照希望的格式来写，包含折行和缩进:
如:
$("#p1").css("color","red")
.slideUp(2000)
.slideDown(2000);
jQuery DOM 操作
text() 设置或返回所选元素的文本内容(写时可选/String/Function(回调函数)类型)
html() 设置或返回所选元素的内容（包括 HTML 标记）(写时可选/String/Function(回调函数)类型)
val() 设置或返回表单字段的值(写时可选/String/Function(回调函数)类型)
attr() 方法用于获取属性值(写时可选/String/Function(回调函数)类型)
读：
alert("Text: " + $("#test").text()); //23
alert("HTML: " + $("#test").html()); //<b>23</b>
alert("Value: " + $("#test").val()); //123
alert($("#w3s").attr("href")); //http://www.w3school.com.cn
写:
$("#test1").text("Hello world!"); //设置或返回所选元素的文本内容
$("#test2").html("<b>Hello world!</b>"); //设置或返回所选元素的内容（包括 HTML 标记）
$("#test3").val("Dolly Duck"); //设置或返回表单字段的值
$("#w3s").attr("href","http://www.w3school.com.cn/jquery"); //设置属性
$("#w3s").attr({ //允许您同时设置多个属性
"href" : "http://www.w3school.com.cn/jquery",
"title" : "W3School jQuery Tutorial"
});
text()、html() 以及 val() 的回调函数
回调函数由两个参数：被选元素列表中当前元素的下标(从0开始)，以及原始（旧的）值。
然后以函数新值返回您希望使用的字符串。
jQuery - 添加元素
append() - 在被选元素的结尾插入内容(插入文本/HTML)
prepend() - 在被选元素的开头插入内容(插入文本/HTML)
after() - 在被选元素之后插入内容(插入文本/HTML)
before() - 在被选元素之前插入内容(插入文本/HTML)
append() 和 prepend() 方法能够通过参数接收无限数量的新元素
after() 和 before() 方法能够通过参数接收无限数量的新元素。
实例:
function appendText()
{
var txt1="<p>Text.</p>"; // 以 HTML 创建新元素
var txt2=$("<p></p>").text("Text."); // 以 jQuery 创建新元素
var txt3=document.createElement("p"); // 以 DOM 创建新元素
txt3.innerHTML="Text.";
$("p").append(txt1,txt2,txt3); // 追加新元素
}
jQuery - 删除元素
remove() - 删除被选元素（及其子元素）,方法也可接受一个参数，允许您对被删元素进行过滤。
empty() - 从被选元素中删除子元素(只删除子元素)
实例
$("p").remove(".italic"); //删除 class="italic" 的所有 <p> 元素
jQuery 操作 CSS
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性
实例:
.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}
$("h1,h2,p").addClass("blue");
$("div").addClass("important");
$("#div1").addClass("important blue");//规定多个类
$("h1,h2,p").removeClass("blue");
$("h1,h2,p").toggleClass("blue");//对被选元素进行添加/删除类的切换操作(就是取反操作)
返回 CSS 属性
css("propertyname");
实例:
$("p").css("background-color");
设置 CSS 属性
css("propertyname","value");
实例:
$("p").css("background-color","yellow");
设置多个 CSS 属性
css({"propertyname":"value","propertyname":"value",...});
实例:
$("p").css({"background-color":"yellow","font-size":"200%"});
jQuery 尺寸(元素和浏览器窗口的尺寸)
width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。
innerWidth() 方法返回元素的宽度（包括内边距）。
innerHeight() 方法返回元素的高度（包括内边距）。
outerWidth() 方法返回元素的宽度（包括内边距和边框）。
outerHeight() 方法返回元素的高度（包括内边距和边框）。
outerWidth(true) 方法返回元素的宽度（包括内边距、边框和外边距）。
outerHeight(true) 方法返回元素的高度（包括内边距、边框和外边距）。
$(document).width() 文档(HTML 文档)的宽度和高度
$(document).height()
$(window).width() 窗口（浏览器视口）的宽度和高度
$(window).height()
参考原文：
http://www.w3school.com.cn/jquery
jQuery 基础
猜你喜欢
转载自huangyongxing310.iteye.com/blog/2321518
今日推荐
周排行