jQuery 使用手册(一)


Posted in Javascript onSeptember 23, 2009

一:核心部分
$(expr)
说明:该函数可以通过css选择器,Xpath或html代码来匹配目标元素,所有的jQuery操作都以此为基础
参数:expr:字符串,一个查询表达式或一段html字符串
例子:
未执行jQuery前:

jQuery 使用手册(一)<p>one</p>
jQuery 使用手册(一)
<div>
jQuery 使用手册(一)     
<p>two</p>
jQuery 使用手册(一)
</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前:

jQuery 使用手册(一)<form id="form1">
jQuery 使用手册(一)     
<input type="text" name="textfield">
jQuery 使用手册(一)     
<input type="submit" name="Submit" value="提交">
jQuery 使用手册(一)
</form>
jQuery 使用手册(一)
<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前:

jQuery 使用手册(一)<p>This is just a test.</p>
jQuery 使用手册(一)
<p>So is this</p>
jQuery 使用手册(一)
<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>标签的内容
注意get和eq的区别,eq返回的是jQuery对象,get返回的是所匹配的dom对象,所有取$("p").eq(1)对象的内容用jQuery方法html(),而取$("p").get(1)的内容用innerHTML

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,表示找到两个匹配对象 

Javascript 相关文章推荐
IE中直接运行显示当前网页中的图片 推荐
Aug 31 Javascript
初学JavaScript第二章
Sep 30 Javascript
PPK 谈 JavaScript 的 this 关键字 [翻译]
Sep 29 Javascript
javascript 10进制和62进制的相互转换
Jul 31 Javascript
JS实现仿新浪微博发布内容为空时提示功能代码
Aug 19 Javascript
基于Arcgis for javascript实现百度地图ABCD marker的效果
Sep 12 Javascript
javascript实现仿百度图片的瀑布流加载效果
Apr 20 Javascript
json对象转为字符串,当做参数传递时加密解密的实现方法
Jun 29 Javascript
微信小程序 高德地图SDK详解及简单实例(源码下载)
Jan 11 Javascript
Vue中封装input组件的实例详解
Oct 17 Javascript
puppeteer库入门初探
Jan 09 Javascript
vue在响应头response中获取自定义headers操作
Jul 24 Javascript
JavaScript 变量命名规则
Sep 23 #Javascript
js 获取中文拼音,Select自动匹配字母获取值的代码
Sep 23 #Javascript
jquery ajax 登录验证实现代码
Sep 23 #Javascript
比较全面的event对像在IE与FF中的区别 推荐
Sep 21 #Javascript
javascript 必知必会之closure
Sep 21 #Javascript
用JavaScript隐藏控件的方法
Sep 21 #Javascript
jquery 子窗口操作父窗口的代码
Sep 21 #Javascript
You might like
PHP中strtr字符串替换用法详解
2014/11/26 PHP
php实现ip白名单黑名单功能
2015/03/12 PHP
深入Javascript函数、递归与闭包(执行环境、变量对象与作用域链)使用详解
2013/05/08 Javascript
图片Slider 带左右按钮的js示例
2013/08/30 Javascript
JS实现动态给图片添加边框的方法
2015/04/01 Javascript
jquery插件orbit.js实现图片折叠轮换特效
2015/04/14 Javascript
Vue.js实战之组件的进阶
2017/04/04 Javascript
微信小程序 地图map实例详解
2017/06/07 Javascript
Vue组件中的data必须是一个function的原因浅析
2018/09/03 Javascript
微信小程序的部署方法步骤
2018/09/04 Javascript
vue实现自定义日期组件功能的实例代码
2018/11/06 Javascript
angular使用md5,CryptoJS des加密的方法
2019/06/03 Javascript
VUE安装使用教程详解
2019/06/03 Javascript
5分钟快速看懂ES6中的反射与代理
2019/12/19 Javascript
JavaScript直接调用函数与call调用的区别实例分析
2020/05/22 Javascript
[05:02][DOTA2]DOTA进化论 第一期
2013/09/27 DOTA
Python中MYSQLdb出现乱码的解决方法
2014/10/11 Python
Python利用Beautiful Soup模块创建对象详解
2017/03/27 Python
Python入门学习指南分享
2018/04/11 Python
python模块导入的细节详解
2018/12/10 Python
浅谈python标准库--functools.partial
2019/03/13 Python
Python3.5基础之函数的定义与使用实例详解【参数、作用域、递归、重载等】
2019/04/26 Python
python中PS 图像调整算法原理之亮度调整
2019/06/28 Python
python如何给字典的键对应的值为字典项的字典赋值
2019/07/05 Python
Python Unittest原理及基本使用方法
2020/11/06 Python
详解CSS3 弹性布局快速入门
2019/06/06 HTML / CSS
幼儿教师培训感言
2014/03/08 职场文书
服务标语口号
2014/07/01 职场文书
公司合作意向书范文
2014/07/30 职场文书
2014年度党员自我评议
2014/09/13 职场文书
高等学院职业生涯规划书范文
2014/09/16 职场文书
单位一把手群众路线四风问题整改措施
2014/09/25 职场文书
作文评语集锦
2014/12/25 职场文书
考生诚信考试承诺书
2015/04/29 职场文书
2016秋季田径运动会广播稿
2015/12/21 职场文书
python中print格式化输出的问题
2021/04/16 Python