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的 ...
随机推荐
- ORACLE数据库_迁移（新机器，新存储）
迁移: (10g 64老机器,老存储) ------>(11g 64新机器,新存储)注意要点:新老服务的时间,字符集,sid升级顺序:10.2.0.1------>10.2.0.4或10. ...
- java————数组 简单写出一个管理系统
数组的特点 1, 数组是一块连续的空间,下标描述空间的位置. 2, 下标从0开始,最大下标为数组长度—1.(*.length-1) 3, 数组元素都是变量.(就是每个下标对应的内容).变量的类型 ...
- 学习笔记TF058:人脸识别
人脸识别,基于人脸部特征信息识别身份的生物识别技术.摄像机.摄像头采集人脸图像或视频流,自动检测.跟踪图像中人脸,做脸部相关技术处理,人脸检测.人脸关键点检测.人脸验证等.<麻省理工科技评论&g ...
- javascript中正则动态替换为对象中的相应数据
使用正则进行替换以下内容 var str = 'aKey={aValue}&bKey={bValue}' 使用以下对象数据,替换value var obj = { aValue: 1, bVa ...
- 关于 legend_noa
真名:qlw 性别:男 常用ID:legend_noa(有时候也用fseject以表示我的弱, 曾经不懂事用goddess_Q),具体意思是我最喜欢的两个奥特曼:诺亚和雷杰多 p1 诺亚,p2 雷杰多 ...
- 《python for data analysis》第五章，pandas的基本使用
<利用python进行数据分析>一书的第五章源码与读书笔记 直接上代码 # -*- coding:utf-8 -*-# <python for data analysis>第五 ...
- javascript将C#json序列化的Date对象转换成正常的Date格式
function ChangeDateFormat(cellval) { var date = new Date(parseInt(cellval.replace("/Date(" ...
- 关于 lua table表存储函数且运用
--table 是lua的一种数据结构用来帮助我们创建不同的数据类型.如:数组和字典--lua table 使用关联型数组,你可以用任意类型的值来做数组的索引,但这个值不能是nil--lua tabl ...
- day-07数据类型转换与字符编码
类型转换 1.字符串转换为数字 res = int('10')print(res)res = int('-3')print(res)res = float('.15')print(res)res = ...
- android 位置记录软件
行者 用的百度高德的方案,没有偏移问题endomondo,咕咚,行者.endomondo是国外软件,运行稳定,但GPS记录漂移比较严重:咕咚的GPS位置记录比较准确,缺点是容易崩溃,譬如记录过程中来个 ...