jquery对象操作
| 大类 | JQ方法 | 备注 |
| 创建元素 | var $h1 = $(“<h1></h1>”) | 将内含的HTML包装为JQuery对象,并返回 |
| 创建文本 | var $h1 = $("<h1>DOM模型</h1>") | 可以用任何HTML代码创建文本 |
| 创建属性 | var $h1 = $(“<h1 class = ‘red’>DOM模型</h1>”) | 可以用任何HTML代码创建文本 |
| 节点内插入元素 | $("body").append("ul") | 向与前者匹配的元素内追加新内容(插在最后一个子元素) |
| $("ul").appendTo("body")(具有破坏性) | 把与前者匹配的元素追加到后者中(插在最后一个子元素) | |
| $("body").prepend("ul") | 向与前者匹配的元素内追加新内容(插在第一个子元素) | |
| $("ul").prependTo("body")(具有破坏性) | 把与前者匹配的元素追加到后者中(插在第一个子元素) | |
| 节点外插入元素 | $("div").affter("<p>lyo<p>") | 向与前者匹配的元素之后插入新内容 |
| $("<p>lyo<p>").insertAffter("div")(具有破坏性) | 把与前者匹配的元素插入到另一个指定元素集合的后面 | |
| $("div").before("<p>lyo<p>") | 向与前者匹配的元素之前插入新内容 | |
| $("<p>lyo<p>").insertBefore("div")(具有破坏性) | 把与前者匹配的元素插入到另一个指定元素集合的前面 | |
| 删除元素 | var $p=$("p").remove() | 从DOM中删除所有匹配的元素,并可以返回被删除的元素 |
| var $p=$("p").emtpy() | 删除匹配的元素集合中所有的子节点 | |
| 复制元素 | var $div = $("div").clone() | 复制匹配的dom元素并选中这些复制副本 |
| 替换元素 | $("p").replaceWith("<div>lyo</div>") | 把所有与前者匹配的元素替换成后面的HTML或DOM元素 |
| $("<div>lyo</div>").replaceAll("p") | 把所有与后者匹配的元素替换成前面的HTML或DOM元素 | |
| 包裹元素 | $("p”).wrap(<span class ‘wrap’ /") | 匹配前者的每个元素外被后者包裹 |
| $("p”).wrapInner(<span class ‘wrap’ /") | 匹配前者的每个元素内包裹后者 | |
| $("p”).wrapAll(<span class ‘wrap’ /") | 匹配前者的元素集外被后者包裹 | |
| 设置属性 | $("p”).attr(“title”,"段落文本") | 可以批量设置属性,两个参数分别为 1、指定属性名 2、指定属性值 |
| 获取属性 | alert($("p”).attr(“title”)) | 只设定一个参数表示读取该属性值 |
| 删除属性 | $(“p”).removeAttr(“title”) | 删除指定的元素属性 |
| 追加样式 | $("p”).addClass(“lyo”) | 为元素追加新的样式,指定类名即可,但需要先定义CSS类样式 |
| 移除样式 | $("p”).removeClass(“lyo”) | 若要删除多个类样式,可以用空格将其分隔,移除所有的话,可以不传递参数 |
| 切换样式 | $("p”).toggleClass(“lyo”) | 1、做为开关的类样式名 2、是否打开样式(true/false/表达式返回bool值),若没有设置该参数,系统会根据该元素是否存在自动切换显示隐藏 |
| 判断样式 | alert($("p”).hasClass(“lyo”)) 或 alert($("p”).is(“lyo”)) |
判断元素是否包含指定的类样式,返回bool值 |
| 读写HTML | var s =$(“div”).html() //读 $(“p”).html(s) //写 |
1、不含参数表读取指定节点下结构 2、包含参数表向指定节点写入字符串,覆盖指定节点原来包含的所有内容 |
| 读写文本 | var s =$(“div”).text() //读 $(“p”).text(s) //写 |
同上 |
| 读写表单值 | $(this).val(“lyo”) | 1、不含参数表示读取值 2、含参数表示写入值,参数可以是选项值,也可以是value属性值 |
| 读写CSS样式 | $("p").css(“color”,"red") $("p").css({color:"red",fontsize:”2px”}) |
注意单个样式与多个样式设置时的符号区别 |
| 绝对偏移 | var o1=$(“div”).eq(0).offset() | 获取相对窗口左上角的相对偏移,返回top和Left属性 |
| 相对偏移 | var o1=$(“div”).eq(0).position() | 该指定元素与距离最近的父级元素左上角的偏移距离,但如果父级元素的Position没有定义为absolute/fixed/relative,则当前元素最近的父级定位元素应为body |
| 元素高宽 | $("div”).height(140px) $("div”).width() |
1、无参,读取高宽,返回Px 2、有参,设置高宽 |
| 元素遍历 | var li = $(“body”).children() | 获取当前元素包含的所有子元素,返回集合,可以用~.eq()筛选,或是用数组~[1] |
| var li = $(“body”).parent() | 获取当前元素包含的父元素 | |
| var li = $(“body”).next() | 获取当前元素相邻的下一个同级元素 | |
| var li = $(“body”).parent() | 获取当前元素相邻的上一个同级元素 |
jquery对象操作的更多相关文章
- JQuery对象操作支持链式法则源码分析
JQuery链式法则 何为链式法则?先给出非链式写法的例子 //非链式写法 $("div").css("width", 45px); $("div&q ...
- 【二】jquery之基础概念与jquery对象与dom对象的区别及混合使用
一:jquery基本概念 1.jquery是一个javascript框架,它是一个轻量级的js库 2.当下流行的js库有: jquery MooTools Prototype 3.$(ducoment ...
- jQuery Ajax 操作函数及deferred对象
jQuery Ajax 操作函数 jQuery 库拥有完整的 Ajax 兼容套件.其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据. 函数 描述 jQuery.ajax() 执行异步 H ...
- 认识JQuery,JQuery的优势、语法、多库冲突、JS原生对象和JQuery对象之间相互转换和DOM操作,常用的方法
(一)认识JQuery JQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一套定义好的方法 JQuery的主旨:以更少的代码,实现更多的功能 (二)JQue ...
- jQuery(九)、ajax对象操作
1 数组和对象操作 1.jQuery.extend([deep,] target, object1, [objectN]) 用一个或多个其他对象来扩展一个对象,返回被扩展的对象. 如果不指定targe ...
- 前端笔记之jQuery(上)加载函数的区别&对象&操作HTML/CSS&动画&选择器
一.jQuery简介 1.0 JavaScript编程比较恶心的地方 恶心1:选择元素麻烦,全线兼容的方法只有getElementById()和getElementsByTagName()两个.其他的 ...
- jQuery对象的属性操作
jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作 html属性操作:是对html文档中的属性进行读取,设置和移除操作.比如attr().removeAttr ...
- jquery实现点击展开列表同时隐藏其他列表 js 对象操作 对象原型操作 把一个对象A赋值给另一个对象B 并且对象B 修改 不会影响 A对象
这篇文章主要介绍了jquery实现点击展开列表同时隐藏其他列表的方法,涉及jquery鼠标事件及节点的遍历与属性操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了jquery实现点击 ...
- jQuery对象的链式操作用法分析
可以使用下面的原则判断一个函数返回的时候是jQuery对象,即是否可以用于链式操作. 除了获取某些数据的函数,比如获取属性值"attr(name)",获取集合大小"siz ...
随机推荐
- 解决:eclipse 非正常关闭,导致无法正常启动
eclipse 无法正常启动: !ENTRY org.eclipse.ui.navigator 4 2 2016-09-07 11:23:54.181 !MESSAGE 从插件调用代码时出现问题:“o ...
- GOOGLE地图坐标拾取方法、GOOGLE地图获取坐标方法
方法一: 打开google地图-->查找目的地-->右键:此位置居中--> 打开IE浏览器(百度浏览器.GOOGLE浏览器.360浏览器均不行,只能在IE中获取),在IE浏览器的地址 ...
- 判断当前VC是不是正在展示的活跃页面
viewController.isViewLoaded && viewController.view.window
- 去空格 whitespaceAndNewlineCharacterSet和过滤字符串
一.过滤字符串 可以使用stringByTrimmingCharactersInSet函数过滤字符串中的特殊符号 首先自己定义一个NSCharacterSet, 包含需要去除的特殊符号 NSChara ...
- 谷歌Cartographer学习(1)-快速安装测试
谷歌自己提供了安装方法,但是安装比较繁琐,我做了一定的修改,代码放到个人github上,https://github.com/hitcm/. ros下面的安装非常快捷,只需要catkin_make即可 ...
- Nginx+tomcat负载均衡时静态页面报404
百度到的问题解决BLOG http://os.51cto.com/art/201204/326843.htm nginx+2台tomcat负载均衡,应用程序已部署,单独访问tomcat时,可以访问到所 ...
- android BluetoothLE 多个 setCharacteristicNotification writeCharacteristic 失效
如果在搜索完服务后,执行多个 setCharacteristicNotification 或 writeCharacteristic 操作,某些操作可能会无效.需要在中间等待一些时间,真是一个大坑! ...
- android基于GPS实现定位操作
一.定位的三种方式 1.wifi定位,ip地址定位,通过ip地址进行查询实际地址: 2.基站定位,信号塔,基站:手机通讯服务的设备 ,信号的格数决定了手机距离基站远近,精确度:几十米到几公里,精确度来 ...
- 1 Java线程的内存可见性
Java内存的可见性 可见性: 一个线程对共享变量的修改,能够及时被其它线程看到 共享变量: 如果一个变量在多个线程的工作内存中都存在副本,那么这个变量就是这几个线程的共享变量 Java内存模型(JM ...
- nginx新增绑定域名
例如我要使binzz.com也绑定到原有的www.binzz.com上,在server上添加下面代码: server { listen 80; server_n ...