源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

jQuery 使用手册(一)

  • 时间:2020-06-08 22:07 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:jQuery 使用手册(一)
[b]一:核心部分 [/b][b]$(expr) [/b]说明:该函数可以通过css选择器,Xpath或html代码来匹配目标元素,所有的jQuery操作都以此为基础 参数:expr:字符串,一个查询表达式或一段html字符串 [b]例子:[/b] 未执行jQuery前:
[img]http://www.cnblogs.com/Images/OutliningIndicators/None.gif[/img] <p>one</p> [img]http://www.cnblogs.com/Images/OutliningIndicators/None.gif[/img] <div> [img]http://www.cnblogs.com/Images/OutliningIndicators/None.gif[/img]       <p>two</p> [img]http://www.cnblogs.com/Images/OutliningIndicators/None.gif[/img] </div>     <p>three</p>      <href="#" id="test" onClick="jq()" >jQuery</a>
jQuery代码及功能:
function jq(){       alert($("div > p").html());   }
运行:当点击id为test的元素时,弹出对话框文字为two,即div标签下p元素的内容
function jq(){     $("<div><p>Hello</p></div>").appendTo("body"); }
运行:当点击id为test的元素时,向body中添加“<div><p>Hello</p></div>” $(elem) 说明:限制jQuery作用于一个特定的dom元素,这个函数也接受xml文档和windows对象 参数: elem:通过jQuery对象压缩的DOM元素 例子: 未执行jQuery前:
<p>one</p>   <div>      <p>two</p>   </div><p>three</p> <href="#" id="test" onClick="jq()">jQuery</a>
jQuery代码及功能:
function jq(){     alert($(document).find("div > p").html()); }
运行:当点击id为test的元素时,弹出对话框文字为two,即div标签下p元素的内容
function jq(){    $(document.body).background("black"); }
运行:当点击id为test的元素时,背景色变成黑色 $(elems) 说明:限制jQuery作用于一组特定的DOM元素 参数: elem:一组通过jQuery对象压缩的DOM元素 例子: 未执行jQuery前:
[img]http://www.cnblogs.com/Images/OutliningIndicators/None.gif[/img] <form id="form1"> [img]http://www.cnblogs.com/Images/OutliningIndicators/None.gif[/img]       <input type="text" name="textfield"> [img]http://www.cnblogs.com/Images/OutliningIndicators/None.gif[/img]       <input type="submit" name="Submit" value="提交"> [img]http://www.cnblogs.com/Images/OutliningIndicators/None.gif[/img] </form> [img]http://www.cnblogs.com/Images/OutliningIndicators/None.gif[/img] <href="#" id="test" onClick="jq()">jQuery</a>
jQuery代码及功能:
function jq(){     $(form1.elements ).hide();  }
运行:当点击id为test的元素时,隐藏form1表单中的所有元素。 $(fn) 说明:$(document).ready()的一个速记方式,当文档全部载入时执行函数。可以有多个$(fn)当文档载入时,同时执行所有函数! 参数:fn (Function):当文档载入时执行的函数! 例子:
$( function(){     $(document.body).background("black"); })
运行:当文档载入时背景变成黑色,相当于onLoad。 $(obj) 说明:复制一个jQuery对象, 参数:obj (jQuery): 要复制的jQuery对象 例子: 未执行jQuery前:
<p>one</p> <div>    <p>two</p> </div> <p>three</p> <href="#" id="test" onClick="jq()">jQuery</a>
jQuery代码及功能:
function jq(){     var f = $("div");      alert($(f).find("p").html())  }
运行:当点击id为test的元素时,弹出对话框文字为two,即div标签下p元素的内容。 each(fn) 说明:将函数作用于所有匹配的对象上 参数:fn (Function): 需要执行的函数 例子: 未执行jQuery前:
<img src="1.jpg"/> <img src="1.jpg"/> <href="#" id="test" onClick="jq()">jQuery</a>
jQuery代码及功能:
function jq(){    $("img").each(function(){          this.src = "2.jpg"; }); }
运行:当点击id为test的元素时,img标签的src都变成了2.jpg。 eq(pos) 说明:减少匹配对象到一个单独得dom元素 参数:pos (Number): 期望限制的索引,从0 开始 例子: 未执行jQuery前:
[img]http://www.cnblogs.com/Images/OutliningIndicators/None.gif[/img] <p>This is just a test.</p> [img]http://www.cnblogs.com/Images/OutliningIndicators/None.gif[/img] <p>So is this</p> [img]http://www.cnblogs.com/Images/OutliningIndicators/None.gif[/img] <href="#" id="test" onClick="jq()">jQuery</a>
jQuery代码及功能:
function jq(){     alert($("p").eq(1).html()) }
运行:当点击id为test的元素时,alert对话框显示:So is this,即第二个<p>标签的内容 get() get(num) 说明:获取匹配元素,get(num)返回匹配元素中的某一个元素 参数:get (Number): 期望限制的索引,从0 开始 例子: 未执行jQuery前:
<p>This is just a test.</p> <p>So is this</p> <href="#" id="test" onClick="jq()">jQuery</a>
jQuery代码及功能:
function jq(){     alert($("p").get(1).innerHTML); }
运行:当点击id为test的元素时,alert对话框显示:So is this,即第二个<p>标签的内容 [b]注意get和eq的区别,eq返回的是jQuery对象,get返回的是所匹配的dom对象,所有取$("p").eq(1)对象的内容用jQuery方法html(),而取$("p").get(1)的内容用innerHTML [/b] index(obj) 说明:返回对象索引 参数:obj (Object): 要查找的对象 例子: 未执行jQuery前:
<div id="test1"></div> <div id="test2"></div> <href="#" id="test" onClick="jq()">jQuery</a>
jQuery代码及功能:
function jq(){     alert($("div").index(document.getElementById('test1')));     alert($("div").index(document.getElementById('test2'))); }
运行:当点击id为test的元素时,两次弹出alert对话框分别显示0,1 size()   Length 说明:当前匹配对象的数量,两者等价 例子: 未执行jQuery前:
<img src="test1.jpg"/> <img src="test2.jpg"/> <href="#" id="test" onClick="jq()">jQuery</a>
jQuery代码及功能:
function jq(){     alert($("img").length); }
运行:当点击id为test的元素时,弹出alert对话框显示2,表示找到两个匹配对象 
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部