JQuery属性相关操作

文章目录

JQuery属性相关操作
- 一、尺寸相关、滚动事件
- - 1、获取和设置元素的尺寸
  - 2、获取元素相对页面的绝对位置
  - 3、获取浏览器可视区宽度高度
  - 4、获取页面文档的宽度高度
  - 5、获取页面滚动距离
  - 6、页面滚动事件
- 二、jquery属性操作
- - 1.属性节点操作—attr方法
  - 2.属性节点操作—prop方法
  - 3.属性节点操作—操作class属性
  - 4.html() 取出或设置html内容
- 三、事件
- - 1.jquery循环
  - 2.jquery事件
  - 3.事件冒泡
  - 4.事件委托

一、尺寸相关、滚动事件

1、获取和设置元素的尺寸

width()、height()    获取元素width和height
innerWidth()、innerHeight()  包括padding的width和height
outerWidth()、outerHeight()  包括padding和border的width和height
outerWidth(true)、outerHeight(true)   包括padding和border以及margin的width和height

例：

width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。下面的例子返回指定的 <div> 元素的宽度和高度：<script>
$(document).ready(function(){$("button").click(function(){var txt="";txt+="div 的宽度是: " + $("#div1").width() + "</br>";txt+="div 的高度是: " + $("#div1").height();$("#div1").html(txt);});
});
</script><div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div><br><button>显示 div 元素的尺寸   </button><p>width() - 返回元素的宽度</p><p>height() - 返回元素的高度</p>innerWidth() 方法返回元素的宽度（包括内边距）。innerHeight() 方法返回元素的高度（包括内边距）。下面的例子返回指定的 <div> 元素的 inner-width/height：<script>
$(document).ready(function(){$("button").click(function(){var txt="";txt+="div 宽度: " + $("#div1").width() + "</br>";txt+="div 高度: " + $("#div1").height() + "</br>";txt+="div 宽度，包含内边距: " + $("#div1").innerWidth() + "</br>";txt+="div 高度，包含内边距: " + $("#div1").innerHeight();$("#div1").html(txt);});
});
</script>outerWidth() 方法返回元素的宽度（包括内边距和边框）。outerHeight() 方法返回元素的高度（包括内边距和边框）。下面的例子返回指定的 <div> 元素的 outer-width/height：<script>
$(document).ready(function(){$("button").click(function(){var txt="";txt+="div 宽度: " + $("#div1").width() + "</br>";txt+="div 高度: " + $("#div1").height() + "</br>";txt+="div 宽度，包含内边距和边框: " + $("#div1").outerWidth() + "</br>";txt+="div 高度，包含内边距和边框: " + $("#div1").outerHeight();$("#div1").html(txt);});
});
</script>

2、获取元素相对页面的绝对位置

offset()

语法：

1、返回偏移坐标

 $(selector).offset();top: $(selector).offset().top;left: $(selector).offset().left;

2、设置偏移坐标：

$(selector).offset({top:value,left:value});

参数的含义：{top:value,left:value} 当设置偏移时是必需的。规定以像素为单位的 top 和 left 坐标。
可能的值：(1)、名/值对，比如 {top:100,left:100} ， (2)、一个带有 top 和 left 的对象（实例）
3、使用函数设置偏移坐标：

  $(selector).offset(function(index,currentoffset));

可选。规定返回包含 top 和 left 坐标的对象的函数。
index - 返回集合中元素的 index 位置。
currentoffset - 返回被选元素的当前坐标。

offset 的定义和用法：

offset() 方法设置或返回被选元素相对于文档的偏移坐标

1、当用于返回偏移时：

该方法返回第一个匹配元素的偏移坐标，它返回一个带有2个属性( 以像素为单位的 top 和 left 位置)的对象
2、当用于设置偏移时：

该方法设置所有匹配元素的偏移坐标，

实例

<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){名/值 对$("button").click(function(){$("p").offset({top:200,left:200});});对象$("button").click(function(){newPos=new Object();
newPos.left="0";
newPos.top="100";
$("p").offset(newPos);
});函数$("p").offset(function(n,c){newPos=new Object();
newPos.left=c.left+100;
newPos.top=c.top+100;
return newPos;
});});
</script>
</head>
<body><p style="border:1px solid red">This is a paragraph.</p>
<button>Set the offset coordinates of the p element</button></body>
</html>

注意事项

`offset() 方法返回的top , left. 跟 margin-top,margin-left 也有关系。
如果元素有margin-top,margin-left. 它获取当前的margin. 没有则是默认取值。
如果父元素也有margin,broder 的话。它也会受到影响。取值要更大。因为offset() 取的当前与文档的偏移坐标。

3、获取浏览器可视区宽度高度

$(window).width();
$(window).height();

4、获取页面文档的宽度高度

$(document).width();
$(document).height();

5、获取页面滚动距离

$(document).scrollTop();
$(document).scrollLeft();

6、页面滚动事件

$(window).scroll(function(){  ......
})

<html><head>
<title></title>
</head><style>*{margin:0;padding:0;}.father{width:100px;height:100px;overflow:auto;}</style><script src="http://code.jquery.com/jquery-latest.js"></script><script>$(function(){console.log($('.father').scrollTop())      //获取div的滚动距离$('.father').scrollTop(100)                //设置滚动条滚动的距离console.log($('body').scrollTop()+$('html').scrollTop())  //获取浏览器滚动条滚动的距离，考虑到了浏览器兼容性$('body,html').scrollTop(100)                     //设置浏览器滚动条滚动的距离，考虑到兼容性问题，必须这样写})</script><body><div class="father"> 我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div</div><br><br><br><br><br>
</body>
</html>

二、jquery属性操作

1.属性节点操作—attr方法


<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script src="../js/jquery.min.js"></script></head><body><img id="star" src="../img/bady.jpg" remark="图片备注"><br><button id="change">改变图片属性</button><script>/***  通过attr()方法操作属性，可以是固有属性，也可以是自定义属性。* 固有属性：元素上本身就有的属性(被工具提示出来)* 自定义属性：手动添加到元素上的属性(不被工具提示出来)*  设置属性：attr(属性名，属性值)*  获取属性：attr(属性名)*   * removeAttr()：删除指定的属性*  设置多个属性：attr(*  {*     属性名:值1,*  属性名2:值2*  })* */$("#change").click(function() {//设置图片的src属性$('#star').attr("src", "../img/tly.jpg");console.log("图片的src:" + $("#star").attr("src"));//删除指定属性remark$('#star').removeAttr("remark");console.log("图片的remark:" + $("#star").attr("remark"));$("#star").attr({"title":"大美女","remark":"佟丽娅"})});</script></body></html>

2.属性节点操作—prop方法

取出或设置某个属性的值

// 取出图片的地址var $src = $('#img1').prop('src');// 设置图片的地址和alt属性$('#img1').prop({src: "test.jpg", alt: "Test Image" });


<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body>性别:<input type="radio" name="sex" id="sex1" value="man" />男<input type="radio" name="sex" id="sex2" value="woman" />女<br> 爱好:<input type="checkbox" name="hobby" id="hb1" value="篮球" />篮球<input type="checkbox" name="hobby" id="hb2" value="足球" />足球<input type="checkbox" name="hobby" id="hb3" value="旅游" />旅游<br>故乡：<select name="city" id="city"><option value="1">北京</option><option value="2">上海</option><option value="3">广州</option><option value="4">武汉</option></select><button id="sel1">设置选中的性别</button><button id="sel2">设置选中的爱好</button><button id="sel3">设置选中的故乡</button><button id="sel4">获取元素的选中状态</button><button id="sel5">设置元素的禁用(禁用按钮2)</button>
<script src="../js/jquery.min.js"></script><script>/*prop():操作表单元素的checked,disabled,selected属性*  语法：*  设置属性 -- prop(属性名，值)*  获取属性-- prop(属性名)* */$("#sel1").click(function(){//设置"女"被选中$("input[name=sex]:eq(1)").prop("checked",true);});$("#sel2").click(function(){//设置"篮球"和"足球"被选中//  $("#hb1,#hb2").prop("checked",true);for(var i=0;i<=1;i++){$("input[name=hobby]:eq("+i+")").prop("checked",true);}           });$("#sel3").click(function(){//让第2项"上海"被选中$("#city>option:eq(1)").prop("selected",true);})$("#sel4").click(function(){//获取"上海"这一项的选中状态var flag=  $("#city>option:eq(1)").prop("selected");console.log("上海这项的选中状态:"+flag);});$("#sel5").click(function(){$("#sel2").prop("disabled",true);})</script></body></html>

3.属性节点操作—操作class属性


<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>.boxstyle {width: 100px;height: 100px;background-color: red;}.boxstyle2 {font-size: 26px;background-color: blue;}</style></head><body><div id="box">我是div</div><button id="sel1">添加class</button><button id="sel2">移除class</button><button id="sel3">切换class</button><!-- 引入jQuery库文件 --><script src="../js/jquery.min.js"></script><script>/*   操作class属性的方法:*   1. addClass():给元素添加1个或多个类(class),相当于在元素上写class="xxx",参数是类名*  如果添加多个类，多个类名之间用空格隔开,当多个类里面有相同样式名，后者的样式值会覆盖前者*  2. removeClass()：从元素上移除一个或多个类，参数是类名(多个类名之间用空格隔开),*   如果没有参数表示移除所有的类*  3.hasClass():可以用来判断元素中是否含有某个class，有返回true,否则返回false*  4.toggleClass():切换被选元素的类，如果元素中有指定的类，就移除，没有就添加该类,*参数也是类名*  相当于先判断是否有指定的类，没有就添加，有就移除*   *  if(元素.hasClass(类名)){*       元素.removeClass(类名)* }else{*      元素.addClass(类名) * }** */$('#sel1').click(function(){//给元素添加类boxstyle//$("#box").addClass("boxstyle");$("#box").addClass("boxstyle boxstyle2");});$('#sel2').click(function(){//移除元素上的boxstyle类$("#box").removeClass("boxstyle");});$("#sel3").click(function(){$("#box").toggleClass("boxstyle");})</script></body></html>

4.html() 取出或设置html内容

// 取出html内容var $htm = $('#div1').html();// 设置html内容$('#div1').html('<span>添加文字</span>');

三、事件

1.jquery循环

1、 var userList = [11,22,33,44];$.each(userList,function(i,item){console.log(i, item);});
结果输出：
0 11
1 22
2 33
3 44//用法：$.each()  第一个参数是循环的对象 ， 第二个参数对对象中的每一个元素 执行
//function函数 ，function 的第一个参数 i 是索引，item 是 循环对象中
//的每一个元素。//一般的写法：  for(var i in userList){}   这里面的 i 是 索引。//如果循环对象是 字典，上面的 i， item 分别是 key ， value 。//2、 如果有一个 table 包含多个 tr ， 每个 tr 包含多个 td ， td 中 有
//checkbox 。如果要循环 checkbox 。可以用以下的写法：function ReverseAll(){$('table :checkbox').each(function(){var isChecked = $(this).prop('checked');     // $(this) 获取当前的循环对象，此例中表示 table 中的 checkbox 子元素 集合中的一个元素if(isChecked) { $(this).prop("checked",false); }else{ $(this).prop("checked",true);  }}) ;}//此函数实现对 table表中所有的checkbox 反选功能。
//此处用 $('table :checkbox') 选择器 获取的 table 对象中的所有
//checkbox 子元素，并且对每个子元素 执行 function 。是一种链式编程。$(function(){$('.list li').each(function(i){$(this).html(i);})
})
......
<ul class="list"><li></li><li></li><li></li><li></li><li></li><li></li>
</ul>

2.jquery事件

事件函数列表：

blur() 元素失去焦点
focus() 元素获得焦点
change() 表单元素的值发生变化
click() 鼠标单击
dblclick() 鼠标双击
mouseover() 鼠标进入（进入子元素也触发）
mouseout() 鼠标离开（离开子元素也触发）
mouseenter() 鼠标进入（进入子元素不触发）
mouseleave() 鼠标离开（离开子元素不触发）
hover() 同时为mouseenter和mouseleave事件指定处理函数
mouseup() 松开鼠标
mousedown() 按下鼠标
mousemove() 鼠标在元素内部移动
keydown() 按下键盘
keypress() 按下键盘
keyup() 松开键盘
load() 元素加载完毕
ready() DOM加载完成
resize() 浏览器窗口的大小发生改变
scroll() 滚动条的位置发生变化
select() 用户选中文本框中的内容
submit() 用户递交表单
toggle() 根据鼠标点击的次数，依次运行多个函数
unload() 用户离开页面绑定事件的其他方式$(function(){$('#div1').bind('mouseover click', function(event) {alert($(this).html());});
});
取消绑定事件$(function(){$('#div1').bind('mouseover click', function(event) {alert($(this).html());// $(this).unbind();$(this).unbind('mouseover');});
});

3.事件冒泡

什么是事件冒泡
在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序
如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活）
或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。
事件冒泡的作用
事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。
阻止事件冒泡
事件冒泡机制有时候是不需要的，需要阻止掉，通过 event.stopPropagation() 来阻止

$(function(){var $box1 = $('.father');var $box2 = $('.son');var $box3 = $('.grandson');$box1.click(function() {alert('father');});$box2.click(function() {alert('son');});$box3.click(function(event) {alert('grandson');event.stopPropagation();});$(document).click(function(event) {alert('grandfather');});
})......<div class="father"><div class="son"><div class="grandson"></div></div>
</div>

阻止默认行为

阻止表单提交

$('#form1').submit(function(event){event.preventDefault();
})

合并阻止操作

实际开发中，一般把阻止冒泡和阻止默认行为合并起来写，合并写法可以用

// event.stopPropagation();
// event.preventDefault();// 合并写法：
return false;

4.事件委托

事件委托就是利用冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操作，事件委托首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作。

一般绑定事件的写法

$(function(){$ali = $('#list li');$ali.click(function() {$(this).css({background:'red'});});
})
...
<ul id="list"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li>
</ul>

事件委托的写法

$(function(){$list = $('#list');$list.delegate('li', 'click', function() {$(this).css({background:'red'});});
})
...
<ul id="list"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li>
</ul>

JQuery属性、事件相关操作相关推荐

Ae：图层的常用属性及相关操作
◆ ◆ ◆ 图层的变化属性除音频图层外,每个图层都会有一个变换 Transform属性组,包括锚点.位置.缩放.旋转和不透明度等五大基本属性. 锚点 Anchor Point 快捷键:A 锚点是 ...
php js attr,jquery属性与自定义属性操作:attr()和removeAttr()
jquery属性与自定义属性操作:attr()和removeAttr() 预备知识: 读取器,设置器 1. 有一些函数,可以根据参数的数量不同,执行不同的功能,返回不同的值,类似于功能重载 2. 传入 ...
jQuery 效果函数，jquery文档操作，jQuery属性操作方法，jQuerycss操作函数，jQuery参考手册-事件，jQuery选择器
jQuery 效果函数方法描述 animate() 对被选元素应用"自定义"的动画 clearQueue() 对被选元素移除所有排队的函数(仍未运行的) delay() 对被选 ...
jquery对于属性和事件的操作
回顾js中对于属性的操作: dom对象: 通过document.getElementById()-..获取的对象都是dom对象. Jquery对象: 通过jquery选择器获取的对象都是jquery对 ...
Mr.J-- jQuery学习笔记(三十二)--jQuery属性操作源码封装
扫码看专栏 jQuery的优点 jquery是JavaScript库,能够极大地简化JavaScript编程,能够更方便的处理DOM操作和进行Ajax交互 1.轻量级 JQuery非常轻巧 2.强大的 ...
jQuery库的简单使用:jQuery中的 DOM 操作,增删改查,复制,替换,包裹,属性和样式操作
jQuery中的 DOM 操作查查找属性节点: 通过 jQuery 选择器完成. 操作属性节点: 查找到所需要的元素之后, 可以调用 jQuery 对象的 attr() 方法来获取它的各种属性值 ...
jQuery学习笔记--JqGrid相关操作方法列表备忘重点讲解(超重要)
JqGrid相关操作备忘方法列表特别推荐:怎样获取某一方某一列的值: [html] view plaincopy var rowdata=jQuery("#list").jqG ...
Echarts数据可视化event图表事件的相关操作，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
jQuery 选择器、DOM操作、事件、动画
$(document).ready(function(){}) $(function(){}) 如果获取的对象是jQuery对象,那么在变量前面加上$,例如:var $variable=jQuery对 ...

JQuery属性、事件相关操作