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 相关文章推荐
自写简单JS判断是否已经弹出页面
Oct 20 Javascript
基于jquery的仿百度搜索框效果代码
Apr 11 Javascript
常用的几段javascript代码分享
Mar 25 Javascript
理解AngularJs指令
Dec 10 Javascript
Angularjs实现多个页面共享数据的方式
Mar 29 Javascript
JS表单验证方法实例小结【电话、身份证号、Email、中文、特殊字符、身份证号等】
Feb 14 Javascript
Vue条件循环判断+计算属性+绑定样式v-bind的实例
Sep 18 Javascript
利用JS响应式修改vue实现页面的input值
Sep 02 Javascript
微信小程序日历插件代码实例
Dec 04 Javascript
微信小程序激励式视频广告组件使用详解
Dec 06 Javascript
使用JavaScript获取扫码枪扫描得到的条形码的思路代码详解
Jun 10 Javascript
JavaScript实现与web通信的方法详解
Aug 07 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
如何把php5.3版本升级到php5.4或者php5.5
2015/07/31 PHP
php+ajax 实现输入读取数据库显示匹配信息
2015/10/08 PHP
给WordPress的编辑后台添加提示框的代码实例分享
2015/12/25 PHP
PHP使用curl模拟post上传及接收文件的方法
2016/03/04 PHP
PHP终止脚本运行三种实现方法详解
2020/09/01 PHP
javascript+dom树型菜单类,希望朋友们一起进步
2007/05/03 Javascript
跟着JQuery API学Jquery 之三 筛选
2010/04/09 Javascript
javascript 快速排序函数代码
2012/05/30 Javascript
js 连接数据库如何操作数据库中的数据
2012/11/23 Javascript
原生js事件的添加和删除的封装
2014/07/01 Javascript
javascript函数特点实例分析
2015/05/14 Javascript
分享jQuery插件的学习笔记
2016/01/14 Javascript
EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)
2016/02/21 Javascript
JS实现图片局部放大或缩小的方法
2016/08/20 Javascript
基于canvas的二维码邀请函生成插件
2017/02/14 Javascript
javaScript+turn.js实现图书翻页效果实例代码
2017/02/16 Javascript
jquery实现左右轮播图效果
2017/09/28 jQuery
vue分页插件的使用方法
2019/12/25 Javascript
在react中使用vue的状态管理的方法示例
2020/05/02 Javascript
Python实现的多线程端口扫描工具分享
2015/01/21 Python
python实现按行切分文本文件的方法
2016/04/18 Python
Windows环境下python环境安装使用图文教程
2018/03/13 Python
深入浅析Python的类
2018/06/22 Python
pandas.DataFrame选取/排除特定行的方法
2018/07/03 Python
python样条插值的实现代码
2018/12/17 Python
使用Python 统计高频字数的方法
2019/01/31 Python
Python面向对象程序设计多继承和多态用法示例
2019/04/08 Python
从多个tfrecord文件中无限读取文件的例子
2020/02/17 Python
Python中常用的高阶函数实例详解
2020/02/21 Python
实例讲解CSS3中的box-flex弹性盒属性布局
2016/06/09 HTML / CSS
Crabtree & Evelyn英国官网:瑰珀翠护手霜、香水、沐浴和身体护理
2018/04/26 全球购物
C/C++有关内存的思考题
2015/12/04 面试题
半年思想汇报
2013/12/30 职场文书
KTV门卫岗位职责
2014/10/09 职场文书
2016年3月份红领巾广播稿
2015/12/21 职场文书
导游词之南昌滕王阁
2019/11/29 职场文书