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 相关文章推荐
Jquery中使用setInterval和setTimeout的方法
Apr 08 Javascript
javascript实现页面内关键词高亮显示代码
Apr 03 Javascript
JavaScript获取网页中第一个图片id的方法
Apr 03 Javascript
JS给swf传参数的实现方法
Sep 13 Javascript
js html css实现复选框全选与反选
Oct 09 Javascript
深入理解Commonjs规范及Node模块实现
May 17 Javascript
Angular排序实例详解
Jun 28 Javascript
Vue实现virtual-dom的原理简析
Jul 10 Javascript
Vue.js中的图片引用路径的方式
Jul 28 Javascript
vue打包后显示空白正确处理方法
Nov 01 Javascript
基于layui table返回的值的多级嵌套的解决方法
Sep 19 Javascript
vue学习笔记之Vue中css动画原理简单示例
Feb 29 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 无限级分类,超级简单的无限级分类,支持输出树状图
2014/06/29 PHP
PHP魔术引号所带来的安全问题分析
2014/07/15 PHP
PHP类的反射用法实例
2014/11/03 PHP
Symfony页面的基本创建实例详解
2015/01/26 PHP
php实现网页缓存的工具类分享
2015/07/14 PHP
配置Nginx+PHP的正确思路与过程
2016/05/10 PHP
php魔法函数与魔法常量使用介绍
2017/07/23 PHP
Javascript 学习笔记 错误处理
2009/07/30 Javascript
JavaScript中提前声明变量或函数例子
2014/11/12 Javascript
node+express+jade制作简单网站指南
2014/11/26 Javascript
Angularjs制作简单的路由功能demo
2015/04/14 Javascript
浅谈NodeJS中require路径问题
2015/05/07 NodeJs
js获取当前日期时间及其它日期操作汇总
2016/03/08 Javascript
JS解析url查询参数的简单代码
2017/08/06 Javascript
vue watch自动检测数据变化实时渲染的方法
2018/01/16 Javascript
vue v-model实现自定义样式多选与单选功能
2018/07/05 Javascript
浅谈微信JS-SDK 微信分享接口开发(介绍版)
2018/08/15 Javascript
浅谈Angular 观察者模式理解
2018/11/01 Javascript
微信浏览器下拉黑边解决方案 wScroollFix
2020/01/21 Javascript
VUE实现Studio管理后台之鼠标拖放改变窗口大小
2020/03/04 Javascript
js中延迟加载和预加载的具体使用
2021/01/14 Javascript
jquery实现穿梭框功能
2021/01/19 jQuery
Python 内置函数进制转换的用法(十进制转二进制、八进制、十六进制)
2018/04/30 Python
Python基于多线程实现抓取数据存入数据库的方法
2018/06/22 Python
python实现n个数中选出m个数的方法
2018/11/13 Python
python实现拼接图片
2020/03/23 Python
构建高效的python requests长连接池详解
2020/05/02 Python
使用postMessage让 iframe自适应高度的方法示例
2019/10/08 HTML / CSS
工程师岗位职责
2013/11/08 职场文书
机械设计专业应届生求职信
2013/11/21 职场文书
幼儿园小班教学反思
2014/02/02 职场文书
实习报告评语
2014/04/26 职场文书
生物技术专业求职信
2014/06/10 职场文书
2015教师个人工作总结范文
2015/03/31 职场文书
优秀新员工事迹材料
2019/05/13 职场文书
python基础之类方法和静态方法
2021/10/24 Python