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. [cf1025D][区间dp]

    http://codeforces.com/contest/1025/problem/D D. Recovering BST time limit per test 1 second memory l ...

  2. Appium环境搭建——安装以及运行appium server失败点总结

    一.运行Appium失败:未安装.Net Framework 4.5 之前安装AppScan安全测试工具时,就要求.Net 4.5以上环境,我其中一台电脑的系统是Win7-32bit的,安装.Net ...

  3. 2017 cinemachine

    只有2017以上才可以使用~ 导入Asset store中的cinemachine,会在上方显示cinemachine.每创建一个虚拟摄像机,就会在主摄像机下创建组件  cinemachine Bra ...

  4. 微信小程序wx.navigateTo页面不跳转

    排查后发现: 若是在全局app.json中配置了tabBar,引用的链接与wx.navigateTo页面跳转url地址相同就无法实现跳转.

  5. 为什么要学习socket

    为什么要学习socket socket历史悠久.它们的使用始于 1971年的ARPANET,后来成为1983年发布的Berkeley Software Distribution(BSD)操作系统中的A ...

  6. [摘译] IK: 操纵关节式物体的反向动力学和几何约束

    原文: INVERSE KINEMATICS AND GEOMETRIC CONSTRAINTS FOR ARTICULATED FIGURE MANIPULATION http://graphics ...

  7. day-11函数的形参与实参

    形参与实参 参数介绍: 函数为什么要有参数:因为内部的函数体需要外部的数据 怎么定义函数的参数:在定义函数阶段,函数名后面()中来定义函数的参数 怎么使用函数的参数:在函数体中用定义的参数名直接使用 ...

  8. mac上遇到的坑

    mac上有两个python版本  当我执行命令时提示 command not found    但是我已经安装了包了 但是由于有两个python版本  当前项目用的时python3所以需要使用pip3 ...

  9. 【javaScript基础】异常处理

             理解异常在javaScript面向对象编程是非常重要的,异常是一种非常强大的处理错误的方式. 错误处理          首先我们来看一个有问题的代码: nonexistant(); ...

  10. oracle 中update多个字段

    update  A set (A.a2,A.a3) =(select B.b2,b.b3 from  B where B.b1= A.a1 and A.a3=100 )