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操作）的更多相关文章

  1. jQuery学习笔记之DOM操作、事件绑定（2）

    jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定 源码地址: https ...

  2. 第一百六十九节，jQuery，基础事件

    jQuery,基础事件 学习要点: 1.绑定事件 2.简写事件 3.复合事件 JavaScript 有一个非常重要的功能,就是事件驱动.当页面完全加载后,用户通过鼠标 或键盘触发页面中绑定事件的元素即 ...

  3. Jquery 事件 DOM操作

    常规事件: 把JS的事件  on去掉即可 例如:js    document.getElementById("id").onclinck=function(){} Jquery   ...

  4. Jquery基础之DOM操作

    转自:http://www.cnblogs.com/bro-ma/p/3063942.html JQuery中的DOM操作主要对包括:建[新建].增[添加].删[删除].改[修改].查[查找][像数据 ...

  5. jquer 基础篇 dom操作

    DOM操作: 1.新增元素:创建元素:$("HTML")返回的创建成功的新元素新增子元素:元素.append(obj) 在匹配元素的里面新增一个子元素 追加方式 新元素作为最后一个 ...

  6. 【2017-03-28】JS基础、DOM操作

    一.JS基础 1.javascript功能 ⑴进行数据运算 ⑵控制浏览器功能 ⑶控制元素的属性.样式.内容 2.javascript位置和格式 可以放在html页的任意位置,也可以创建一个以js结尾的 ...

  7. jQuery学习笔记（DOM操作）

    DOM操作的分类 一般来说,DOM操作分为3个方面,即DOM Core.HTML-DOM和CSS-DOM. 1. DOM Core DOM Core并不专属于JavaScript,任何一种支持DOM的 ...

  8. jQuery总结02_jq的dom操作+属性操作

    一:JQuery知识点 *:JQuery的dom操作 *:获取节点.给节点添加内容 *:动态创建dom节点 比如动态创建表格等,在js里面进行完成. *删除节点 这里面的删除就是将其放在了一个地方,并 ...

  9. jQuery（3）——DOM操作

    ---恢复内容开始---   jQuery中的DOM操作 [DOM操作分类] DOM操作分为DOM Core(核心).HTML-DOM和CSS-DOM三个方面. DOM Core:任何一种支持DOM的 ...

随机推荐

  1. 报文 HTTP HTTPS

    报文是网络中交换与传输的数据单元,即站点一次性要发送的数据块.报文包含了将要发送的完整的数据信息,其长短很不一致,长度不限且可变. 报文也是网络传输的单位,传输过程中会不断的封装成分组.包.帧来传输, ...

  2. Ubuntu使用总结二

    Ubuntu使用 - 1.ubuntu怎么切换到root用户,切换到root账号方法 ubuntu怎么切换到root用户,我们都知道使用su root命令,去切换到root权限,此时会提示输入密码, ...

  3. centos tree 命令

    ftp://mama.indstate.edu/linux/tree/ download & make

  4. 对于Linux内核执行过程的理解（基于fork、execve、schedule等函数）

    382 + 原创作品转载请注明出处 + https://github.com/mengning/linuxkernel/ 一.实验环境 win10 -> VMware -> Ubuntu1 ...

  5. system.net.httpclient 4.0 vs2015

    // 加入Cookie foreach (string a in cookieStr.Split(';')) { cookieContainer.Add(new Cookie(a.Split('=') ...

  6. 使用ghost装完系统后出现“引用了一个不可用的位置”

    用GHOST版光盘安装完系统后,只有一个C盘,无法点桌面刷新,然后提示“D:/我的文档引用了一个不可用的位置.... 1.在管理员账户下定位到如下键值:“HKEY_CURRENT_USER\Softw ...

  7. Developing avb

    ai automake  ai libtool  ai pkg-config autogen ai libgstreamer1.0-0  ai libgstreamer1.0-dev  ai chec ...

  8. C# - 匿名对象属性的赋值与取值

    在new出匿名对象的函数内可以直接调用该匿名对象的属性取值. 可是在其它函数就无法调用匿名对象的属性或方法. 这时,我们可以通过c#的反射机制取值: 文章出处:https://www.cnblogs. ...

  9. SRE_ Google运维解密

    # 第IV部分 管理 #系统可用性时间表 # 专用术语 SLO:服务等级目标 LCE(Land-Covered Earth):紧急检修登陆艇 # 紧急事故管理 一次流程管理良好的事故 # 东西早晚要坏 ...

  10. cellmap 基站查询 for android

    cellmap for android 3.6.8.8.1.8 更新日期:2019年4月28日 特别声明:本软件不能进行手机定位,不能对手机号码定位,谨防被骗. 安装说明:请卸载旧版本后,重新下载安装 ...