(1)
eq()、addClass()、removeClass()方法、find()方法 总结
<!DOCTYPE html>
<html>
<head>
<style>
div { width:60px; height:60px; margin:10px; float:left;
border:2px solid blue; }
.red { background:red; }
</style>
<script type="text/javascript" src="/jquery/jquery.js"></script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<script>
$("body").find("div").eq(2).addClass("red");//向被选元素添加一个或多个类
$(document).ready(function(){
$("button").click(function(){
$("body").find("div").eq(2).removeClass("red");//被选元素移除一个或多个类
}); //find()方法:获得当前元素集合中每个元素的后代,通过选择器、jQuery // 对象或元素来筛选。
});
</script>
<button>click me</button>
</body>
</html>
(2)
find()方法:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
</head>
<body>
<p><span><b>Hello</b></span>, how are you?</p>
<p>Me? I'm <span>good</span>.</p>
<script>
$("span").find("b").css('color','red');
</script>
</body>
</html>
------------------------------------------
获得内容 - text()、html() 以及 val()
三个简单实用的用于 DOM 操作的 jQuery 方法:
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容(包括 HTML 标记)
- val() - 设置或返回表单字段的值
(1)
eq()、addClass()、removeClass()方法、find()方法 总结
<!DOCTYPE html> <html> <head> <style> div { width:60px; height:60px; margin:10px; float:left; border:2px solid blue; } .red { background:red; } </style> <script type="text/javascript" src="/jquery/jquery.js"></script> </head> <body> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <script> $("body").find("div").eq(2).addClass("red");//向被选元素添加一个或多个类 $(document).ready(function(){ $("button").click(function(){ $("body").find("div").eq(2).removeClass("red");//被选元素移除一个或多个类 }); //find()方法:获得当前元素集合中每个元素的后代,通过选择器、jQuery // 对象或元素来筛选。 }); </script> <button>click me</button> </body> </html>find()方法:
获得内容 - text()、html() 以及 val()
三个简单实用的用于 DOM 操作的 jQuery 方法:
下面的例子演示如何通过 jQuery text() 和 html() 方法来获得内容:
实例
$("#btn1").click(function(){ alert("Text: " + $("#test").text()); }); $("#btn2").click(function(){ alert("HTML: " + $("#test").html()); });
选择所有禁用的 <input> 和 <button> 元素:
$(":disabled")
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(":disabled").css("background-color","#B2E0FF");
});
</script>
</head>
<body>
<html>
<body>
<form action="">
Name: <input type="text" name="user" />
<br />
Password: <input type="password" name="password" disabled="disabled" />
<br />
<button type="button">Useless Button</button>
<input type="button" value="Another useless button" disabled="disabled" />
<br />
<input type="reset" value="Reset" />
<input type="submit" value="Submit" disabled="disabled" />
<br />
</form>
</body>
</html>
</body>
</html>
1.隐藏class=“”的html元素
<script>
$(document).ready(function(){
$("button").click(function(){
$(".main").hide();
});
});
</script>
<div class="main">123</div>
<div class="main">456</div>
<button type="button">点击隐藏</button>
2.隐藏所有标签为<p>的元素
<script>
$(document).ready(function(){
$("button").click(function(){
$('p').hide();
});
});
</script>
<button type="button">点击隐藏</button>
<p>隐藏1</p>
<p>隐藏2</p>
<p>隐藏3</p>
3.隐藏id=""的元素
<script>
$(document).ready(function(){
$("button").click(function(){
$("#main1").hide();
$("#main2").hide();
});
});
</script>
<div id="main1">123</div>
<div id="main2">456</div>
<button type="button">点击隐藏</button>
<head>
<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// $("#n1").bind("click",function(){
$("#n1").click(function(){
if(document.getElementById("n1").checked){
document.getElementById("n2").disabled=true;
}else{
document.getElementById("n2").disabled=false;
}
});
// $("#n2").bind("click",function(){
$("#n2").click(function(){
if(document.getElementById("n2").checked){
document.getElementById("n1").disabled=true;
}else{
document.getElementById("n1").disabled=false;
}
});
});
</script>
</head>
<body>
<input type="checkbox" value="" id="n1" name="n1">第一个复选框
<input type="checkbox" value="" id="n2" name="n2">第二个复选框
</body>
</html>
<html>
<head>
<style>
#main{width:200px;height:100px;border:2px solid red;display:none;}
</style>
<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//bind() 方法为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数
$("button").bind("click",function(){
$("div").slideToggle();
});
});
</script>
</head>
<body>
<div id="main">哈哈,被骗了吧</div>
<button>显灵吧</button>
</body>
</html>
替代方案
如果您不希望下载并存放 jQuery,那么也可以通过 CDN(内容分发网络) 引用它。
谷歌和微软的服务器都存有 jQuery 。
如需从谷歌或微软引用 jQuery,请使用以下代码之一:
Google CDN:
<head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"> </script> </head>
Microsoft CDN:
<head> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"> </script> </head>————————————————————————————————————————————————————————————————————————
jQuery 语法
jQuery 语法是为 HTML 元素的选取编制的,可以对元素执行某些操作。
基础语法是:$(selector).action()
- 美元符号定义 jQuery
- 选择符(selector)“查询”和“查找” HTML 元素
- jQuery 的 action() 执行对元素的操作
示例
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有段落
$("p.test").hide() - 隐藏所有 class="test" 的段落
$("#test").hide() - 隐藏所有 id="test" 的元素
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 属性。
$(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事件:
jQuery 事件方法
事件方法会触发匹配元素的事件,或将函数绑定到所有匹配元素的某个事件。
触发实例:
$("button#demo").click()
上面的例子将触发 id="demo" 的 button 元素的 click 事件。
绑定实例:
$("button#demo").click(function(){$("img").hide()})
上面的例子会在点击 id="demo" 的按钮时隐藏所有图像。
方法 | 描述 |
---|---|
bind() | 向匹配元素附加一个或更多事件处理器 |
blur() | 触发、或将函数绑定到指定元素的 blur 事件 |
change() | 触发、或将函数绑定到指定元素的 change 事件 |
click() | 触发、或将函数绑定到指定元素的 click 事件 |
dblclick() | 触发、或将函数绑定到指定元素的 double click 事件 |
delegate() | 向匹配元素的当前或未来的子元素附加一个或多个事件处理器 |
die() | 移除所有通过 live() 函数添加的事件处理程序。 |
error() | 触发、或将函数绑定到指定元素的 error 事件 |
event.isDefaultPrevented() | 返回 event 对象上是否调用了 event.preventDefault()。 |
event.pageX | 相对于文档左边缘的鼠标位置。 |
event.pageY | 相对于文档上边缘的鼠标位置。 |
event.preventDefault() | 阻止事件的默认动作。 |
event.result | 包含由被指定事件触发的事件处理器返回的最后一个值。 |
event.target | 触发该事件的 DOM 元素。 |
event.timeStamp | 该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数。 |
event.type | 描述事件的类型。 |
event.which | 指示按了哪个键或按钮。 |
focus() | 触发、或将函数绑定到指定元素的 focus 事件 |
keydown() | 触发、或将函数绑定到指定元素的 key down 事件 |
keypress() | 触发、或将函数绑定到指定元素的 key press 事件 |
keyup() | 触发、或将函数绑定到指定元素的 key up 事件 |
live() | 为当前或未来的匹配元素添加一个或多个事件处理器 |
load() | 触发、或将函数绑定到指定元素的 load 事件 |
mousedown() | 触发、或将函数绑定到指定元素的 mouse down 事件 |
mouseenter() | 触发、或将函数绑定到指定元素的 mouse enter 事件 |
mouseleave() | 触发、或将函数绑定到指定元素的 mouse leave 事件 |
mousemove() | 触发、或将函数绑定到指定元素的 mouse move 事件 |
mouseout() | 触发、或将函数绑定到指定元素的 mouse out 事件 |
mouseover() | 触发、或将函数绑定到指定元素的 mouse over 事件 |
mouseup() | 触发、或将函数绑定到指定元素的 mouse up 事件 |
one() | 向匹配元素添加事件处理器。每个元素只能触发一次该处理器。 |
ready() | 文档就绪事件(当 HTML 文档就绪可用时) |
resize() | 触发、或将函数绑定到指定元素的 resize 事件 |
scroll() | 触发、或将函数绑定到指定元素的 scroll 事件 |
select() | 触发、或将函数绑定到指定元素的 select 事件 |
submit() | 触发、或将函数绑定到指定元素的 submit 事件 |
toggle() | 绑定两个或多个事件处理器函数,当发生轮流的 click 事件时执行。 |
trigger() | 所有匹配元素的指定事件 |
triggerHandler() | 第一个被匹配元素的指定事件 |
unbind() | 从匹配元素移除一个被添加的事件处理器 |
undelegate() | 从匹配元素移除一个被添加的事件处理器,现在或将来 |
unload() | 触发、或将函数绑定到指定元素的 unload 事件 |
each()函数:
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("li").each(function(){
alert($(this).text())
});
});
});
</script>
</head>
<body>
<button>输出每个列表项的值</button>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Soda</li>
</ul>
</body>
</html>
each()方法能使DOM循环结构简洁,不容易出错。each()函数封装了十分强大的遍历功能,使用也很方便,它可以遍历一维数组、多维数组、DOM, JSON 等等
$.each(arr1, function (i,val){
alert(i);
alert(val);
});
alert(val)将输出aaa,bbb,ccc
$.each(arr, function (i, item){
alert(i);
alert(item);
});
item[0]相对于取每一个一维数组里的第一个值
alert(i)将输出为0,1,2,因为这二维数组含有3个数组元素
alert(item)将输出为 ['a', 'aa', 'aaa'],['b', 'bb', 'bbb'],['c', 'cc', 'ccc']
<head>
<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript">
//addClass()方法向被选元素添加一个或多个类
$(document).ready(function(){
$("button").click(function(){
$('p').addClass(function(n){
return 'par_' + n;
});
});
});
</script>
<style type="text/css">
.par_0
{
color:blue;
}
.par_1
{
color:red;
}
.par_2
{
color:#ddbbaa;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p>This is another paragraph too</p>
<button>向 p 元素添加类</button>
</body>
</html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").addClass("intro");
});
});
</script>
<style type="text/css">
.intro
{
font-size:120%;
color:red;
}
</style>
</head>
<body>
<h1 id="h1">This is a heading</h1>
<p >This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>从第一个段落中删除类</button>
</body>
</html>
index() 方法返回指定元素相对于其他指定元素的 index 位置。
这些元素可通过 jQuery 选择器或 DOM 元素来指定。
注释:如果未找到元素,index() 将返回 -1。
<head>
<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("li").click(function(){
alert($("li").index());
});
});
</script>
</head>
<body>
<p>点击列表项可获得其相对于同胞元素的 index 位置:</p>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Soda</li>
</ul>
</body>
</html>
removeClass() 方法从被选元素移除一个或多个类。
案例(2)
<html>
<head>
<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript">
//removeClass() 方法从被选元素移除一个或多个类
$(document).ready(function(){
$("button").click(function(){
$('ul li').removeClass(function() {
return 'listitem_' + $(this).index();
});
});
});
</script>
<style type="text/css">
.listitem_1
{
color:red;
}
.listitem_0
{
color:blue;
}
</style>
</head>
<body>
<h1 id="h1">This is a heading</h1>
<ul>
<li class="listitem_0">Apple</li>
<li class="listitem_1">IBM</li>
</ul>
<button>删除列表项中的类</button>
</body>
</html>
案例(2)<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").removeClass("intro");
});
});
</script>
<style type="text/css">
.intro
{
font-size:120%;
color:red;
}
</style>
</head>
<body>
<h1 id="h1">This is a heading</h1>
<p class="intro">This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>从第一个段落中删除类</button>
</body>
</html>
jquery change()方法
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".field").change(function(){
$(this).css("background-color","#FFFFCC");
});
$("button").click(function(){
$("input").change();
});
});
</script>
</head>
<body>
<button>激活文本域的 change 事件</button>
<p>Enter your name: <input class="field" type="text" /></p>
</body>
</html>
jquery removeAttr() 方法从被选元素中移除属性
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").removeAttr("style");
});
});
</script>
</head>
<body>
<h1>这是一个标题</h1>
<p style="font-size:120%;color:red">这是一个段落。</p>
<p>这是另一个段落。</p>
<button>删除所有 p 元素的 style 属性</button>
</body>
</html>
jquery submit()方法
当提交表单时,会发生 submit 事件。
该事件只适用于表单元素。
submit() 方法触发 submit 事件,或规定当发生 submit 事件时运行的函数。
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("form").submit(function(e){
e.preventDefault();
alert("Submit prevented");
});
});
</script>
</head>
<body>
<form name="input" action="" method="get">
First name:
<input type="text" name="FirstName" value="Mickey" size="20">
<br />Last name:
<input type="text" name="LastName" value="Mouse" size="20">
<br />
<input type="submit" value="Submit">
</form>
</body>
</html>