JQuery 基本知识,选择器,事件,DOM操作
一、基本知识
Jquery是什么?
它就是一套JS方法包,jQuery是一个快速,小巧,功能丰富的JavaScript库。它使得HTML文档遍历和操作,事件处理,动画和Ajax更容易使用易于使用的API,可以工作在众多的浏览器。结合多功能性和可扩展性,jQuery已经改变了数百万人编写JavaScript的方式。
二、选择器
基本选择器:
基本:
ID选择器:$("#ID")
Class选择器:$(".Class")
标签选择器:$("标签名")
组合:
并列:用逗号隔开 $("#ID1","#ID2","#ID3","#ID4",...)
后代:用空格隔开 $(".Class Div")
过滤选择器:
基本过滤:
首尾: 首个:$(".Class:first") 尾个:$(".Class:last")
等于: 任意个:$(".Class:eq(索引号)") 或者 $(".Class").eq(索引号) 建议使用第二个,例如循环时取索引号方便
不等于:大于:$(".Class:gt(索引号)") 小于$(".Class:lt(索引号)") 排除:$(".Class:not(.Class:eq(索引号))")
奇偶:索引号为奇数:$(".Class:odd") 索引号为偶数:$(".Class:even")
属性过滤:
属性名过滤:$(".Class[属性名]")
属性的名值对过滤:$(".Class[属性名=值]") $(".Class[属性名!=值]")
内容过滤:
文字:$(".Class:contains("字符串")")
子元素:$(".Class:has(选择器)")
未来元素:
$("选择器").live("事件名",function () { });
三、事件
常规事件
把JS事件中的on去掉即可;
复合事件:
$("选择器").hover(function(){},function(){}); 相当于把mouseover()mouseout()合二为一
$("选择器").toggle(function(){},function(){},function(){},...); 点击事件循环执行
事件冒泡
阻止事件冒泡:在事件结束前加上 return false; 例如:
$("#id").click(function () {
alert("");
return false;
});
四:DOM操作
操作属性
获取属性 var s=$("选择器").attr("属性名");
设置属性 $("选择器").attr("属性名","属性值");
删除属性 $("选择器").removeAttr("属性名");
操作样式
操作内联样式 获取样式 var s=$("选择器").css("样式名"); 设置样式 $("选择器").css("样式名","值");
操作样式表的class 添加class $("选择器").addClass("class名");
移除class $("选择器").removeClass("class名");
添加移除交替class $("选择器").toggleClass("class名")
操作内容
表单元素 取值: var s=$("选择器").val(); 赋值: $("选择器").val("值");
非表单元素 取值: var s=$("选择器").html(); var s=$("选择器").text(); 赋值: $("选择器").html("内容"); $("选择器").text("内容");
操作相关元素
查找 父级:$("选择器").parent(); $("选择器").parents("选择器");
子级:$("选择器").children("选择器"); $("选择器").find("选择器");
平级:前面的:$("选择器").prve(); $("选择器").prveAll("选择器");
后面的:$("选择器").next(); $("选择器").nextAll("选择器");
操作
新建: var s=$("Html字符串");
添加: 内部添加:$("选择器").append($("Html字符串"));
平级之前添加:$("选择器").before($("Html字符串"));
平级之后添加:$("选择器").after($("Html字符串"));
移除:清空内部所有元素: $("选择器").empty(); 移除元素本身包含内部的元素: $("选择器").remove();
复制:var s=$("选择器").clone();
五、动画
JQuery 基本知识,选择器,事件,DOM操作的更多相关文章
- 读<jquery 权威指南>[1]-选择器及DOM操作
今天是小年了,2013马上要过去了,但是学习不能间断啊.最近正在看<jQuery权威指南>,先温习一下选择器和DOM操作. 一.基本选择器 1.table单双行: $(function ( ...
- 第25篇 jQuer快速学习(上)---选择器和DOM操作
这个文章经历的时间比较长,不是因为jQuery比较难,而是东西比较多,真心是个体力活.所以本来想把jQuery做成一篇去写,但由于写的时候发现jQuery发现写成一篇的话过于长,对于阅读起来也不是一个 ...
- jquer 事件,选择器,dom操作
一.jQuery简介 jQuery 是一个 JavaScript 库.(其实就是js,就是封装了,语法上有些不一样) jQuery 极大地简化了 JavaScript 编程. jQuery 库位于一个 ...
- jQuery选择器和DOM操作——《锋利的jQuery》(第2版)读书笔记1
第1章 认识jQuery jQuery有以下优势: 轻量级: 强大的选择器: 出色的DOM操作的封装: 可靠的事件处理机制: 完善的Ajax: 不污染顶级变量: 出色的浏览器兼容性: 链式操作方式: ...
- [转]jQuery 选择器和dom操作
居然是12年的总结.... 文章地址: http://www.cnblogs.com/happyPawpaw/articles/2595092.html JQuery选择器 1.基本选择器 基本选择器 ...
- Jquery 事件 DOM操作
常规事件: 把JS的事件 on去掉即可 例如:js document.getElementById("id").onclinck=function(){} Jquery ...
- jQuery 1.0 | 选择器 | 事件 | 操作样式 | 操作属性
使用jQuery: 1,下载jQuery http://jquery.com/download/ 2,引入jQuery文件 3,定义入口函数 <script src="jquery-1 ...
- 前端笔记之jQuery(下)事件&节点操作&净位置&拖拽&页面卷动值&遍历JSON
一.监听事件大全 1.1 JavaScript事件 onblur 元素失去焦点 onchange 用户改变域的内容 onclick 鼠标点击某个对象 ondblclick 鼠标双击某个对象 onfoc ...
- jQuery初识之选择器、样式操作和筛选器(模态框和菜单示例)
一.jQuery 1.介绍 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架). jQuery设计的 ...
- jQuery基础知识--选择器与效果
$(this).hide()-----隐藏当前元素 $("p").hide()------隐藏所有段落 $(".test").hide()--隐藏所有class ...
随机推荐
- Java成员变量和局部变量
Java成员变量和局部变量 一.成员变量和局部变量 二.static关键字 三.成员变量和静态变量区别 四.main函数 五.静态函数什么时候用 六.静态代码块 七.构造代码块 构造代码块先于构造函数 ...
- [Java学习] Java super关键字
super 关键字与 this 类似,this 用来表示当前类的实例,super 用来表示父类. super 可以用在子类中,通过点号(.)来获取父类的成员变量和方法.super 也可以用在子类的子类 ...
- spring中@Scope作用域的注解
@Scope简单点说就是用来指定bean的作用域 官方解释是:scope用来声明IOC容器中的对象应该处的限定场景或者说该对象的存活空间,即在IOC容器在对象进入相应的scope之前,生成并装配这些对 ...
- Animation鱼眼效果
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> < ...
- Sentry项目监控工具结合vue的安装与使用(前端)
一.官网:https://sentry.io/welcome/ 二.介绍 Sentry 是一个开源的实时错误报告工具,支持 web 前后端.移动应用以及游戏,支持 Python.OC.Java.Go. ...
- UVALIve 5987 素数
题目链接:Distinct Primes 如果一个数.至少有三个因子是素数..那么这个数就是prime num.30和42是前两个prime num.问你第n个这种数是谁.(1<=n<=1 ...
- (C#基础)Linq学习理解
一遍学习基础,一遍练习打字,很多乐趣. 代码 using System; using System.Collections.Generic; using System.Linq; using Syst ...
- 对spring 对持久层的支持和数据库连接池的理解
1.spring对持久层的支持在于,得到数据库连接之后操作上的封装,将操作简化了.也就是说以后操作sql语句就用XXXTemplate(就是一个工具类)对象了. 2.数据库连接池的作用只在于得到数据库 ...
- L1-037 A除以B
真的是简单题哈 —— 给定两个绝对值不超过100的整数A和B,要求你按照“A/B=商”的格式输出结果. 输入格式: 输入在第一行给出两个整数A和B(−100≤A,B≤100),数字间以空格分隔. 输出 ...
- ReentrantLock的原理解析
重入锁(ReentrantLock)是一种可重入无阻塞的同步机制.性能同synchronized接近(老版本jdk中性能很差). 下面重点看下常用的lock()和unlock()方法的实现原理. lo ...