前端之 JQuery
一.基本选择器
1.#id
概述:
根据给定的ID匹配一个元素。
使用任何的元字符(如 !"#$%&'()*+,./:;<=>?@[\]^`{|}~)作为名称的文本部分, 它必须被两个反斜杠转义:\\。 参见示例。
参数id:
用于搜索的,通过元素的 id 属性中给定的值
需求:
查找 ID 为"myDiv"的元素。
实例:
HTML 代码:
<div id="notMe"><p>id="notMe"</p></div>
<div id="myDiv">id="myDiv"</div>
jQuery 代码:
$("#myDiv");
结果:
[ <div id="myDiv">id="myDiv"</div> ]
2.element
概述:
根据给定的元素标签名匹配所有元素
参数element:
一个用于搜索的元素。指向 DOM 节点的标签名。
需求:
查找一个 DIV 元素。
实例:
HTML 代码:
<div>DIV1</div>
<div>DIV2</div>
<span>SPAN</span>
jQuery 代码:
$("div");
结果:
[ <div>DIV1</div>, <div>DIV2</div> ]
3.class
概述:
根据给定的css类名匹配元素。
参数class:
一个用以搜索的类。一个元素可以有多个类,只要有一个符合就能被匹配到。
需求:
查找所有类是 "myClass" 的元素.
实例:
HTML 代码:
<div class="notMe">div class="notMe"</div>
<div class="myClass">div class="myClass"</div>
<span class="myClass">span class="myClass"</span>
jQuery 代码:
$(".myClass");
结果:
[ <div class="myClass">div class="myClass"</div>, <span class="myClass">span class="myClass"</span> ]
4.*
概述:
匹配所有元素
多用于结合上下文来搜索。
需求:
找到每一个元素
实例:
HTML 代码:
<div>DIV</div>
<span>SPAN</span>
<p>P</p>
jQuery 代码:
$("*")
结果:
[ <div>DIV</div>, <span>SPAN</span>, <p>P</p> ]
5.selector1,selector2,selectorN
概述:
将每一个选择器匹配到的元素合并后一起返回。
你可以指定任意多个选择器,并将匹配到的元素合并到一个结果内。
参数:
制定多个select选择器
需求:
找到匹配任意一个类的元素
实例:
HTML 代码:
<div>div</div>
<p class="myClass">p class="myClass"</p>
<span>span</span>
<p class="notMyClass">p class="notMyClass"</p>
jQuery 代码:
$("div,span,p.myClass")
结果:
[ <div>div</div>, <p class="myClass">p class="myClass"</p>, <span>span</span> ]
二.层级选择器
1.ancestor descendant
概述:
在给定的祖先元素下匹配所有的后代元素
参数:
ancestor:任何有效选择器
descendant:用以匹配元素的选择器,并且它是第一个选择器的后代元素
需求:
找到表单中所有的 input 元素
实例:
HTML 代码:
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
jQuery 代码:
$("form input")
结果:
[ <input name="name" />, <input name="newsletter" /> ]
2.parent > child
概述:
在给定的父元素下匹配所有的子元素
参数:
parent :任何有效选择器 child :用以匹配元素的选择器,并且它是第一个选择器的子元素
需求:
匹配表单中所有的子级input元素。
实例:
HTML 代码:
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
jQuery 代码:
$("form > input")
结果:
[ <input name="name" /> ]
3.prev ~ siblings
概述:
匹配 prev 元素之后的所有 siblings 元素
参数:
pre: 任何有效选择器 siblings:一个选择器,并且它作为第一个选择器的同辈
需求:
找到所有与表单同辈的 input 元素
实例:
HTML 代码:
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
jQuery 代码:
$("form ~ input")
结果:
[ <input name="none" /> ]
三.筛选器
1.children([expr])
概述:
取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。
可以通过可选的表达式来过滤所匹配的子元素。注意:parents()将查找所有祖辈元素,而children()只考虑子元素而不考虑所有后代元素。
参数:
用以过滤子元素的表达式
需求:
查找DIV中的每个子元素。
实例1:
HTML 代码:
<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>
jQuery 代码:
$("div").children()
结果:
[ <span>Hello Again</span> ]
实例2:
需求:在每个div中查找 .selected 的类
HTML 代码:
<div><span>Hello</span><p class="selected">Hello Again</p><p>And Again</p></div>
jQuery 代码:
$("div").children(".selected")
结果:
[ <p class="selected">Hello Again</p> ]
2.next([expr])
概述:
取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。
这个函数只返回后面那个紧邻的同辈元素,而不是后面所有的同辈元素(可以使用nextAll)。可以用一个可选的表达式进行筛选。
参数:
用于筛选的表达式
需求:
找到每个段落的后面紧邻的同辈元素。
实例1:
HTML 代码:
<p>Hello</p><p>Hello Again</p><div><span>And Again</span></div>
jQuery 代码:
$("p").next()
结果:
[ <p>Hello Again</p>, <div><span>And Again</span></div> ]
实例2:
需求:找到每个段落的后面紧邻的同辈元素中类名为selected的元素。
HTML 代码:
<p>Hello</p><p class="selected">Hello Again</p><div><span>And Again</span></div>
jQuery 代码:
$("p").next(".selected")
结果:
[ <p class="selected">Hello Again</p> ]
3.nextAll([expr])
概述:
查找当前元素之后所有的同辈元素。
可以用表达式过滤
参数:
用来过滤的表达式
需求:
给第一个div之后的所有元素加个类
实例1:
HTML 代码:
<div></div><div></div><div></div><div></div>
jQuery 代码:
$("div:first").nextAll().addClass("after");
结果:
[ <div class="after"></div>, <div class="after"></div>, <div class="after"></div> ]
4. parent([expr])
概述:
取得一个包含着所有匹配元素的唯一父元素的元素集合。
你可以使用可选的表达式来筛选。
参数:
用来筛选的表达式
需求:
查找每个段落的父元素
实例1:
HTML 代码:
<div><p>Hello</p><p>Hello</p></div>
jQuery 代码:
$("p").parent()
结果:
[ <div><p>Hello</p><p>Hello</p></div>]
实例2:
需求:
查找段落的父元素中每个类名为selected的父元素。
HTML 代码:
<div><p>Hello</p></div><div class="selected"><p>Hello Again</p></div>
jQuery 代码:
$("p").parent(".selected")
结果:
[ <div class="selected"><p>Hello Again</p></div> ]
5.prev([expr])
概述:
取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。
可以用一个可选的表达式进行筛选。只有紧邻的同辈元素会被匹配到,而不是前面所有的同辈元素。
参数:
用于筛选前一个同辈元素的表达式
需求:
找到每个段落紧邻的前一个同辈元素。
实例1:
HTML 代码:
<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>
jQuery 代码:
$("p").prev()
结果:
[ <div><span>Hello Again</span></div> ]
实例2:
需求:
找到每个段落紧邻的前一个同辈元素中类名为selected的元素。
HTML 代码:
<div><span>Hello</span></div><p class="selected">Hello Again</p><p>And Again</p>
jQuery 代码:
$("p").prev(".selected")
结果:
[ <p class="selected">Hello Again</p> ]
6.prevall([expr])
概述:
查找当前元素之前所有的同辈元素
可以用表达式过滤。
参数:
用于过滤的表达式
需求:
给最后一个之前的所有div加上一个类
实例1:
HTML 代码:
<div></div><div></div><div></div><div></div>
jQuery 代码:
$("div:last").prevAll().addClass("before");
结果:
[ <div class="before"></div>, <div class="before"></div>, <div class="before"></div> ]
四.属性
prop(n|p|k,v|f)
概述:
获取在匹配的元素集中的第一个元素的属性值。
随着一些内置属性的DOM元素或window对象,如果试图将删除该属性,浏览器可能会产生错误。jQuery第一次分配undefined值的属性,而忽略了浏览器生成的任何错误
参数:
name: 属性名称
选中复选框为true,没选中为false
$("input[type='checkbox']").prop("checked");
properties:作为属性的“名/值对”对象
禁用页面上的所有复选框。
$("input[type='checkbox']").prop({
disabled: true
});
key,vale:属性名称,属性值
禁用和选中所有页面上的复选框。
$("input[type='checkbox']").prop("disabled", false);
$("input[type='checkbox']").prop("checked", true);
key,function(index,attr):
通过函数来设置所有页面上的复选框被选中.
$("input[type='checkbox']").prop("checked", function( i, val ) {
return !val;
});
1:属性名称。
2:返回属性值的函数,第一个参数为当前元素的索引值,第二个参数为原先的属性值。
5.JQuery CSS相关
1.css(name|pro|[,val|fn])
概述:
访问匹配元素的样式属性。
jQuery 1.8中,当你使用CSS属性在css()或animate()中,我们将根据浏览器自动加上前缀(在适当的时候),比如("user-select", "none"); 在Chrome/Safari浏览器中我们将设置为"-webkit-user-select", Firefox会使用"-moz-user-select", IE10将使用"-ms-user-select".
参数:
name:要访问的属性名称 或 一个或多个CSS属性组成的一个数组
取得第一个段落的color样式属性的值。
$("p").css("color");
properties:要设置为样式属性的名/值对
将所有段落的字体颜色设为红色并且背景为蓝色。
$("p").css({ "color": "#ff0011", "background": "blue" });
name,value:属性名,属性值
将所有段落字体设为红色
$("p").css("color","red");
name,function(index,value):
1:属性名
2:此函数返回要设置的属性值。接受两个参数,index为元素在对象集合中的索引位置,value是原先的属性值。
$("div").click(function() {
$(this).css({
width: function(index, value) {
return parseFloat(value) * 1.2;
},
height: function(index, value) {
return parseFloat(value) * 1.2;
}
});
});
2.scrollTop([val])
概述:
获取匹配元素相对滚动条顶部的偏移。
此方法对可见和隐藏元素均有效。
参数:
val:设定垂直滚动条值
实例1:
HTML 代码:
<p>Hello</p><p>2nd Paragraph</p>
jQuery 代码:
无参数:获取第一段相对滚动条顶部的偏移
var p = $("p:first");
$("p:last").text( "scrollTop:" + p.scrollTop() );
有参数val:设置相对滚动条顶部的偏移
$("div.demo").scrollTop(300);
结果:
<p>Hello</p><p>scrollTop: 0</p>
6.文档处理
1. 内部插入:append(content|fn):
概述:
向每个匹配的元素内部追加内容。
这个操作与对指定的元素执行appendChild方法,将它们添加到文档中的情况类似。
参数:
content:要追加到目标中的内容
function(index,html):返回一个HTML字符串,用于追加到每一个匹配元素的里边。接受两个参数,index参数为对象在这个集合中的索引值,html参数为这个对象原先的html值。
实例1:
需求:
向所有段落中追加一些HTML标记。
HTML 代码:
<p>I would like to say: </p>
jQuery 代码:
$("p").append("<b>Hello</b>");
结果:
[ <p>I would like to say: <b>Hello</b></p> ]
2.删除
1)empty()
概述:删除匹配的元素集合中所有的子节点。
实例1:
需求:
把所有段落的子元素(包括文本节点)删除
HTML 代码:
<p>Hello, <span>Person</span> <a href="#">and person</a></p>
jQuery 代码:
$("p").empty();
结果:
<p></p>
2) remove([expr])
概述:
从DOM中删除所有匹配的元素。
这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外,其他的比如绑定的事件,附加的数据等都会被移除。
参数:
用于筛选元素的jQuery表达式
实例1:
需求:从DOM中把所有段落删除
HTML 代码:
<p>Hello</p> how are <p>you?</p>
jQuery 代码:
$("p").remove();
结果:
how are
实例2:
需求:从DOM中把带有hello类的段落删除
HTML 代码:
<p class="hello">Hello</p> how are <p>you?</p>
jQuery 代码:
$("p").remove(".hello");
结果:
how are <p>you?</p>
前端之 JQuery的更多相关文章
- 前端之jquery
前端之jquery 本节内容 jquery简介 选择器和筛选器 操作元素 示例 1. jquery简介 1 jquery是什么 jQuery由美国人John Resig创建,至今已吸引了来自世界各地的 ...
- 第四篇:web之前端之jquery
前端之jquery 前端之jquery 本节内容 jquery简介 选择器和筛选器 操作元素 示例 1. jquery简介 1 jquery是什么 jQuery由美国人John Resig创建,至 ...
- 【前端】:jQuery下
前言: 接上一篇博客: [前端]:jQuery上 一.jQuery属性操作 ① attr(设置或返回自定义属性值) input.select.textarea框中的内容, 可以通过attr来获取,但是 ...
- 【转】jQuery之前端国际化jQuery.i18n.properties
jQuery之前端国际化jQuery.i18n.properties 基于jQuery.i18n.properties 实现前端页面的资源国际化 jquery-i18n-properties
- 前端:jQuery笔记
前端:jQuery笔记 此系列文章乃是学习jQuery的学习笔记. Asp.net MVC Comet推送 摘要: 一.简介 在Asp.net MVC实现的Comet推送的原理很简单. 服务器端:接收 ...
- Python web前端 09 jQuery
Python web前端 09 jQuery 一.三个重要网址 http://jquery.cuishifeng.cn/ #中文查询网站 http://www.bootcdn.cn/ #引入jq ht ...
- 前端技术Jquery与Ajax使用总结
前端技术Jquery与Ajax使用总结 虽然主要是做的后端,但是由于有些时候也要写写前台的界面,因此也就学习了下Jquery和Ajax的一些知识,虽说此次写的这些对于前端大神来说有些班门弄斧的感觉,但 ...
- Golang 谷歌搜索api 实现搜索引擎(前端 bootstrap + jquery)
Golang 谷歌搜索api 实现搜索引擎(前端 bootstrap + jquery) 体验 冒号搜索 1. 获取谷歌搜索api 谷歌搜索api教程 2. 后台调用 程序入口 main.go // ...
- 第五章、前端之JQuery
目录 第五章.前端之JQuery 一.选择器 二.基本筛选器 三.样式操作 四.位置操作 五.文本操作 六.属性操作 七.文档处理 八.事件 九.动画效果 十.补充 第五章.前端之JQuery 一.选 ...
- 前端09 /jQuery标签操作、事件、补充
前端09 /jQuery标签操作.事件.补充 目录 前端09 /jQuery标签操作.事件.补充 1.标签内文本操作 1.1 html标签元素中的所有内容 1.2 text 标签元素的文本内容 2.文 ...
随机推荐
- UI-10-plist文件及UITableView的高级应用①
课程要点: plist文件的新建与读取 给UITableView设置变化的值 单元格的删除.插入及刷新 plist文件的新建与读取 新建plist Commadn+N,iOS->Resouce- ...
- makefile使用注意点
1. 小心空格 变量赋值a:= b, 不会将b前面的空格赋值给a 大部分函数调用,特别是$(call func, param) 如果参数前面有空格,则会将空格连同参数一起传入.因此要特别小心. 使 ...
- typescript 接口的新认识
interface 用于接收服务器的数据. eg: interface mmmmm { x: string, y: number, z: number, select: KnockoutObserva ...
- hdu 4272 LianLianKan 状态压缩
LianLianKan Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Tot ...
- Java进阶03 IO基础(转载)
IO示例 下面是演示的文件file.txt Hello World! Hello Nerd! 先来研究一个文件读取的例子: import java.io.*;public class Test{ pu ...
- Tomcat (7.0)数据源配置
在Tomcat这个Java Web容器下通过配置DataSource(数据源)对象能够解决上面所述的问题. JDBC中的javx.sql.DataSource接口负责建立于数据库的连接.程序中直接从数 ...
- vivo 手机的USB调试功能
- Gmail 邮件配置备忘
1.smtp端口号不是默认的25,smtp的是587 2.必须设置“允许使用不够安全的应用” 其他的按照网上文档设置就好了
- C++STL容器(lower_bound,upper_bound)
C++STL容器中有三种二分查找函数,这里分享其中的两个 这两个函数其实都可以理解为不破坏数组次序的前期下能将目标元素插入到数组的第几个位置,不过在细节上两个函数有所差异 int d[6]={0,2, ...
- E - Rails (栈)
E - Rails Time Limit:3000MS Memory Limit:0KB 64bit IO Format:%lld & %llu Description The ...