jQuery基础

来源：互联网发布：有没有在美迪学淘宝的编辑：程序博客网时间：2024/06/08 06:44

获得内容 - text()、html() 以及 val()
三个简单实用的用于 DOM 操作的 jQuery 方法：
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
下面的例子演示如何通过 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元素

2.隐藏所有标签为<p>的元素

3.隐藏id=""的元素

4.选择1不能编辑2，选择2不能编辑1

<html>
<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处理一维数组
  var arr1 = [ "aaa", "bbb", "ccc" ];      
  $.each(arr1, function(i,val){      
      alert(i);   
      alert(val);
  });   
alert(i)将输出0，1，2
alert(val)将输出aaa，bbb，ccc
 
 
each处理二维数组  
　　var arr2 = [['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']]      
　　$.each(arr, function(i, item){      
      alert(i);   
      alert(item);      
　　});  
arr2为一个二维数组，item相当于取这二维数组中的每一个数组。
item[0]相对于取每一个一维数组里的第一个值   
alert(i)将输出为0，1，2，因为这二维数组含有3个数组元素
alert(item)将输出为  ['a', 'aa', 'aaa']，['b', 'bb', 'bbb']，['c', 'cc', 'ccc']
addClass()方法
<html>
<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>
index()方法
index() 方法返回指定元素相对于其他指定元素的 index 位置。
这些元素可通过 jQuery 选择器或 DOM 元素来指定。
注释：如果未找到元素，index() 将返回 -1。
<html>
<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() 方法

removeClass() 方法从被选元素移除一个或多个类。

<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>