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

<p>one</p>
<div>
<p>two</p>
</div>
<p>three</p>
<a 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>
<a 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前:

<form id="form1">
<input type="text" name="textfield">
<input type="submit" name="Submit" value="提交">
</form>
<a 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>
<a 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"/>
<a 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前:

<p>This is just a test.</p>
<p>So is this</p>
<a 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>
<a 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>
<a 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"/>
<a href="#" id="test" onClick="jq()">jQuery</a>

jQuery代码及功能:

function jq(){
alert($("img").length);
}

运行:当点击id为test的元素时,弹出alert对话框显示2,表示找到两个匹配对象。

jQuery 使用手册(一)的更多相关文章

  1. jQuery 参考手册 - 遍历

    jQuery 参考手册 - 遍历 jQuery Ajax jQuery 数据 jQuery 遍历函数 jQuery 遍历函数包括了用于筛选.查找和串联元素的方法. 函数描述 .add()将元素添加到匹 ...

  2. jquery在线手册

    开发时用到jquery,有几个函数想不起来怎么用,找了一下jquery在线手册. 记录一下,下回有需要再看看. 链接:http://www.chenfahui.cn/jq/

  3. jQuery 效果函数,jquery文档操作,jQuery属性操作方法,jQuerycss操作函数,jQuery参考手册-事件,jQuery选择器

    jQuery 效果函数 方法 描述 animate() 对被选元素应用“自定义”的动画 clearQueue() 对被选元素移除所有排队的函数(仍未运行的) delay() 对被选元素的所有排队函数( ...

  4. jQuery选择器手册

    jQuery选择器手册 选择器 实例 选取 * $("*") 所有元素 #id $("#lastname") id="lastname" 的 ...

  5. jQuery formValidator手册

    什么是jQuery formValidator? jQuery formValidator表单验证插件是客户端表单验证插件. 在做B/S开发的时候,我们经常涉及到很多表单验证,例如新用户注册,填写个人 ...

  6. jQuery 参考手册 - 事件

    事件方法会触发匹配元素的事件,或将函数绑定到所有匹配元素的某个事件. bind()向匹配元素附加一个或更多事件处理器 $(selector).bind(event,function) $(select ...

  7. jquery参考手册

    开始使用 jQueryjQuery 本身只有一个 js 文件,所以,要使用它,就和使用其它的 js 文件一样,直接将它引入就可以使用了. <script type="text/java ...

  8. jQuery 参考手册 - 选择器

    jQuery 选择器 选择器 实例 选取 * $("*") 所有元素 #id $("#lastname") id="lastname" 的元 ...

  9. jQuery使用手册,【新手必备】

    jQuery是一款同prototype一样优秀js开发库类,特别是对css和XPath的支持,使我们写js变得更加方便!如果你不是个js高手又想写出优 秀的js效果,jQuery可以帮你达到目的!   ...

  10. JQuery事件手册

    blur.focus     blur失去焦点:focus获得焦点 load 当指定的元素(及子元素)已加载时,会发生 load() 事件 resize 当调整浏览器窗口的大小时,发生 resize ...

随机推荐

  1. 关于pytest生成测试报告

    之前用pytest集成allure,记录的很清楚确实很好,但是我不知道怎么把生成的所有结果通过邮箱发送 可以使用pytest-html生成的html是这样的 也很清楚 但是!!!!!!!!!!!!!! ...

  2. JavaSE——构造方法

    package com.zhao.test3; public class Student { private String name; private int age; //如果我们自己没有写任何的构 ...

  3. docker部署rocketmq

    docker pull foxiswho/rocketmq:server-4.7.0  (拉取镜像) docker pull foxiswho/rocketmq:broker-4.7.0 (拉取镜像) ...

  4. win10 系统修复IE11方法

    我也是手贱卸载了IE11,启用或关闭Windows功能里也没有Internet Explorer 11,今天意外发现了解决办法. 设置--应用--应用和功能--管理可选功能--添加功能--Intern ...

  5. TCP和UDP协议之间的区别与原理

    一.TCP和UDP协议之间的区别 TCP是基于连接的,而UDP是基于非连接的. TCP传输数据稳定可靠,适用于对网络通讯质量要求较高的场景,需要准确无误的传输给对方,比如,传输文件,发送邮件,浏览网页 ...

  6. keeplive 双击热备方案 (对haproxy负载均衡 )双击热备方案

    1.安装 keepalived ,必选安装在haproxy 容器之内 1.进入容器:docker exec  -it   h1 bash 后执行下面步骤 1.更新apt-get apt-get upd ...

  7. Neural Network模型复杂度之Weight Decay - Python实现

    背景介绍Neural Network之模型复杂度主要取决于优化参数个数与参数变化范围. 优化参数个数可手动调节, 参数变化范围可通过正则化技术加以限制. 正则化技术之含义是: 引入额外的条件, 对fu ...

  8. sql语句查询优化

    SQL 性能优化 explain 中的 type:至少要达到 range 级别,要求是 ref 级别,如果可以是 consts 最好. consts:单表中最多只有一个匹配行(主键或者唯一索引),在优 ...

  9. sqlalchemy+pandas:错误 'OptionEngine' object has no attribute 'execute','str' object has no attribute '_execute_on_connection'

    场景:使用 sqlalchemy+pandas 1.  'OptionEngine' object has no attribute 'execute' import pandas as pd fro ...

  10. js中,作用域与作用域链的概念

    1 作用域 声明的一个变量只在一段代码范围内是有效的,并不是总有效的.例如 : function father(){ // 声明变量 var val = "作用域内"; // 定义 ...