`

jquery学习第十番 选择器的一些要注意的问题以及DOM操作

阅读更多

1,特殊符号

. # [ (

如果属性中含有此特殊字符,需要 "\\." "\\#" 转义

2,选择器中含有空格

含有空格选择结果将完全不同,因为空格是后代选择器。

jquery的DOM操作

创建DOM节点

var $li =$("<li></li>");

var $li2=$("<li></li>");

$("ul").append($li).append($li2);

插入节点

删除节点

1,remove $("ul").remove() $("ul").remove("ul[title='aa']")

2,empty() 清除节点内部的内容内部的子节点

复制节点

clone()

$('ul').clone();

$('ul').clone(true); //不仅复制节点,连节点的上的event也被复制

替换节点

replaceWith()

replaceAll()

两者功能一致 $('ul').replaceWith('<li></li>'); $("<li></li>").replaceAll('ul'); 使用顺序相反

包裹节点

wrap() $('li').wrap('<ul></ul>') <ul><li>xsdsx</li></ul> <ul><li>xsdsx</li></ul>

wrapAll() 与wrap不同的是 <ul><li>xsdsx</li><li>xsdsx</li></ul>

属性操作

$('p').attr('title') 获取节点p上的属性 title

$('p').attr('title','jsun') 设置节点p上的单个属性

$('p').attr({"title":"xxx","name":"xxx"}) 设置多个属性

$('p').removeAttr('title') 删除属性

样式操作

获取和设置样式就是 对节点属性class的操作 $('p').attr('class','hh')

追加样式 $('p').addClass('xx');

删除单个样式 $('p').removeClass('xx'); 移除所有样式 $('p').removeClass();

切换样式 $('p').toggleClass('xx') 如果样式xx存在就删除,不存在就添加

判断是否有某个样式 $('p').hasClass('xx') 是否包含样式xx 返回true/false

设置和获取节点内部的 HTML 文本 和 值

.html()

.html('xxxx')

设置和获取节点内文本

.text()

.text('xxxx')

设置和获取节点的value

.val() 返回单个value 或 数组

.val('xxxx') .val(["aa","bb"])

遍历节点

1,children() 得到子元素的数组,不考虑后代元素

2,next() 匹配相邻的同辈元素

3,prev() 与next相反

4,siblings() 匹配所有的同辈元素

5,closest() 返回最近的匹配元素,如果本身符合返回本身,要不然向上查找,直到找到一个,或者返回一个null的jquery对象

CSS-DOM操作

.css("color")

.css({"color":"red","font-size":"30px"})

.height()

.width()

.offset() var x=$('p').offset(); var left =x.left; var top=x.top;

.position()

.scrollTop() .scrollTop(300)

.scrollLeft()

分享到:
评论

相关推荐

    Jquery学习笔记分享

    第2章. jQuery选择器 4 1. jQuery优点 4 2. 基本选择器 4 3. 层次选择器 4 4. 过滤选择器 5 5. 内容过滤选择器 5 6. 可见性过滤选择器 5 7. 属性过滤选择器 6 8. 子元素过滤选择器 6 9. 表单对象属性过滤选择器 7 10...

    jquerydemo

    10. 表单元素过滤选择器 11. 小结1 12. 选择器练习 13. 创建和插入节点 14. 重写 JS 实验之分类添加内容 15. 删除及清空节点 16. 重写 JS 实验之员工管理 17. 克隆和替换节点 18. 包裹节点 19. html() 方法 & val()...

    jQuery开发技术详解

    第6章 使用选择器获得要操作的元素 第7章 操作得到的元素 第8章 使用jQuery进行DOM操作 第9章 jQuery中的事件处理 第10章 jQuery中的动画与效果 第11章 jQuery与AJAX 第12章 回头重看jQuery——核心及工具 第13章 ...

    jQuery选择器上机练习题及答案.rar

    (24)选择表格中第3行,标题行不算(要求用nth-child()过滤器) 上机任务3 用chrome打开dom.sample2.html页面,该页面中内嵌有几个CSS类:.red .green .blue .yellow .thickBorder .seeThrough 在chrome的控制台...

    jQuery权威指南-源代码

    其次详细讲解了jQuery的各种选择器、jQuery操作DOM的方法、jQuery中的事件与应用、jQuery中的动画和特效、Ajax在jQuery中的应用,以及各种常用的jQuery插件的使用方法和技巧,所有这些知识点都配有完整的示例(包括...

    从零开始学习JQuery

    从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery包装集 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 从零开始学习jQuery (五) 事件与事件对象 从零开始学习jQuery (六) ...

    JQuery权威指南源代码

    使用jQuery选择器实现隔行变色 JavaScript代码检测页面元素 jQuery代码检测页面元素 使用jQuery基本选择器 使用jQuery层次选择器 使用jQuery基本过滤选择器 使用jQuery内容过滤选择器 使用jQuery可见性过滤...

    超实用的jQuery代码段

    第10章 jQuery Mobile移动开发技巧 10.1 让页面自适应屏幕宽度 10.2 在移动设备页面中创建多个显示视图 10.3 创建对话框显示效果 10.4 从外部文件中加载页面内容 10.5 为页面添加转场效果 10.6 设置全局默认的转场...

    jQuery权威指南366页完整版pdf和源码打包

    9.5.1 需求分析 9.5.2 效果界面 9.5.3 功能实现 9.5.4 代码分析 9.6 本章小结 第10章 jquery性能优化与最佳实践 10.1 优化选择器执行的速度 10.1.1 优先使用id与标记选择器 10.1.2 使用jquery对象...

    最新Python3.5零基础+高级+完整项目(28周全)培训视频学习资料

    Dom选择器以及内容文本操作 Dom样式操作 Dom属性及创建标签 Dom提交表单及其他 Dom事件操作 Dom事件操作补充 Dom绑定时间的另外一种方式 JavaScript 词法分析解析 前端学习方法分享 Sublime Text工具使用介绍 谢幕 ...

    jQuery完全实例.rar

    注意:此处 this 指代的是 DOM 对象而非 jQuery 对象。 HTML 代码: &lt;img/&gt;&lt;img/&gt; jQuery 代码: $("img").each(function(i){ this.src = "test" + i + ".jpg"; }); 结果: [ , &lt;img src="test1.jpg" /&gt; ] ---...

    You-Dont-Need-jQuery:如何执行查询,样式,dom,ajax,事件等示例,例如带有普通javascript的jQuery

    我们不必从头开始学习jQuery即可进行DOM操作或事件处理。 同时,由于前端库(例如React,Angular和Vue)的普及,直接操作DOM成为反模式,因此jQuery的使用从未如此重要。 该项目总结了IE 10+支持的jQuery方法的本机...

    jquery基础教程高清版PDF.part5.rar

    第10章 插件   10.1 使用插件   10.2 流行的插件   10.2.1 Dimensions   10.2.2 Form   10.2.3 Interface   10.3 查找插件文档   10.4 开发新插件   10.4.1 添加新的全局函数   10.4.2 ...

    精通JavaScript+jQuery Part1

     第10章 理解CSS定位与div布局   10.1 div 标记与 span 标记  10.2 盒子模型  10.3 元素的定位   10.4 定位实例一:轻轻松松给图片签名   10.5 定位实例二:文字阴影效果   第11章 CSS+div布局...

    jquery基础知识第一讲之认识jquery

    2.强大的选择器 3.出色的DOM操作的封装 4.可靠的事件处理机制 5.完善的Ajax 6.不污染顶级变量 7.出色的浏览器兼容性 8.链式操作方式 9.隐式迭代 10.行为层与结构层分离 11.丰富的插件支持 12.完善的文档 13.开源 (1...

    jQuery攻略.pdf

     《jQuery攻略》对使用jQuery过程中遇到的各类问题给出了解决方案,比如,如何使用jQuery框架、CSS选择器、DOM、事件处理、动画效果,以及如何开发Ajax应用程序、如何使用jQuery工具函数、如何使用插件扩展jQuery。...

    python入门到高级全栈工程师培训 第3期 附课件代码

    第10章 01 上节内容回顾以及补充 02 上周作业实现 03 Pycharm的安装和使用 04 Python 运算符 05 Python 运算符以及总结 06 Python 基本数据类型介绍 07 Python 整形的魔法 08 Python 字符串的魔法 第11章 01 ...

    JavaScript基础教程第8版

    第10章 对象和DOM 189 10.1 关于节点操纵 189 10.1.1 DOM 2和W3C 189 10.1.2 DOM 2术语 189 10.1.3 DOM 3 190 10.2 添加节点 191 10.3 删除节点 192 10.4 删除特定的节点 194 10.5 插入节点 197 ...

    Jqury基础教程

    第10章 使用插件 10.1 查找插件和帮助 10.2 使用插件 10.3 Form插件 10.4 jQuery UI插件库 10.4.1 效果 10.4.2 交互组件 10.4.3 部件 10.4.4 jQuery UI ThemeRoller 10.5 其他插件 10.5.1 表单类 10.5.2 ...

    Simple-jQuery.scrollTo:真的,非常简单的 jQuery.scrollTo 函数

    参数:至可以为空、像素数、 'end'字符串、jQuery 选择器或 DOM 元素。 第二种形式不需要。期间可以为空、 0或以毫秒为单位的持续时间。 直接转发到 。功能在动画结束时执行的函数。 直接转发到 。例子: $ . ...

Global site tag (gtag.js) - Google Analytics