jquery 事件对象笔记
jQuery元素操作
设置或获取元素固有属性
获取
修改
获取自定义属性
修改自定义属性
<a href="#" index='2'>2</a>
$(function () {
$('a').prop('href', 'www.baidu.com')
console.log($('a').prop('href'));
console.log($('a').attr('index'));
})
jQuery 循环方法
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
$(function () {
var sum = 0
var arr = ['red', 'blue', 'green']
$(".item").each(function (i, domEle) {
// 回调函数第一个参数一定是索引号 索引号可以指定
console.log(i);
// 回调函数的第二个参数一定是DOM元素对象
// dom对象没有css方法
$(domEle).css('color', arr[i])
console.log(domEle);
sum += parseInt($(domEle).text())
console.log(sum);
})
// 循环方法2
// 可以遍历数据,对象
$.each($(".item"), function (i, ele) {
console.log(i); })
})
创建元素
<ul>
<li></li>
</ul>
<div>我是第一个</div>
$(function () {
// 创建元素
var li = $("<li>OK</li>")
// 内部添加
$("ul").append(li) //内部添加并且放到内容最后面
$("ul").prepend(li) //内部添加并且放到内容最前面
// 外部添加
var div = $("<div>我是后添加的</div>")
$("div").after(div) //放到目标元素后面
$("div").before(div) //放到目标元素前面 //删除元素
// $("ul").remove() //删除匹配元素的本身
// $("ul").empty() //删除匹配元素的子节点
$("ul").html("") //删除匹配元素的子节点
})
jQuery事件注册
事件处理on()方法
<div class="box"></div>
$(function () {
// 方法1
$(".box").on({
mouseenter: function () {
$(this).css("background", 'red')
},
click: function () {
$(this).css("background", "green")
}
})
// 方法2
$(".box").on("mouseenter mouseleave", function () {
$(this).toggleClass("current")
})
})
on()方法优势2
<ul>
<li>1</li>
<li>2</li>
</ul>
$(function () {
$("ul").on("click", "li", function () {
alert("ok")
})
})
on()方法优势3
<ol>
<li>123</li>
<li>123</li>
<li>123</li>
</ol>
$("ol").on("click", "li", function () {
alert("ok")
})
var li = $("<li>我是后来添加的</li>")
$("ol").append(li)
事件解绑
$("ol").off() //这个是解除了ol身上所有的事件
$(".box").off("mouseenter") //这个是解除了box身上的鼠标经过事件
$(".box").off("ul", "li") //解除事件委托
jQuery自动触发事件
$(function () {
$(".box").on("click", function () {
alert("ok")
})
// 自动触发
// 1、元素.事件
$(".box").click();
// 2、元素.trigger("事件")
$(".box").trigger("click")
// 3、$(".box").triggerHabdler("事件") 就是不会触发元素的默认行为
$(".box").triggerHabdler("click")
})
jquery 事件对象笔记的更多相关文章
- 知识笔记:jQuery 事件对象属性小结
使用事件自然少不了事件对象.因为不同浏览器之间事件对象的获取,以及事件对象的属性都有差异,导致我们很难跨浏览器使用事件对象.jQuery中统一了事件对象,当绑定事件处理函数时,会将jQuery格式化后 ...
- 深入学习jQuery事件对象
× 目录 [1]获取 [2]事件类型 [3]事件目标[4]当前元素[5]事件冒泡[6]默认行为[7]命名空间[8]返回值[9]键值 前面的话 在触发DOM上的某个事件时,会产生一个事件对象event, ...
- JavaScript 中的window.event代表的是事件的状态,jquery事件对象属性,jquery中如何使用event.target
http://wenda.haosou.com/q/1373868839069215 http://kylines.iteye.com/blog/1660236 http://www.cnblogs. ...
- jquery 事件对象属性小结
使用事件自然少不了事件对象. 因为不同浏览器之间事件对象的获取, 以及事件对象的属性都有差异, 导致我们很难跨浏览器使用事件对象. jQuery中统一了事件对象, 当绑定事件处理函数时, 会将jQue ...
- jQuery事件对象event的属性和方法
事件处理(事件对象.目标元素的获取,事件对象的属性.方法等)在不同浏览器之间存在差异,jQuery在遵循W3C规范的情况下做了封装统一 一.事件对象常用的属性: event.type:获取事件的类型, ...
- jquery事件学习笔记(转载)
一.页面载入1.ready(fn)当DOM载入就绪可以查询及操纵时绑定一个要执行的函数.这是事件模块中最重要的一个函数,因为它可以极大地提高web应用程序的响应速度. 简单地说,这个方法纯粹是对向wi ...
- jQuery事件对象的属性
注:摘自<锋利的jQuery(第二版)> JQuery在遵循W3C规范的情况下,对事件对象的常用属性进行了封装,使得事件处理在各大浏览器下都可以正常运行而不需要进行浏览器类型判断. 1. ...
- JQuery事件机制笔记
一.事件绑定及移除 1.bind() bind()为每个匹配的元素绑定一个或多个事件处理函数: 语法:bind(event,fn)//不能给未来元素添加事件: bind(event,fn); bind ...
- jQuery 事件对象的属性
jQuery 在遵循 W3C 规范的情况下,对事件对象的常用属性进行了封装,使得事件处理在各大浏览器下都可以正常运行而不需要进行浏览器类型判断. (1) event.type 该方法的作用是可以获取到 ...
随机推荐
- tf.nn.conv2d函数和tf.nn.max_pool函数介绍
tf.nn.conv2d(input, filter, strides, padding, use_cudnn_on_gpu=None, name=None) 介绍参数: input:指卷积需要输入的 ...
- 让 axios 支持 finally
当我们执行一个promise操作时,往往伴随的是要做各种状态的修改(如请求开始时显示loading,结束时隐藏 loading), 这个状态修改,如果没有finally函数,我们需要在then和cat ...
- kubernetes系列(十六) - Helm安装和入门
1. helm简介 1.1 为什么需要helm 1.2 helm中几个概念 1.3 helm用途 2. helm安装 3. helm的基本使用 3.1 安装chart仓库里面的chart 3.2 创建 ...
- OSCP Learning Notes - Buffer Overflows(5)
Generating Shellcode & Gaining Root 1.Generate the shellcode on Kali Linux. LHOST is the IP of K ...
- Ethical Hacking - NETWORK PENETRATION TESTING(7)
Gaining Access to encrypted networks Three main encryption types: 1. WEP 2.WPA 3.WPA2 WEP Cracking W ...
- three.js 数学方法之Box3
从今天开始郭先生就会说一下three.js 的一些数学方法了,像Box3.Plane.Vector3.Matrix3.Matrix4当然还有欧拉角和四元数.今天说一说three.js的Box3方法(B ...
- three.js 数学方法之Plane
今天郭先生就来继续说一说three.js数学方法中的plane(平面).在三维空间中无限延伸的二维平面,平面方程用单位长度的法向量和常数表示.构造器为Plane( normal : Vector3, ...
- js JQ动态添加div标签
function renderList(data){ var str = ''; for(var i = 0; i < data.length; i++){ // 动态添加li str += ' ...
- python爬虫获取localStorage中的数据(获取token)
# 此为获取东航登录时的token(经分析js得出此token存储于localstorage中) browser = webdriver.Chrome(executable_path='xxxx')b ...
- NACOS安装和配置
安装包nacos-server-1.1.4.tar.gz 环境 JDK1.8 上传及解压 [root@centos7- ~ ]# mkdir -p /cslc/nacos #通过SFTP将安装包上传至 ...