jQuery操作Dom、jQuery事件机制、jQuery补充部分
jQuery操作Dom：
修改属性：
//使用attr()方法
//attr(name, value)
//name:要修改的属性的属性名
//value:对应的值
//attr方法，如果当前标签有要修改的属性，就会进行修改，如果没有，直接添加
例：$("a").attr("href","http://www.baidu.com");
修改多个属性值：
//attr(obj)
$(“img”).attr({
“title”: ”文件名称”，
“src”:”路径”，
“alt:”图片”
})
//获取属性
//attr(name);
在获取不存在的属性的时候此种方法会返回undefined
移除属性：
//removeAttr(name)
//name:要删除的属性名 //attr方法不能用来操作单属性 （checked selected disable）
//操作checked selected disabled 这三个属性需要用到 prop
例：
<script>
$(function(){
$("#btn1").click(function(){
$("#check").prop("checked", true);
});
$("#btn2").click(function(){
$("#check").prop("checked",false);
});
}) ;
</script>
<body>
<input type="button" value="选中" id="btn1"/>
<input type="button" value="不选中" id="btn2"/>
<input type="checkbox" name="" id="check"/>
</body>
jQuery操作值：
//获取表单元素的value值
//val()
// console.log($("#txt").val());
//设置表单元素的value值
//val(value)
//value：要设置的value值
// $("#txt").val("太阳天空照");
当用val()获得select的value值时，获得的是一个数组。（必须要选中，不然返回null）
$(function(){
var $select=$("#select>option").val();
console.log($select);
})
</script>
</head>
<body>
<input type="text" id="txt" value="请输入内容"/>
<select name="" id="select">
<option value="1">134</option>
<option value="2">124</option>
<option value="3">114</option>
html()方法与text()方法:
$(function(){
$("div").text("<span>这是一段内容</span>");//不会转译
//获取内容
// $("div").text()
// $("div").html("<p>文字</p>");会进行转译
});
获取尺寸：
height() width()
$(function(){
$("#btn").click(function(){
var width=$("div").width();
var height=$("div").height();
console.log(width,height);
});
});
jQuery操作坐标值：
offset()方法
$(function () {
$("#btnGetOffset").click(function () {
//offset()方法可以用来获取 当前元素距离页面坐上角的坐标
//{top: 20, left: 20}
var offset = $("div").offset();
console.log(offset.top, offset.left);
});
$("#btnSetOffset").click(function () {
//offset(obj)
//设置当前元素距离页面左上角的坐标
//obj: {top:value, left:value}
$("div").offset({
top: 40,
left: 40
});
});
$("#btnGetPosition").click(function () {
//postion方法用来获取当前元素相对于有定位的父元素的位置，如果父元素没有设置定位，会继续往上找，直到找到body
//position方法只能够获取位置不能够修改位置
var pos = $("#inner").position();
console.log(pos);
});
})
scrollTop方法
设置或者获取垂直滚动条的位置
//获取滚动条的滚动距离 left scrollLeft()
// top scrollTop()
$(function(){
$(document).scroll(function(){
var scrollLeft=$(this).scrollLeft();
var scrollTop=$(this).scrollTop();
console.log(scrollLeft,scrollTop);
});
});
bind绑定 和delegate事件
$(function(){
//bind绑定事件
//bind(types,eventHandler)
//types事件类型，是字符串，如果有多个用空格隔开
//eventHandler:事件处理函数
$(function(){
$("div").bind("mouseenter click",function(){
alert("哈哈");
});
$("#btn").click(function(){
$("div").append("<p>233</p>")
});
//delegate 事件委托
//同时绑定多个时间，也可动态给元素添加事件
$("div").delegate("p","mouseenter",function(){
alert("事件委托");
});
})
});
on()绑定事件
//on方法绑定事件
//on(types,selector,eventHandler)
//types 事件类型多个事件用空格隔开
//selector要给谁绑定就选择相应的选择器
$(function(){
$("div").append($("p"));
$("div").on("mouseenter click","p",function(){//委托给div实现
alert("哈哈");
});
// $("p").on("mouseenter",function(){
// alert("自身绑定");
// })
});
//on方法绑定事件
//on(types,selector,eventHandler)
//types 事件类型多个事件用空格隔开
//selector要给谁绑定就选择相应的选择器
$(function(){
$("div").append($("p"));
$("div").on("mouseenter click","p",function(){//委托给div实现
alert("哈哈");
});
// $("p").on("mouseenter",function(){
// alert("自身绑定");
// })
});
off()解绑
//off(types)
//括号内是要解绑的事件类型 //1.括号不传参数会解绑所有事件
//$("p").off(); //2.不论是委托事件还是自身绑定事件都会解绑
// $("p").off("click"); //3.解绑所有代理的click事件，元素本身的事件不会被解绑
//$(selector).off( “click”, “**” );
triggle触发事件：
$(function(){
//1.直接调用事件
$("#btn").click(function(){
// $("#txt").focus();
//2.trigger(type)
//括号内是指定要触发的事件类型
// $("#txt").trigger("focus");
//3.注意：这种方式触发事件，不触发浏览器默认行为， 比如:文本框获得焦点的默认行为
$("#txt").triggerHandler("focus");
});
});
事件对象：
|
event.type |
事件类型 |
|
event.data |
存储绑定事件时传递的附加数据 |
|
event.target |
点了谁就是谁 |
|
event.currentTarget |
当前DOM元素，等同于this |
|
event.delegateTarget |
代理对象 |
|
screenX和screenY |
对应屏幕最左上角的值 |
|
offsetX和offsetY |
点击的位置距离元素的左上角的位置 |
|
clientX和clientY |
距离页面左上角的位置（忽视滚动条） |
|
pageX和pageY |
距离页面最顶部的左上角的位置（会计算滚动条的距离） |
|
event.wich |
鼠标按键类型，1=鼠标左键 2=鼠标中键 3=鼠标右键 |
|
event.keyCode |
按下的键盘代码 |
|
event.stopPropagation() |
阻止事件冒泡行为 |
|
event.preventDefault() |
阻止浏览器默认行为 |
阻止事件的冒泡行为除了e. stopPropagation()还有return false;return false;还有阻止浏览器默认行为的作用，所以推荐使用这种方法。
jQuery补充部分：
链式编程：在设置操作的时候才能延续链式编程，返回的是这个对象（return this）
而在获取操作的时候得到的相应的值，不能返回this.
解决办法：使用筛选选择器 end(); 它会改变jQ对象的dom对象，恢复到上一次状态
隐式迭代：
什么是隐式迭代：在方法的内部会为匹配到的所有元素进行循环遍历，执行相应的方法；而不用我们再进行循环，简化我们的操作，方便我们调用。
// $("li").css("backgroundColor","pink");
// 这里获取的是很多的li标签
//$("li")拿到的是10个元素
//当我们执行设置操作的时候，设置的是全部的li
//会对这10个元素进行遍历，然后依次执行设置方法
// $("li").css("fontSize");
//获取方法里面不会有隐式迭代
each()方法：
有了隐式迭代，为什么还要使用each函数遍历？ 大部分情况下是不需要使用each方法的，因为jQuery的隐式迭代特性。 如果要对每个元素做不同的处理，这时候就用到了each方法
//each(function(index,element){})
//index就是当前正在遍历的元素的索引
//element就是当前正在遍历的元素
$lis.each(function (index, element) {
console.log(index);
// console.log(element);
$(element).css("backgroundColor","red");
});
jQuery操作Dom、jQuery事件机制、jQuery补充部分的更多相关文章
- jQuery操作dom事件
参考:jQuery权威指南jQuery初步jQuery选择器jQuery操作domjQuery操作dom事件jQuery插件jQuery操作AjaxjQuery动画与特效jQuery实现导航栏jQue ...
- jQuery框架-2.jQuery操作DOM节点与jQuery.ajax方法
一.jQuery操作DOM 内部插入操作: append(content|fn):向每个匹配的元素内部追加内容. prepend(content):向每个匹配的元素内部前置内容. 外部插入操作: af ...
- 第四章 使用jQuery操作DOM
第四章 使用jQuery操作DOM 一.DOM操作 在jQuery中的DOM操作主要可分为样式操作.文本和value属性值操作.节点操作: 节点操作又包含属性操作.节点遍历和CSS-DOM操作. 其中 ...
- *jquery操作DOM总结 (原创：最全、最系统、实例展示)
jquery操作DOM包括八个方面: 一:jquery对DOM节点的基本操作:二:jquery对DOM节点的CSS样式操作:三:jquery遍历DOM节点:四:jquery创建DOM节点:五:jque ...
- Unit01： jQuery概述 、 jQuery选择器 、 jQuery操作DOM
Unit01: jQuery概述 . jQuery选择器 . jQuery操作DOM 使用jQuery放大字体: <!DOCTYPE html> <html> <head ...
- jQuery操作DOM知识总结
jquery操作DOM(节点) 1.创建元素 //$(htmlStr) //htmlStr:html格式的字符串 $("<span>这是一个span元素</span> ...
- 1、jQuery操作Dom
1.添加元素 <code> <script language="JavaScript">$().ready(function(){$("input ...
- web进阶之jQuery操作DOM元素&&MySQL记录操作&&PHP面向对象学习笔记
hi 保持学习数量和质量 1.jQuery操作DOM元素 ----使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,a ...
- Hybrid App开发之jQuery操作DOM
前言: 前面学习了JQuery的选择器,今天开始学习新的知识,JQuery操作DOM元素. 元素属性的访问与设置 attr(name) 获取元素属性 attr(name,value) 单个属性设置 a ...
随机推荐
- Hcm data loader for cancel work relationship
好好总结一下这个task.没有做好的东西:1.现有的资料和各种各样的工具没有很好的利用起来,造成了用了很多的时间去了解和自己学习.非常的不舒服的.下次要避免这样的浪费时间,学会在工作中学习.现在以及以 ...
- MVC项目
MVC 项目分析: 1.AssemblyInfo.cs 保存管理文件发布的一些属性和版本号 2.Content文件夹(保存相关的样式文件.CSS),scripts文件夹(保存相关的),fonts文件 ...
- matlab struct结构体用法
结构体的赋值: 结构体的赋值,这里不建议用下面这种形式进行统一赋值, s = sturct('field1',values1,'field2',values2,-) 而是建议直接赋值,就是对每一个属性 ...
- 转载：Solr的自动完成实现方式（第一部分：facet方式）
转自:http://www.cnblogs.com/ibook360/archive/2011/11/30/2269059.html 大部分人已经见过自动完成(autocomplete)的功能了(见下 ...
- Oracle:ORA-00955: name is already used by an existing object
下午从生产库导出了一份表结构,用来测试一些问题,由于生产库连接着其他用户下的表所以通过视图在本地模拟一下,于是创建视图: create or replace view csews as select ...
- Bimmap 成像用bitblt 缩放问题
BitBlt不能变尺寸,但是StrectchBlt可以变尺寸,在使用StrectchBlt时要注意,首先要设置一下SetStretchBltMode,通常设成HALFTONE,这样缩放时就不会失真. ...
- otter双主同步安装与配置
otter是阿里的开源数据同步项目,资源地址就不用说了哈,网上找,阿里云论坛关于单方向同步的配置已经很清楚了,理论上说,双主同步也不复杂,但是毕竟 是数据库,比较重要,配置双主的时候,总觉得心里没底, ...
- csdn的app打开贴子显示空白？
csdn或者虎扑的app打开贴子显示空白,卸载后重装仍然有同样的问题. 可能是android系统的WebView版本太落后. 打开应用市场,更新WebView就可以解决了.
- android访问webservice
// nameSpace 命名空间,methodName:方法名字:maps:参数集合:webserviceUrl:访问的webservice的网址:比如:http://17.18.199.100:8 ...
- linux下python调用c模块
在C调用Python模块时需要初始化Python解释器,导入模块等,但Python调用C模块却比较简单,下面还是以helloWorld.c 和 main.py 做一说明: (1)编写C代码,hel ...