jquery--DOM操作基础
元素的访问
元素属性操作
- 获取:attr(name);$("#my").attr("src");
- 设置:attr(name,value);$("#myImg").attr("src","images/1.jpg");
- 多个属性;attr({key1:value1,key2:value2});$("#myImg").attr({src:"images/1.jpg",title:"示例图片"});
- 函数;attr(key,function(index){...});index是当前元素的索引,函数可返回字符串作为元素的属性值
- 删除:removeAttr(name);
内容操作
- html();获取元素的html内容
- html(val);设置元素的html内容
- text();获取文本内容
- text(val);设置文本内容
- html();获取元素的html内容
元素值操作
- val();获取元素的value值
- val(value);设置元素的value值
- val().join(",");获取select标记中多项值
- val(array);数组形式,设置元素被选中
元素样式操作
- 直接设置;.css(name,value);name为样式名,value为对应的参数值;$("p").css("font-size","16");
- 增加css类;addClass(classname);$("div").addClass("clsDiv");
- addClass(class1 class2 ...);多个类,空格隔开
- 类别切换:toggleClass(name);单击切换,再单击恢复
- 删除类:removeClass();移除所有类别
- removeClass(class);移除元素的某一个class类
创建元素节点
动态创建页面元素
- $(html);参数html是动态创建dom元素的html标记字符串;var $div = $("<div>hello world</div>");
- tips:var $str 和 var str 区别;$是jquery的一个标识,作为jquery的实例变量;两者本身意义一样;
- $(html);参数html是动态创建dom元素的html标记字符串;var $div = $("<div>hello world</div>");
复制节点
- clone();仅仅复制元素
- clone(true);复制元素,包括元素的行为方法
替换节点
- replaceWith(content);替换内容
- replaceAll(selector);替换的元素,替换后的元素的事件消失;
遍历元素
- each(function(index){...});使用this可获取该元素的属性或设置某属性
- $("img").each(function(index){ this.title = this.alt; });
- each(function(index){...});使用this可获取该元素的属性或设置某属性
删除元素
- empty();清空页面元素
- remove();删除页面元素,传入参数,可删除某指定元素
节点插入
内部插入
append(content);插入content内容
- append(function(index,html){...});插入函数返回的内容;index是对象索引,html是元素原来的html
- $("div").append(relHtml);function relHtml (){ var $str = "<p>hello world</p>"; return $str;}
- appendTo(content);将方法前部分内容插入到后部分中
- $("span").appentTo($("div"));即将span的内容插入到div中
外部插入
- after(content);向元素外部的后面插入内容
- after(function);向元素外部的后面插入函数返回的内容
- before(content);向元素外部的前面插入内容
- insertAfter() ;将元素的内容插入到另一个元素的后面
- insertBefore();
- after(content);向元素外部的后面插入内容
事件
事件机制
- 事件触发
- 捕获阶段
- 冒泡阶段:子元素触发事件后,回向父元素或上级元素传递,使得父级的事件也被触发;
- 阻止冒泡方法:.stopPropagation()或 return false;
- 事件触发
事件载入
- ready();$(document).ready(function(){...});
- ready()和onLoad()的区别:
- ready();页面dom元素加载完成执行
- onLoad();全部元素加载完成执行
- 简写:$(function(){...});
事件绑定
- 直接绑定事件;$(".btn").click(function(){...});
- bind()绑定;bind(type,[data],func);type-事件类型,[data]-event.data属性传递给事件对象,func-处理函数
- $(".btn").bind("click",function(){...});
- bind()绑定多个事件;
- $(".btn").bind({focus:function(){...},change:function(){...}});
切换事件
- hover(over,out);浮动切换,鼠标移出移进来样式改变;
- $("title").hover(function(){alert("over")},function(){alert("out")});
- toggle(func1,func2,func3,...);单击依次调用函数
- hover(over,out);浮动切换,鼠标移出移进来样式改变;
移除事件
- unbind(type,func);移除绑定事件,该事件之前已经触发的行为结果不会被移除
- 无参,移除所有绑定事件
- 有type,移除type事件
- 有func,移除指定type中的func函数
- unbind(type,func);移除绑定事件,该事件之前已经触发的行为结果不会被移除
鼠标事件
- mouseenter();经过被元素触发,不冒泡
- mouseleave();移开被选元素触发,不冒泡
- mouseover();经过被选元素以及子元素都触发
- mouseout();移开被选元素以及子元素触发
- mousemove();移入被选元素内后,在移动1px都会触发
其他事件
- one(type,[data],func);为所选择的元素绑定,但只触发一次
- trigger(type,[data]);dom加载后自动触发指定类型事件
jquery动画和特效
显示,隐藏
- show();可加入默认字符slow,normal,fast改变速度,也可直接传数值,可有回调函数
- hide();
- $("div").show(2000,function(){...});
- toggle();切换元素样式,可见/隐藏
- toggle();
- toggle(switch);布尔值判断
- toggle(speed,func);
滑动,改变元素的高度
- slideUp(speed,func);
- slideDown(speed,func);
- slideToggle(speed,func);切换滑动
淡入淡出,改变元素的透明度
- fadeIn();淡入,即显示
- fadeOut();淡出,即隐藏
- fadeTo(speed,opacity,func);改变透明度到opacity值
自定义动画
- animate();
jquery--DOM操作基础的更多相关文章
- jQuery DOM操作之结点转移复制
jQuery DOM操作之结点转移复制 $('div').append($('p'))这样即可把p标签移动到div标签里 $('div').append( $('p').html() )是把p标签里的 ...
- JQuery DOM操作(属性操作/样式操作/文档过滤)
jQuery——入门(三)JQuery DOM操作(属性操作/样式操作/文档过滤) 一.DOM属性操作 1.属性 (1).attr() 方法 语法:$(selector).attr(name|prop ...
- JQuery DOM操作 、属性和CSS样式操作、其他函数
DOM操作 1.在div1内部最后追加一个节点 $("#div1").append("<img src='../01-HTML基本标签/img/Male.gif'/ ...
- Jquery DOM 操作列表
jQuery 文档操作方法 这些方法对于 XML 文档和 HTML 文档均是适用的,除了:html(). jQuery 属性操作方法 下面列出的这些方法获得或设置元素的 DOM 属性. 这些方法对于 ...
- 事件冒泡及事件委托的理解(JQuery Dom操作)
jQuery事件冒泡: click mouseenter 等事件没有绑定 也会触发,只是触发后没有任何结果 子元素触发事件后,会把触发事件传递给父元素,那么父元素也会被触发. 不管有没有绑定事件,都会 ...
- jquery DOM操作(一)
上一篇文章是记录了jquery中选择器的作用,这里只要记录下jquery中的DOM操作,还是按照上篇的格式来. 下面是测试用的html代码,接下来DOM的操作会在下面的代码下进行. <body& ...
- JQuery -- Dom操作, 示例代码
1.内部插入节点 * append(content) :向每个匹配的元素的内部的结尾处追加内容 * appendTo(content) :将每个匹配的元素追加到指定的元素中的内部结尾处 * ...
- javascript DOM 操作基础知识小结
经常用到javascript对dom,喜欢这方便的朋友也很多,要想更好的对dom进行操作,这些基础一定要知道的. DOM添加元素,使用节点属性 <!DOCTYPE html PUBLIC ...
- JQuery dom 操作总结
DOM 操作之获取值 获得内容 - text():设置或返回所选元素的文本内容 $("#btn1").click(function(){ alert("Text: &qu ...
- Query节点操作,jQuery插入节点,jQuery删除节点,jQuery Dom操作
一.创建节点 var box = $('<div>节点</div>'); //创建一个节点,或者var box = "<div>节点</div> ...
随机推荐
- Android Animation 知识点速记备忘思维导图
备注的大段文本,无法在图片中体现, 思维导图源文件放在附件中.使用 Xmind 8 制作. 附件:AndroidAnimation-xmind.zip
- C# 程序启动最小化至任务栏及闪烁
主要功能: C#让窗体最小化至任务栏,同时在系统托盘区的图标点击左键能显示窗体,并使窗体闪烁. 首先: 创建窗体应用程序,并添加控件NotifyIcon及ContextMenuStrip控件 Noti ...
- named 快速部署及主机记录普及
实验环境centos7.2,仅供参考 yum -y install epel-release --安装最新yum配置源 cd /etc/yum.repos.d/ # wget http://re ...
- nginx 应用包编译及常用文件配置
1.zlib wget http://www.zlib.net/fossils/zlib-1.2.8.tar.gz 2.openssl wget http://www.openssl.org/sour ...
- HTTP常用状态码大全
HTTP状态码对照表 HTTP response codes 当浏览者访问一个网页时,浏览者的浏览器会向网页所在服务器发出请求.当浏览器接收并显示网页前,此网页所在的服务器会返回一个包含HTTP状态码 ...
- MVC 接收参数时会自动解码
MVC在接收传递过来的参数时,会自动对参数进行解码,无需手动解码 例: public ActionResult SendMsg2(string name) { return Content(name) ...
- 中间人攻击之劫持登录会话(cookies)
关于中间人攻击 中间人攻击(Man-in-the-MiddleAttack,简称"MITM攻击")是一种"间接"的入侵攻击,这种攻击模式是通过各种技术手段将受入 ...
- miniui dataGrid detail grid
<div > <div id="vkhGrjx_grid" class="mini-datagrid" style="wi ...
- [19/03/30-星期六] IO技术_四大抽象类_ 字节流( 字节输入流 InputStream 、字符输出流 OutputStream )_(含字节文件缓冲流)
一.概念及分类 InputStream(输入流)/OutputStream(输出流)是所有字节输入输出流的父类 [注]输入流和输出流的是按程序运行所在的内存的角度划分的 字节流操作的数据单元是8的字节 ...
- SpringMVC关于请求参数乱码问题
String names =request.getParameter("name") request主要接收的参数是form提交 form提交有的时候会伴随着乱码,该乱码的格式为I ...