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的 ...
随机推荐
- vue项目打包后的资源路径问题
最近做的vue项目,本地测试完成后,build上线,却发现了文件路径问题,提示各种诸如js,css等资源找不到的错: 正确解决方式有两种,一种是绝对路径配置,详细可以网上查,个人推荐第二种相对路径,这 ...
- 福利之——如何写好年终总结PPT
撰写年终总结PPT大致分三个步骤(TDR三部曲): 第一步:确定大纲(THINK) 第二步:优化PPT(DESIGN) 第三步:练习演讲(REHEARSE) 让领导看见你的成绩,听明白你未来的‘宏伟计 ...
- websocket 2 rest api
需要开发一个prometheus 的exporter 使用jmespath 获取对应metrics的数据,并进行转换处理,但是因为那个服务 提供的接口是通过websoket 的实时api,所以基于no ...
- div 内容宽度自适应、超出后换行
div 内容宽度自适应,超出后换行 { max-width:100%;width: fit-content;width: -webkit-fit-content;width: -moz-fit-con ...
- vue项目做seo优化（prerender-spa-plugin vue-meta-info）
今天公司考虑seo设计方案,服务端渲染(ssr)和 预渲染的方式,不过只是打算对几个简单的页面seo,所以选择了使用预渲染的方式,以下是实现过程中遇到的问题,供大家查看,有不对的地方请指正: 使用pr ...
- 查看局域网内所有IP的方法
1,windows下查看局域网内所有IP的方法: 在MS-DOS命令行输入arp -a 2,Linux下,查看局域网内所有IP的方法: 在命令行输入nmap -sP 172.10.3.0/24
- Azure CosmosDB (4) 在一致性(Consistency)可用性(Availability)和性能(Performance)之间的权衡
<Windows Azure Platform 系列文章目录> 我个人感觉,这个概念和分布式系统中的CAP原则是类似的: CAP原则指的是在一个分布式系统中,Consistency(一致性 ...
- android SDK 安装
Android SDK在线更新镜像服务器 参见:http://www.androiddevtools.cn/ 1. 启动 Android SDK Manager ,打开主界面,依次选择『Too ...
- windows旋转屏幕快捷键配置
1.打开屏幕分辨率 2.高级设置 3.英特尔核心显卡控制板 4.图形属性 5.选项和支持 6.管理快捷键(启用.禁用)
- su: Authentication failure问题
问题: su命令不能切换root,提示错误su: Authentication failure 解决: 使用命令 sudo passwd root 下次再su的时候只要输入密码就可以成功登录了.