juery学习总结(二)——juery操作页面元素
所有的操作都可以分为增、删、改、查四种,juery选择器代表查看的功能,那么剩下的操作就是对页面元素增、删、改。页面元素有3部分构成:标签,属性和内容,juery对元素的操作可以从这3方面入手。
一、juery对标签的操作
新建元素
//js创建元素
var ele_div = document.createElement("<div>")
//元素属性
//ele_div.setAttribute("id","demo");
var ele_attr = document.createAttribute("id")
ele_attr.nodeValue="demo"
ele_div.setAttributeNode(ele_attr);
//元素内容
//ele_div.innerHTML="hello world"
var ele_cont =document.createTextNode("hello world");
ele_div.appendChild(ele_cont);
//juery创建元素
var demo = $("<div/>") //HTML字符串是没有属性的元素时,内部使用document.createElement_x创建元素 与$("<div>")相同
//var demo = $("<div id = 'demo' />"); //内部使用innerHTML创建元素
//元素属性
demo.prop("id","demo") //等同与attr()
//元素内容
demo.html("hello world")
删除元素
//js删除元素 (removeChild()只能删除其下一级元素)
//找到要刪除的元素
var demo = $("ul li")[2]
//找到其上級元素
document.getElementsByTagName("ul")[0].removeChild(demo)
//demo.parentNode.removeChild(demo)
//body 刪除所有节点 好像只能body使用 并且无法使用选择器选择的body对象执行这个方法
//document.body.removeNode()
//无法删除
//document.body.removeChild(demo)
//juery删除元素
//删除元素
$("ul li:eq(0)").remove()
//删除被选元素的子元素
$("ul:eq(0)").empty();
二、juery对元素的操作
新增和删除属性
//基本的操作在上面介绍过了
var demo = $("ul li:eq(0)")[0] //1、新增自定义属性
demo.setAttribute("tkey","demo");
//删除属性
//demo.removeAttribute("tkey")
//demo.attributes.removeNamedItem("tkey") //两种方式效果相同
$("ul>li[tkey]").html("hello world") //2、操作css类 用getAttribute()和setAttribute()方法 要考虑浏览器兼容问题
demo.className="class_1 class_3"
//$("ul>li[class=class_1]").next().html("hello world")
$("ul>li[class*=class_1]").next().html("hello world")
//根据js对字符串操作来重新为className赋值 js中暂时没找到对应的方法
//增加一个className
demo.className = demo.className+" "+"class_2";
//更换className
demo.className = demo.className.replace("class_2","class_3")
//删除一个className
demo.className = demo.className.replace("class_3"," ")
document.getElementsByClassName("class_3")[0].innerHTML="class_1"
//juery 操作元素属性
var ab={"id":"li_0","tkey":"demo"}
var demo = $("ul li:eq(0)")
demo.html("hello world")
//新增属性
demo.attr(ab)
//demo.attr("id","demo");
//删除属性
//demo.removeAttr("id") //1、操作css类
//新增class
demo.attr("class","class_1")
demo.addClass("class_2")
//删除class
demo.removeClass("class_4")
demo.removeClass()
//判断是否存在className
alert(demo.hasClass()) //开始未指定class和移除class时 为false
//含有判断的操作
demo.toggleClass("class_4") //存在就删除 不存在就增加
demo.toggleClass("class_4",false) //true 增加 false 删除 同addClass(name)和removeClass(name) 不同于removeClass()
//修改css样式
//demo.css("color:red")没有效果
//demo.css("color")= "red"
demo.css("color","red")
//没有找到juery 直接删除样式的例子,都是通过修改className来更换样式
三、juery对元素内容操作
元素内容为开始标签和结束标签之间的部分,里面可以只有文本也可以包含多个页面元素。
新增
//js插入数据
//准备操作对象
var demo = $("ul li:eq(0)").clone()
demo.html("hello world")
var dom_demo=demo[0]
var dom_ul = $("ul:eq(0)")[0];
//将node添加到childNodes的末尾
dom_ul.appendChild(dom_demo)
//在选择node后插入使用的是同一个对象的话 不会另外复制一份
dom_ul.insertBefore(dom_demo,document.getElementsByTagName("li")[1])
//没有这个方法
//dom_ul.insertAfter(dom_demo,document.getElementsByTagName("li")[1])
//juery
//使用上面的对象
//插入数据
$("<li>hello world</li>").appendTo('#d_ul') //$(dom_ul) dom_ul 效果一样 说明appendTo(dom)内的内容会使用$(dom)转换成juery对象 如果$(dom)不是一个juery对象无法执行
$(dom_ul).append("<li>hello world</li>"); //效果同上 只不过参数位置不同
$("ul>li:eq(3)").after("<li>hello world</li>") //同insertAfter() 虽然资料上说insertAfter()接受的是juery对象 但是它会自动转换传入的对象
$("ul>li:eq(3)").before("<li>hello world</li>") //同insertBefore() 同上
修改
1 //js 替换子元素
2 var dom_ul = $("ul:eq(0)")[0]; //等同于 document.getElementByTagName("ul")[0]
3 var demo = $("<li>hello world</li>")[0]
4 dom_ul.replaceChild(demo,$("ul>li :eq(3)")[0])
5 document.replaceChild(demo,$("ul>li :eq(3)")[0]) //会替换掉ul中第4个元素
//juery替换子元素
var dom_ul = $("ul:eq(0)"); //等同于 document.getElementByTagName("ul")[0]
var demo = $("<li>hello world</li>")
//demo.replaceWith(dom_ul.find("li:first-child")) //写反了
//将选择的内容替换成()中的内容 ()中的内容会 $()转换成juery对象 因此可以传入dom 字符串等可以解析成juery对象的参数
dom_ul.find("li:first-child").replaceWith(demo);
//dom_ul.replaceAll(demo) //又反了
//将选择的内容替换到括号内的选择器 传入参数类型同上
demo.replaceAll(dom_ul)
参考资料:
JS操作元素的属性和方法:http://weirhp.iteye.com/blog/963835
jquery插入方法汇总:http://blog.sina.com.cn/s/blog_700e11ff0101b2y2.html
juery学习总结(二)——juery操作页面元素的更多相关文章
- Selenium with Python 005 - 调用js操作页面元素
WebDriver提供了execute_script()方法来执行JavaScript方法,格式如 driver.execute_script(script,*args) 执行js一般有两种场景,一是 ...
- 使用javaScript操作页面元素
from selenium import webdriver import time import unittest from selenium.common.exceptions import We ...
- selenium常用命令--操作页面元素及获取元素内容整理
selenium常用命令之操作页面元素及获取元素内容的事件整理 例子: /**id <input type="text" id="phone" name ...
- [Selenium] 操作页面元素等待时间
WebDriver 在操作页面元素等待时间时,提供2种等待方式:一个为显式等待,一个为隐式等待,其区别在于: 1)显式等待:明确地告诉 WebDriver 按照特定的条件进行等待,条件未达到就一直等待 ...
- F12修改html进行本地js操作页面元素
F12修改html进行本地js操作页面元素
- Java&Selenium调用JS实现高亮被操作页面元素高亮
Java&Selenium调用JS实现高亮被操作页面元素高亮 /* * the method of invoking js to do something * * @author daviey ...
- selenium webdriver学习(四)------------定位页面元素(转)
selenium webdriver学习(四)------------定位页面元素 博客分类: Selenium-webdriver seleniumwebdriver定位页面元素findElemen ...
- 利用 jQuery 操作页面元素的方法,实现电商网站购物车页面商品数量的增加和减少操作,要求单项价格和总价随着数量的改变而改变
查看本章节 查看作业目录 需求说明: 利用 jQuery 操作页面元素的方法,实现电商网站购物车页面商品数量的增加和减少操作,要求单项价格和总价随着数量的改变而改变 当用户单击"+" ...
- 使用 jQuery 操作页面元素的方法,实现浏览大图片的效果,在页面上插入一幅小图片,当鼠标悬停到小图片上时,在小图片的右侧出现与之相对应的大图片
查看本章节 查看作业目录 需求说明: 使用 jQuery 操作页面元素的方法,实现浏览大图片的效果,在页面上插入一幅小图片,当鼠标悬停到小图片上时,在小图片的右侧出现与之相对应的大图片 实现思路: 在 ...
随机推荐
- mongodb之使用explain和hint性能分析和优化
当你第一眼看到explain和hint的时候,第一个反应就是mysql中所谓的这两个关键词,确实可以看出,这个就是在mysql中借鉴过来的,既然是借鉴 过来的,我想大家都知道这两个关键字的用处,话不多 ...
- linux基础知识3_根文件系统详解
文件系统: rootfs:根文件系统 /boot:系统启动相关的文件,如内核.initrd以及grub /dev:设备文件 块设备:随机访问 字符设备:线性访问,按字符为单位 设备号:主设备号(maj ...
- html小技巧
占位符 插入一个非间断空格.一般来说,无论你按多少次空格键,HTML也只会在单词之间显示一个空白间隔.当你需要插入多个空格时,请输入 或 代码.它们名为"空格占位符",你输入几个, ...
- 【原】pageResponse - 让H5适配移动设备全家(移动端适配)
上一篇文章<为什么选择iPhone5的分辨率作为H5视觉稿尺寸>最后留下了问题:是否需要视觉设计师设计多套的视觉稿供给前端工程师做页面适配呢?按照自己以前的方法,通常会要求设计师设计2套的 ...
- [No000095].Net入门级逆向工程-1.SpreadsheetGear汉化
一.SpreadsheetGear汉化 最近,我们的有个项目要用到表格功能,由于历(la)史(ji)遗(kuang)留(jia)的问题,我们不得不用第三方的一个插件SpreadsheetGear来实现 ...
- Boolean()值为false的五个特殊值
在if.while等需要判断条件时,会调用函数Boolean()对判断条件进行隐式转换,而只有五个特殊值才会返回false 这五个值是:undefined, null, "", 0 ...
- Neural Pathways of Interaction Mediating the Central Control of Autonomic Bodily State 自主神经系统-大脑调节神经通路
Figure above: Critchley H D, Harrison N A. Visceral influences on brain and behavior[J]. Neuron, 201 ...
- GDB调试汇编堆栈过程分析
GDB调试汇编堆栈过程分析 分析过程 这是我的C源文件:click here 使用gcc - g example.c -o example -m32指令在64位的机器上产生32位汇编,然后使用gdb ...
- .NET WebAPI 用ActionFilterAttribute实现token令牌验证与对Action的权限控制
项目背景是一个社区类的APP(求轻吐...),博主主要负责后台业务及接口.以前没玩过webAPI,但是领导要求必须用这个(具体原因鬼知道),只好硬着头皮上了. 最近刚做完权限这一块,分享出来给大家.欢 ...
- PHP SPL(PHP 标准库)
一.什么是SPL? SPL是用于解决典型问题(standard problems)的一组接口与类的集合.(出自:http://php.net/manual/zh/intro.spl.php) SPL, ...