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 相关文章推荐
jquery1.4后 jqDrag 拖动 不可用
Feb 06 Javascript
JavaScript调用后台的三种方法实例
Oct 17 Javascript
把字符串按照特定的字母顺序进行排序的js代码
Jan 28 Javascript
JS批量替换内容中关键词为超链接
Feb 20 Javascript
mui 打开新窗口的方式总结及注意事项
Aug 20 Javascript
DVA框架统一处理所有页面的loading状态
Aug 25 Javascript
5分钟学会Vue动画效果(小结)
Jul 21 Javascript
vue中使用echarts制作圆环图的实例代码
Jul 27 Javascript
vue自动路由-单页面项目(非build时构建)
Apr 30 Javascript
用js简单提供增删改查接口
May 12 Javascript
详解无限滚动插件vue-infinite-scroll源码解析
May 12 Javascript
node.js使用zlib模块进行数据压缩和解压操作示例
Feb 12 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
全国FM电台频率大全 - 13 福建省
2020/03/11 无线电
MySQL数据源表结构图示
2008/06/05 PHP
php class类的用法详细总结
2013/10/17 PHP
destoon整合UCenter图文教程
2014/06/21 PHP
Thinkphp5框架中引入Markdown编辑器操作示例
2020/06/03 PHP
Javascript 判断 object 的特定类转载
2007/02/01 Javascript
Tab切换组件(选项卡功能)实例代码
2013/11/21 Javascript
微信小程序 地图定位简单实例
2016/10/14 Javascript
微信小程序实现图片预加载组件
2017/01/18 Javascript
微信小程序之前台循环数据绑定
2017/08/18 Javascript
浅谈Angular路由守卫
2017/08/26 Javascript
使用vue-resource进行数据交互的实例
2017/09/02 Javascript
vue2.0在没有dev-server.js下的本地数据配置方法
2018/02/23 Javascript
Vue+Element实现动态生成新表单并添加验证功能
2019/05/23 Javascript
Vue.js如何使用Socket.IO的示例代码
2019/09/05 Javascript
[25:59]Newbee vs TNC 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python基础教程之匿名函数lambda
2017/01/17 Python
django站点管理详解
2017/12/12 Python
python+selenium实现163邮箱自动登陆的方法
2017/12/31 Python
微信跳一跳python自动代码解读1.0
2018/01/12 Python
Python matplotlib的使用并自定义colormap的方法
2018/12/13 Python
python 实现turtle画图并导出图片格式的文件
2019/12/07 Python
Python cookie的保存与读取、SSL讲解
2020/02/17 Python
CSS3 :default伪类选择器使用简介
2018/03/15 HTML / CSS
localstorage和sessionstorage使用记录(推荐)
2017/05/23 HTML / CSS
Diamondback自行车:拥有你的冒险
2019/04/22 全球购物
英文商务邀请信
2014/01/22 职场文书
什么样的创业计划书可行性高?
2014/02/01 职场文书
酒店值班经理的工作职责范本
2014/02/18 职场文书
安全教育实施方案
2014/03/02 职场文书
自我鉴定书
2014/03/24 职场文书
销售团队口号大全
2014/06/06 职场文书
Python中使用ipython的详细教程
2021/06/22 Python
mysql 乱码 字符集latin1转UTF8
2022/04/19 MySQL
阿里云 Windows server 2019 配置FTP
2022/04/28 Servers
阿里面试Nacos配置中心交互模型是push还是pull原理解析
2022/07/23 Java/Android