jQuery入门基础（事件、DOM操作）
http://www.w3school.com.cn/b.asp
一、事件
1、常规事件——把js事件前面的on去掉
比如：js：onclick——JQuery：click
下面是 jQuery 中事件方法的一些例子：
2、复合事件
(1)hover(function(){},functiaon(){})——相当于把mouseover()mouseout()合二为一
(2)toggle(function(){},function(){},....)——点击事件循环执行，具体看下面的代码用法展示
3、事件冒泡
冒泡事件就是点击子节点，会向上触发父节点，祖先节点的点击事件。
在事件执行完后添加return false
4、未来元素
对象.live("事件名",function(){});
| 方法 | 描述 |
|---|---|
| bind() | 向匹配元素附加一个或更多事件处理器 |
| blur() | 触发、或将函数绑定到指定元素的 blur 事件 |
| change() | 触发、或将函数绑定到指定元素的 change 事件 |
| click() | 触发、或将函数绑定到指定元素的 click 事件 |
| dblclick() | 触发、或将函数绑定到指定元素的 double click 事件 |
| delegate() | 向匹配元素的当前或未来的子元素附加一个或多个事件处理器 |
| die() | 移除所有通过 live() 函数添加的事件处理程序。 |
| error() | 触发、或将函数绑定到指定元素的 error 事件 |
| event.isDefaultPrevented() | 返回 event 对象上是否调用了 event.preventDefault()。 |
| event.pageX | 相对于文档左边缘的鼠标位置。 |
| event.pageY | 相对于文档上边缘的鼠标位置。 |
| event.preventDefault() | 阻止事件的默认动作。 |
| event.result | 包含由被指定事件触发的事件处理器返回的最后一个值。 |
| event.target | 触发该事件的 DOM 元素。 |
| event.timeStamp | 该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数。 |
| event.type | 描述事件的类型。 |
| event.which | 指示按了哪个键或按钮。 |
| focus() | 触发、或将函数绑定到指定元素的 focus 事件 |
| keydown() | 触发、或将函数绑定到指定元素的 key down 事件 |
| keypress() | 触发、或将函数绑定到指定元素的 key press 事件 |
| keyup() | 触发、或将函数绑定到指定元素的 key up 事件 |
| live() | 为当前或未来的匹配元素添加一个或多个事件处理器 |
| load() | 触发、或将函数绑定到指定元素的 load 事件 |
| mousedown() | 触发、或将函数绑定到指定元素的 mouse down 事件 |
| mouseenter() | 触发、或将函数绑定到指定元素的 mouse enter 事件 |
| mouseleave() | 触发、或将函数绑定到指定元素的 mouse leave 事件 |
| mousemove() | 触发、或将函数绑定到指定元素的 mouse move 事件 |
| mouseout() | 触发、或将函数绑定到指定元素的 mouse out 事件 |
| mouseover() | 触发、或将函数绑定到指定元素的 mouse over 事件 |
| mouseup() | 触发、或将函数绑定到指定元素的 mouse up 事件 |
| one() | 向匹配元素添加事件处理器。每个元素只能触发一次该处理器。 |
| ready() | 文档就绪事件（当 HTML 文档就绪可用时） |
| resize() | 触发、或将函数绑定到指定元素的 resize 事件 |
| scroll() | 触发、或将函数绑定到指定元素的 scroll 事件 |
| select() | 触发、或将函数绑定到指定元素的 select 事件 |
| submit() | 触发、或将函数绑定到指定元素的 submit 事件 |
| toggle() | 绑定两个或多个事件处理器函数，当发生轮流的 click 事件时执行。 |
| trigger() | 所有匹配元素的指定事件 |
| triggerHandler() | 第一个被匹配元素的指定事件 |
| unbind() | 从匹配元素移除一个被添加的事件处理器 |
| undelegate() | 从匹配元素移除一个被添加的事件处理器，现在或将来 |
| unload() | 触发、或将函数绑定到指定元素的 unload 事件 |
二、DOM操作
（1）、操作属性
1、获取属性：$(“选择器名”).attri("属性名")
2、设置属性：$("选择器名").attri("属性名"，"属性值")
3、删除属性：$(“选择器名”).removeAttri("属性名")
（2）操作样式
1、获取样式：$(“选择器名”).css(“样式名”)
2、设置样式：$(“选择器名”).css(“样式名”，“值”)
3、添加class
$("选择器").addClass("class名") -向被选元素添加一个或多个类
4、移除class
$("选择器").removeClass("class名") -从被选元素删除一个或多个类
5、添加移除交替class
$("选择器").toggleClass("class名") -对被选元素进行添加/删除类的切换操作
| CSS 属性 | 描述 |
|---|---|
| css() | 设置或返回匹配元素的样式属性。 |
| height() | 设置或返回匹配元素的高度。 |
| offset() | 返回第一个匹配元素相对于文档的位置。 |
| offsetParent() | 返回最近的定位祖先元素。 |
| position() | 返回第一个匹配元素相对于父元素的位置。 |
| scrollLeft() | 设置或返回匹配元素相对滚动条左侧的偏移。 |
| scrollTop() | 设置或返回匹配元素相对滚动条顶部的偏移。 |
| width() | 设置或返回匹配元素的宽度。 |
(3)操作内容
1、表单样式：取值：$("选择器名").val()
赋值：$("选择器名").val(“值”)
2、非表单元素：取值：$("选择器名").html()或$("选择器名").text()
赋值：$("选择器名").html(“值”)或$("选择器名").text(“值”)
（4）操作相关元素
查找：1、上几级：
父级：parent()-- 返回被选元素的直接父元素。
祖级：parents(选择器)-- 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。
2、后几级：
子级：children(选择器)-- 方法返回被选元素的所有直接子元素。
后级：find(选择器)-- 方法返回被选元素的后代元素，一路向下直到最后一个后代。
3、同级：
哥哥级：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("选择器")，前提知道需要查找的弟弟的选择器
操作：
1、新建：$(“HTML字符串”)
例：$("选择器名").append("$('<div></div>')")
2、添加
append(jquery对象):在被选元素的结尾插入内容。
prepend() :在被选元素的开头插入内容。
after(,..):在被选元素之后插入内容。
before("..."):在被选元素之前插入内容
3、移除：empty（）--清空内部全部元素
remove()--移除元素
4、复制：clone()
var a=$("选择器名").clone()
$("选择器名").append(a)
jQuery入门基础（事件、DOM操作）的更多相关文章
- jQuery学习笔记之DOM操作、事件绑定（2）
jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定 源码地址: https ...
- 第一百六十九节，jQuery，基础事件
jQuery,基础事件 学习要点: 1.绑定事件 2.简写事件 3.复合事件 JavaScript 有一个非常重要的功能,就是事件驱动.当页面完全加载后,用户通过鼠标 或键盘触发页面中绑定事件的元素即 ...
- Jquery 事件 DOM操作
常规事件: 把JS的事件 on去掉即可 例如:js document.getElementById("id").onclinck=function(){} Jquery ...
- Jquery基础之DOM操作
转自:http://www.cnblogs.com/bro-ma/p/3063942.html JQuery中的DOM操作主要对包括:建[新建].增[添加].删[删除].改[修改].查[查找][像数据 ...
- jquer 基础篇 dom操作
DOM操作: 1.新增元素:创建元素:$("HTML")返回的创建成功的新元素新增子元素:元素.append(obj) 在匹配元素的里面新增一个子元素 追加方式 新元素作为最后一个 ...
- 【2017-03-28】JS基础、DOM操作
一.JS基础 1.javascript功能 ⑴进行数据运算 ⑵控制浏览器功能 ⑶控制元素的属性.样式.内容 2.javascript位置和格式 可以放在html页的任意位置,也可以创建一个以js结尾的 ...
- jQuery学习笔记（DOM操作）
DOM操作的分类 一般来说,DOM操作分为3个方面,即DOM Core.HTML-DOM和CSS-DOM. 1. DOM Core DOM Core并不专属于JavaScript,任何一种支持DOM的 ...
- jQuery总结02_jq的dom操作+属性操作
一:JQuery知识点 *:JQuery的dom操作 *:获取节点.给节点添加内容 *:动态创建dom节点 比如动态创建表格等,在js里面进行完成. *删除节点 这里面的删除就是将其放在了一个地方,并 ...
- jQuery（3）——DOM操作
---恢复内容开始--- jQuery中的DOM操作 [DOM操作分类] DOM操作分为DOM Core(核心).HTML-DOM和CSS-DOM三个方面. DOM Core:任何一种支持DOM的 ...
随机推荐
- Jenkins可持续集成项目搭建——配置Jenkins基本设置 & 运行脚本报错点
一.系统管理->全局工具配置:配置JDK.GIT: 二.项目配置-部署源码管理的远程地址 三.项目配置-构建触发器(以Windows平台举例) 构建项目时,会自动分配一个运行空间(D:\Prog ...
- Appium环境搭建——安卓真机调试注意点
1.安卓设备连接失败 通过adb devices命令 查看安卓设备的连接情况,如图,未成功连接 解决方法: (1)关闭360安全卫士和360手机助手(2)查看5037端口是否被占用 netstat - ...
- 谈一谈java中的Canves机制
0--写在前面: 很多初学java的童鞋,常常很苦恼,一天天的都跟命令行较劲,好像很无聊的样子,如果能跳出命令行做出界面甚至一个画图界面,那将是一件很兴奋的事情:也可以让编程变的有趣:有脑洞的同学还可 ...
- 在Django中运行ExtJS 事例
网上关于ExtJS的事例挺多的,但是在Django中使用ExtJS挺少的,当然了,一些大牛觉得ExtJS运用在页面上是很简单的事,但是对于菜鸟来说,实在有点困难. 我这个例子是用在了sublime3这 ...
- streamreader 和 streamwriter 以及 string 与 memorystream 使用示例
经常用到,但老记不住,备忘一下 using (var ms = new MemoryStream()) { var sw = new StreamWriter(ms); sw.WriteLine(&q ...
- Mysql--基础(一)
MySQL基础 一.数据库的操作 1.SQL分类: DDL(数据定义语言) :数据定义语言 - Data Definition Language,用来定义数据库的对象,如数据表.视图.索引等.常用 ...
- Java中List集合去除重复数据的方法
1. 循环list中的所有元素然后删除重复 public static List removeDuplicate(List list) { for ( int i = 0 ; i < list. ...
- Ant将Jmeter的jtl文件转为html文件报“前言中不允许有内容”
ant执行jmeter的脚本的时候提示“Fatal Error! 前言中不允许有内容” 解决办法: 在jmeter的bin目录中找到jmeter.properties: 将文件中#jmeter.sav ...
- Kafka入门 --安装和简单实用
一.安装Zookeeper 参考: Zookeeper的下载.安装和启动 Zookeeper 集群搭建--单机伪分布式集群 二.下载Kafka 进入http://kafka.apache.org/do ...
- java中增删改查(CRUD)总结
对于User表增删改查:1:save(保存方法) view(查询所有记录) update(更新方法) delete(删除方法) 通过method这个参数进行判断执行不同的操作 2: 具体的实现: ...