jq其他属性操作及jq事件机制

原创 2017年10月07日 00:00:48
A.jQ其他属性操作
1.val方法
val方法用于设置和获取表单元素的值,例如input、select、textarea.
//填参数设置值
$("#name").val(''大触");
//不填参数获取值
$(“#name”).val();
2.html方法
//设置内容
$(“div”).html(“<span>这是一段内容</span>”);
3.text方法
$(“div”).text(“<span>这是一段内容</span>”);
html方法会识别html标签,text方法会那内容直接当成字符串,并不会识别html标签。
4.height
$(“img”).height(200);//设置图片高度200px
$(“img”).height();//200(number类型)
$(“img”).css(“width”)//"200px"(字符串)
5.width用法同height
width()如果不传递参数,是获得盒子的宽度
本质是获取内容的宽度,不包括padding和border;
innerWidth是包括内容+padding,不包括border
outerWidth是包括内容和padding和border
outerWidth如果里面穿参数true则是内容+padding+border+margin;
6.scrollTop/scrollLeft设置或者获取滚动条的位置
$(selector).scrollTop();
jq给window注册scroll事件
$(window).scroll(function(){
var top = $(this).scrollTop();
})
scrollTop()要设置高度,必须要在异步队列中
setTimeout(function(){
$(window).scrollTop(700);
},0)设为0加入异步队列最前面
B.jQuery事件机制
简单事件绑定>>bind事件绑定>>delegate事件绑定>>on事件绑定
1.简单事件绑定就是传统事件绑定的缺点就是一次只能绑定一个事件。
2. bind事件绑定
$("p").bind("click mouseenter", function(){
    //事件响应方法
});
缺点:不支持动态创建出来的元素绑定事件

不管是传统事件绑定,还是bind绑定,都不能给未来元素绑定事件。
delegate委托事件绑定
支持动态事件绑定
$().delegate(selector,'click',function(){
console.log(1);
});
好处,事件只需要绑定一次,节省性能。
可以给未来元素绑定事件。
4.on事件绑定
常用:
$(selector).on( "click",“span”,data,function() {});
参数1.事件类型,参数2.选择器,参数3.回调函数
$(selector).on(events[,selector][,data],handler);
// 第一个参数:events,绑定事件的名称可以是由空格分隔的多个事件(标准事件或者自定义事件)
// 第二个参数:selector, 执行事件的后代元素(可选),如果没有后代元素,那么事件将有自己执行。
// 第三个参数:data,传递给处理函数的数据,事件触发的时候通过event.data来使用(不常使用)
// 第四个参数:handler,事件处理函数
5.off()解绑
off()不传参,解绑所有事件,包括绑定事件
传参(‘事件’),只解绑传递过来的事件,
box.off('click',**'')只解绑委托事件
6.事件触发
$('').click();
$().trigger('click');

整理1.1.1 jQuery事件对象()
对象属性
解释
event.type
事件类型
event.data
存储绑定事件时传递的附加数据
event.target
点了谁就是谁
event.currentTarget
等同于this,将来调用这个事件的对象
event.delegateTarget
代理对象
screenXscreenY
对应屏幕最左上角的值
offsetXoffsetY
点击的位置距离元素的左上角的位置
clientXclientY
距离页面左上角的位置(忽视滚动条)
pageXpageY
距离页面最顶部的左上角的位置(会计算滚动条的距离)
event.witch
鼠标按键类型,1=鼠标左键 2=鼠标中键 3=鼠标右键
event.keyCode
按下的键盘代码
event.stopPropagation()
阻止事件冒泡行为
event.preventDefault()
阻止浏览器默认行为(a链接跳转)
return false;
既阻止冒泡,又阻止了默认行为
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

2017.7.14 学习笔记 JQ选择器的使用及JS输入框事件及获取其相对属性值

JQ简化js代码的语言 为所有p标签添加颜色--> $(document).ready(function(){ $("button").click(functi...

[JQ_node3] 事件机制

JQ事件绑定及移除 bind() 为每个匹配的元素绑定一个或多个事件处理函数语法:bind( event , fn ) //不能给未来元素添加事件$("p").bind("click", funct...

jq框架封装学习笔记5-样式操作与属性操作模块

样式操作有哪些方法常用.css(), .addClass(), .hasClass(), .removeClass(),.toggleClass().css 方法 jepson...

2016.11.11 jq(复习1 选择器 事件 效果)

基础 jQuery:$(document).ready(function(){}   库的替代:如果您不愿意在自己的计算机上存放 jQuery 库,那么可以从 Google 或 Microsoft ...

套UpdatePanel控件导致jq相关事件失效解决办法

今天写下拉DropDownList控件回传到后台执行某方法导致其他按键绑定的JQ事件失效$(function () { $("#Columnselection").click(function...

JQ高级事件之on、off、one

看了李炎恢老师的视频,这三个方法是可以代替之前的绑定和事件委托的,之前的笔记是用来作为铺垫,方便这次的学习! 我现在前面记录下我们原先的事件绑定 普通的绑定 .bind 普通的解绑.unbind...

JQ高级事件之模拟与命名空间

今天学习李炎恢老师所讲的JQ高级事件,~再此记下笔记来方便以后复习! 那什么是高级事件,模拟操作,命名空间,事件委托,on,off,one那什么是模拟操作!模拟用户操作,类似于按钮,浏览器自动点击按...

jq绑定事件方法及区别

第一种方式:$(document).ready(function(){ $("#clickme").click(function(){ alert("hello world c...

addEventListener,jq.on以及事件委托

事件起因:某天在知乎上看到这个问题https://www.zhihu.com/question/56814906。               ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)