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. qt+opencv LNK4272:library machine type 'x64' conflicts with target mathine type 'x86'

    运行时报错如上图所示,原因是你使用的opencv库是64位的,qt里面使用的编译器MSVC是32位的,解决方法如下: 将构建套件修改位64bit:

  2. 光照构建失败。Swarm启动失败

    这是别人(http://blog.csdn.net/z609932088/article/details/52368015)写的,亲试可用 如下图 百度许久,有大神指出是我在编译源码的的时候没有将其中 ...

  3. redhat6.5 redis单节点多实例3A集群搭建

    在进行搭建redis3M 集群之前,首先要明白如何在单节点上完成redis的搭建. 单节点单实例搭建可以参看这个网:https://www.cnblogs.com/butterflies/p/9628 ...

  4. ubuntu 安装 pycharm

    添加源: $ sudo add-apt-repository ppa:mystic-mirage/pycharm   安装收费的专业版: $ sudo apt update $ sudo apt in ...

  5. web方向编程语言最全对比

    web方向编程语言最全对比 目前一般公司的后台用的开发语言大概有以下几种:java,python,php,asp.net,c++,node.js,ruby on rails 等. java 优点:性能 ...

  6. git编译安装

    因yum安装的git版本过低,所以尝试使用编译安装git 以下为编译安装时执行的命令 tar xf git-2.9.5.tar.gz cd git-2.9.5yum install curl-deve ...

  7. Technical

    CAN FD (CAN with Flexible Data-Rate) is an extension to the original CAN bus protocol specified in I ...

  8. EasyMall注册功能

    EasyMall注册功能 1. 环境搭建 创建一个EasyMall的web应用 配置www.easymall.com网站,并配置为缺省的虚拟主机,将EasyMall配 置为缺省的web应用,在配置in ...

  9. 剑指offer 10.递归和循环 矩形覆盖

    题目描述 我们可以用2*1的小矩形横着或者竖着去覆盖更大的矩形.请问用n个2*1的小矩形无重叠地覆盖一个2*n的大矩形,总共有多少种方法?   当n=0时 ,target=0:   当n=1时 ,ta ...

  10. jupyter notebook快捷键使用指南

    Jupyter Notebook 是一个交互式笔记本程序, 其有丰富的快捷键来便捷的完成工作.Notebook 有两种键盘输入模式.即命令模式和编辑模式,这与 Vim 有些类似.在编辑模式下,可以往单 ...