JQuery(选择器、事件、DOM操作)
一、jQuery简介
jQuery 是一个 JavaScript 库。
jQuery 极大地简化了 JavaScript 编程。
jQuery 库位于一个 JavaScript 文件中,其中包含了所有的 jQuery 函数。
$:jQuery标识符
二、jQuery选择器
1.基本选择器
①ID选择器:#
$("#div1").css("background-color", "red")
②class选择器:.
1 $(".div2").css("background-color", "red");
③标签选择器
$("div").css("background-color", "red");
④并列
$("#div1,#div2").css("background-color", "red"); //并列选择,用逗号隔开
⑤后代
$("#div1 a").css("background-color", "red"); //后代选择,用空格隔开
2、过滤选择器
(1)、基本过滤
①首个::first
$(".div:first").css("background-color", "red"); //取首个
②尾个::last
$(".div:last").css("background-color", "red"); //取最后一个
③任意个::eq(索引号)
$(".div:eq(2)").css("background-color", "red"); //取任意个, :eq(索引号) 或者$(".div").eq(2).css("background-color", "red");——重点
④大于::gt(索引号)
$(".div:gt(2)").css("background-color", "red"); //:gt(索引号),取大于该索引号的
⑤小于::lt(索引号)
$(".div:lt(2)").css("background-color", "red"); //:lt(索引号),取小于该索引号的
⑥排除::not(选择器)
$(".div:not(.div:eq(2))").css("background-color", "red"); //:not(“选择器”),排除这一个,选剩余的
⑦奇数:odd
$(".div:odd").css("background-color", "red"); //:odd,选索引为奇数的
⑧偶数:even
$(".div:even").css("background-color", "red"); //:even,选索引为偶数的
(2)、属性过滤
①属性名过滤:[属性名]
1 $(".div[he]").css("background-color", "red"); //[属性名],选有该属性名的
②属性值过滤:[属性名=属性值]或[属性名!=属性值]
1 $(".div[hehe=aaa]").css("background-color", "red"); //[属性名=属性值],选有该属性名且是此属性值的
2 $(".div[hehe!=bbb]").css("background-color", "red"); //[属性名!=属性值],选有该属性名的且属性值不是此的
(3)、内容过滤
①文字过滤::contains(“字符串”)
$(".div:contains('a')").css("background-color", "red"); //:contains('字符串'),选取包含该字符串的——根据文字
②子元素过滤::has(选择器)
$(".div:has(a)").css("background-color", "red"); //:has(“选择器”),选取包含该选择器的——根据选择器
所有选择器实例:
选择器 | 实例 | 选取 |
---|---|---|
* | $("*") | 所有元素 |
#id | $("#lastname") | id="lastname" 的元素 |
.class | $(".intro") | 所有 class="intro" 的元素 |
element | $("p") | 所有 <p> 元素 |
.class.class | $(".intro.demo") | 所有 class="intro" 且 class="demo" 的元素 |
:first | $("p:first") | 第一个 <p> 元素 |
:last | $("p:last") | 最后一个 <p> 元素 |
:even | $("tr:even") | 所有偶数 <tr> 元素 |
:odd | $("tr:odd") | 所有奇数 <tr> 元素 |
:eq(index) | $("ul li:eq(3)") | 列表中的第四个元素(index 从 0 开始) |
:gt(no) | $("ul li:gt(3)") | 列出 index 大于 3 的元素 |
:lt(no) | $("ul li:lt(3)") | 列出 index 小于 3 的元素 |
:not(selector) | $("input:not(:empty)") | 所有不为空的 input 元素 |
:header | $(":header") | 所有标题元素 <h1> - <h6> |
:animated | 所有动画元素 | |
:contains(text) | $(":contains('W3School')") | 包含指定字符串的所有元素 |
:empty | $(":empty") | 无子(元素)节点的所有元素 |
:hidden | $("p:hidden") | 所有隐藏的 <p> 元素 |
:visible | $("table:visible") | 所有可见的表格 |
s1,s2,s3 | $("th,td,.intro") | 所有带有匹配选择的元素 |
[attribute] | $("[href]") | 所有带有 href 属性的元素 |
[attribute=value] | $("[href='#']") | 所有 href 属性的值等于 "#" 的元素 |
[attribute!=value] | $("[href!='#']") | 所有 href 属性的值不等于 "#" 的元素 |
[attribute$=value] | $("[href$='.jpg']") | 所有 href 属性的值包含以 ".jpg" 结尾的元素 |
:input | $(":input") | 所有 <input> 元素 |
:text | $(":text") | 所有 type="text" 的 <input> 元素 |
:password | $(":password") | 所有 type="password" 的 <input> 元素 |
:radio | $(":radio") | 所有 type="radio" 的 <input> 元素 |
:checkbox | $(":checkbox") | 所有 type="checkbox" 的 <input> 元素 |
:submit | $(":submit") | 所有 type="submit" 的 <input> 元素 |
:reset | $(":reset") | 所有 type="reset" 的 <input> 元素 |
:button | $(":button") | 所有 type="button" 的 <input> 元素 |
:image | $(":image") | 所有 type="image" 的 <input> 元素 |
:file | $(":file") | 所有 type="file" 的 <input> 元素 |
:enabled | $(":enabled") | 所有激活的 input 元素 |
:disabled | $(":disabled") | 所有禁用的 input 元素 |
:selected | $(":selected") | 所有被选取的 input 元素 |
:checked | $(":checked") | 所有被选中的 input 元素 |
三、事件
1、常规事件——把js事件前面的on去掉
比如:js:onclick——JQuery:click
下面是 jQuery 中事件方法的一些例子:
Event 函数 | 绑定函数至 |
$(document).ready(function(){}) | 将函数绑定到文档的就绪事件(当文档完成加载时) |
$(selector).click(function(){}) | 触发或将函数绑定到被选元素的点击事件 |
$(selector).dblclick(function(){}) | 触发或将函数绑定到被选元素的双击事件 |
$(selector).focus(function(){}) | 触发或将函数绑定到被选元素的获得焦点事件 |
$(selector).mouseover(function(){}) | 触发或将函数绑定到被选元素的鼠标悬停事件 |
$(selector).mouseout(function(){}) | 触发、或将函数绑定到指定元素的 mouse out 事件 |
2、复合事件
①hover(function(){},functiaon(){})——相当于把mouseover()mouseout()合二为一
②toggle(function(){},function(){},....)——点击事件循环执行,具体看下面的代码用法展示
3、事件冒泡
冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件。
在事件执行完后添加return false
四、DOM操作
1.操作属性
①设置属性
$("选择器").attr("属性名","属性值")
②获取属性
var s = $("选择器").attr("属性名")
③删除属性
$("选择器").removeAttr("属性名")
2.操作样式
(1)操作内联样式
①获取样式
var s = $("选择器").css("样式名")
②设置样式
$("选择器").css("样式名","值")
(2)操作样式表的class
①添加class
$("选择器").addClass("class名") -向被选元素添加一个或多个类
②移除class
$("选择器").removeClass("class名") -从被选元素删除一个或多个类
③添加移除交替class
$("选择器").toggleClass("class名") -对被选元素进行添加/删除类的切换操作
3.操作内容
三个简单实用的用于 DOM 操作的 jQuery 方法:
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容(包括 HTML 标记)
- val() - 设置或返回表单字段的值
(1)表单元素
①取值
var s = $("选择器").val()
②赋值
$("选择器").val("值")
(2)非表单元素
①赋值
$("选择器").html("内容"), $("选择器").text("内容")
②取值
var s = $("选择器").html(), var s = $("选择器").text()
4.操作相关元素
(1)查找
父、前辈:
①parent()
parent() 方法返回被选元素的直接父元素。
该方法只会向上一级对 DOM 树进行遍历。
var p = $(this).parent();//查找该元素的父级
var p = $(this).parent().parent();//查找该元素的父级的父级
②parents(选择器)
parents() 方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>)。
也可以使用可选参数来过滤对祖先元素的搜索。
$(document).ready(function(){
$("span").parents();
});
var p = $(this).parents("#div2");//若知道前辈的id或name,可以用parents("选择器")
子、后代:
①children(选择器)
children() 方法返回被选元素的所有直接子元素。
该方法只会向下一级对 DOM 树进行遍历。
$(document).ready(function(){
$("div1").children(); //查找div1的子元素
});
②find(选择器)
find() 方法返回被选元素的后代元素,一路向下直到最后一个后代。
var p = $("div1").find("#div3");//查找div1的后代div3
兄弟:
prev():
返回被选元素的上一个同胞元素,该方法只返回一个元素。
prevAll(选择器):
返回被选元素的所有前面的同胞元素。
var p = $(this).prev();//查找该元素的哥哥,可以prev().prev()
var p = $(this).prevAll("#div6");//prevtAll("选择器"),前提知道需要查找的哥哥的选择器
next()
返回被选元素的下一个同胞元素。
nextAll(选择器)
方法返回被选元素的所有跟随的同胞元素。
var p = $(this).next();//查找该元素的弟弟,可以next().next()
var p = $(this).nextAll("#div6");//nextAll("选择器"),前提知道需要查找的弟弟的选择器
(2)操作
新建
$("HTML字符串")
添加
append(jquery对象):在被选元素的结尾插入内容。
prepend() :在被选元素的开头插入内容。
after(,..):在被选元素之后插入内容。
before("..."):在被选元素之前插入内容
移除
empty()
清空内部全部元素
remove()
移除元素
复制
clone()
5.未来元素
对象.live("事件名",function(){});
JQuery(选择器、事件、DOM操作)的更多相关文章
- jQuery选择器和DOM操作——《锋利的jQuery》(第2版)读书笔记1
第1章 认识jQuery jQuery有以下优势: 轻量级: 强大的选择器: 出色的DOM操作的封装: 可靠的事件处理机制: 完善的Ajax: 不污染顶级变量: 出色的浏览器兼容性: 链式操作方式: ...
- [转]jQuery 选择器和dom操作
居然是12年的总结.... 文章地址: http://www.cnblogs.com/happyPawpaw/articles/2595092.html JQuery选择器 1.基本选择器 基本选择器 ...
- 读<jquery 权威指南>[1]-选择器及DOM操作
今天是小年了,2013马上要过去了,但是学习不能间断啊.最近正在看<jQuery权威指南>,先温习一下选择器和DOM操作. 一.基本选择器 1.table单双行: $(function ( ...
- dom core,html dom,css dom,jquery 中的dom操作
前端开发中为达到某种目的,往往有很多方法:dom core,html dom,jquery; dom core/jquery主要通过函数调用的方式(getAttribute("属性名&quo ...
- Jquery:jquery中的DOM操作<一>
之前两天学习了Jquery强大的选择器,今天学习了一部分Jquery对DOM的操作,下面我将把自己今天的成果分享给大家,那些菜鸟们,你们是否需要巩固之前所学? 首先需要知道,DOM操作分为3个方面:D ...
- jQuery中的DOM操作总结
jQuery中的DOM操作 DOM是Document Object Medel的缩写,它的意思是文档对象模型,根据W3C的官方说法,DOM是一种跟浏览器,平台以及语言都没有关系的一种规范,也就是一种接 ...
- 第25篇 jQuer快速学习(上)---选择器和DOM操作
这个文章经历的时间比较长,不是因为jQuery比较难,而是东西比较多,真心是个体力活.所以本来想把jQuery做成一篇去写,但由于写的时候发现jQuery发现写成一篇的话过于长,对于阅读起来也不是一个 ...
- 锋利的jQuery ——jQuery中的DOM操作(三)
一.DOM的操作分类 1>DOM Core 2>HTML-DOM 3>CSS-DOM 二.jQuery中的DOM操作 DOM树 ①查找节点 1)查找元素节点 利用jQuery ...
- JQuery中的DOM操作
JQuery中有很多DOM操作,但是因为之前没有总结过,所以用来用去都是那几个,一写html中的表单交互,尤其是那些复杂的表单交互,就是一大坨的js,我自己看着都费劲. 所以我感觉有必要总结一下 &l ...
- Jquery基础之DOM操作
转自:http://www.cnblogs.com/bro-ma/p/3063942.html JQuery中的DOM操作主要对包括:建[新建].增[添加].删[删除].改[修改].查[查找][像数据 ...
随机推荐
- AngularJs ui-router 路由的简单介绍
之前有写过一篇关于Angular自带的路由:ngRoute.今天来说说Angular的第三方路由:ui-router.那么有人就会问:为什么Angular有了自带的路由,我们还需要用ui-router ...
- Zookeeper-Zookeeper leader选举
在上一篇文章中我们大致浏览了zookeeper的启动过程,并且提到在Zookeeper的启动过程中leader选举是非常重要而且最复杂的一个环节.那么什么是leader选举呢?zookeeper为什么 ...
- Cocos2d-x 3.2 学习笔记(十五)保卫萝卜 场景与数据
保卫萝卜~场景的思路以及数据的存储. 学习要写笔记,记录自己的步骤. 一.场景构建Tiled 关于Tiled网上有一大堆的教程,这个比较好用,特别是构建塔防类的游戏极其简 ...
- [转载]"百度方法+"案例—从持续集成到持续交付
前言 百度开放云(https://bce.baidu.com)是百度基于十五年基础架构核心技术积累推出的云服务,目前推出了14个云计算产品和9个大数据产品,并提供数字营销云.在线教育.物联网等10种解 ...
- Waves – 赞!超炫交互体验的点击动画效果
Waves 点击效果的灵感来自于谷歌的材料设计,很容易使用.只需要引入 waves.min.css 和 waves.min.js 到 HTML 文件中可以使用了.采用 touchstart 与 tou ...
- Furatto – 轻量,友好的响应式前端开发框架
Furatto 是一个基于 Bootstrap & Foundation 的前端开发框架,用于快速开发网站.这个框架采用流行的扁平化设计和响应式设计.除了布局和网格之外,所有的主要元素都有预定 ...
- Web性能测试参数
1.前言 最近在项目中引入了keyless,需要测试一下对web的性能影响.常见的web测试工具有ab.siege.http_load等.我用的是Apache的ab测试工具.在测试web性能之前,首先 ...
- 谷歌插件Image downloader开发之popup
Image downloader的交互逻辑是这样的:用户点击Image downloader的图标,会向页面(content script,见上一篇文章:谷歌插件Image downloader开发之 ...
- java并发编程:并发容器之CopyOnWriteArrayList(转)
原文:http://ifeve.com/java-copy-on-write/ Copy-On-Write简称COW,是一种用于程序设计中的优化策略.其基本思路是,从一开大家都在共享同一个内容,当某个 ...
- c#隐藏和重写基类方法的异同
最近正在学习c#,对其中的方法重写和隐藏的概念很是模糊,现在将其归纳如下: 1:方法重写:就是在基类中的方法用virtual关键字来标识,然后在继承类中对该类进行重写(override),这样基类中的 ...