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的 ...
随机推荐
- 小程序开发：canvas在画布上滑动，页面跟着滑动问题
微信小程序官方文档有说明,disable-scroll="true" 可以阻止页面下拉和滚动.这里有个坑,disable-scroll在真机上如果要生效,那么要给canvas绑定一 ...
- mysql中的备份（backup）和恢复（recovery）
(一)备份类型(backup type) 物理和逻辑备份(Physical Versus Logical Backup) 物理备份是指直接复制存储数据库内容的目录和文件,这种类型的备份适用于出现问题时 ...
- Linux第六节课学习笔记
if条件测试语句可以让脚本根据实际情况自动执行相应的命令,可以分为单分支.双分支与多分支. /dev/null为无回收功能的垃圾箱. read是用来读取用户输入信息的命令,-p用来显示提示信息. fo ...
- Adventure 魔幻历险
发售年份 1979 平台 VCS 开发商 雅达利(Atari) 类型 冒险 https://www.youtube.com/watch?v=YS-HYWRdb2g
- java8_api_nio
NIO-1 nio的概念 Buffer的属性 Buffer中数据的读写 用以提高IO处理数据的性能问题,之前io里的单位是Byte(java程序向流中写入byte或相反 ...
- Java面试问题汇总
转一些面试经验 刚看到下面这份面试清单,从个人的开发面试经历看,里面总结的大部分内容还是很不错的.年后想跳槽的朋友可以选取里面的问题准备一下. GitHub上的面试总结帖 Interview-Note ...
- 关于让simulink中display组件显示二进制的方法
关于让simulink中display组件显示二进制的方法 1.首先需要配置gateway out模块,勾选propagate data type to output 2.配置display模块 fo ...
- php7 使用dom动态生成xml文档
<?php $dom = new DomDocument('1.0','gb2312'); //创建DOM对象 $store = $dom->createElement('store'); ...
- html5课件外包-----swf/AS2/AS3/fla/ppt课件如何转换为html5交互课件/动画
随着Adobe公司公布2020年将不再更新和维护flash,flash逐渐被html5取代,很多教育机构都在面临着如何将自己的flash交互课件产品转换到html5版本的问题,最近遇到非常多的客户一上 ...
- JavaScript 环境和作用域
作用域 1. 全局环境 window: JS的全局执行环境,顶层对象.this指针在全局执行环境时就指向window. console.log(this===window); //true 2. 局部 ...