jquery文档

使用jQuery操作DOM

泄露秘密 提交于 2019-12-31 14:14:04
一.DOM操作分为3类 1.DOM Core DOM Core不是Javascript的专属品,任何一种支持DOM的编程语言都可以使用它.它的用途不仅限于处理一种使用标记语言编写出来的文档 2.HTML-DOM 比DOM Core出现的更早,它提供了一些更加简明的标记来描述各种HTML-DOM的元素属性 3.CSS-DOM CSS-DOM 失针对CSS的操作,在JavaScript中,只要作用是获取和设置style对象各种属性 二.样式操作 1.直接设置样式值 css(name,value) //设置单个属性 css({name:value,name:value,name:value....}) //同事设置多个属性 2.追加样式和移除样式 addClass(class) //追加样式 removeClass(class) //移除样式 3.切换样式 taggleClass() //可以切换不同元素的类样式 三.类容操作 1.html代码操作 html([content]) //可选,规定备选元素的新类容,该参数可以包含HTML标签,无参数时,表示被选元素的文本类容 2.标签类容操作 text([content]) //可选,规定被选元素的新文本类容. 注释,特殊字符会被编码.无参数时,表示获取元素的被选类容 3.属性值操作 val([value]) 四.节点属性操作 1.查找节点

从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式

一世执手 提交于 2019-12-31 06:18:49
一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得大家学习. 二.前言 通过前面几章我们已经能够完全控制jQuery包装集了, 无论是通过选择器选取对象, 或者从包装集中删除,过滤元素. 本章将讲解如何使用jQuery获取和修改元素属性和样式. 三. 区分DOM属性和元素属性 一个img标签: <img src="images/image.1.jpg" id="hibiscus" alt="Hibiscus" class="classA" /> 通常开发人员习惯将id, src, alt等叫做这个元素的"属性". 我将其称为"元素属性". 但是在解析成DOM对象时, 实际浏览器最后会将标签元素解析成"DOM对象", 并且将元素的"元素属性"存储为"DOM属性". 两者是有区别的. 虽然我们设置了元素的src是相对路径:images/image.1.jpg 但是在"DOM属性"中都会转换成绝对路径: http://localhost/images/image.1.jpg . 甚至有些"元素属性"和"DOM属性"的名称都不一样,比如上面的元素属性class, 转换为DOM属性后对应className. 牢记, 在javascript中我们可以直接获取或设置"DOM属性": <script type="text

第86节:Java中的JQuery基础

依然范特西╮ 提交于 2019-12-31 03:56:38
第86节:Java中的JQuery 前言复习 定时器: setInterval clearInterval setTimeout clearTimeout 显示: img.style.display = "block" 隐藏: img.style.display = "none" 获取行 table.rows[] DOM: document.createElement document.createTextNode appendChild 什么是JQuery,有什么用? jquery是一种快速,小巧,功能丰富的JavaScript库,可以让html文档遍历和操作,事件处理,动画和ajax更加容易使用的一种api,可以在多种浏览器中工作。 封装了JavaScript常用的功能代码,提供了一种简便的JavaScript设计模式,优化了HTML文档操作,事件处理,动画设计和ajax交互。 简单来说jquery是一个JavaScript库,简化了JavaScript的编程,很容易学习。 事件,ready(fn) 当dom载入就绪就可以查询及操纵时绑定的一个要执行的函数,这是事件模块中最重要的一个函数,因为它可以提高web应用程序的响应速度。 jquery代码: $().ready(function(){ }); // 导包,引入JQ的文件 <script type="text

jQuery入门笔记

半城伤御伤魂 提交于 2019-12-31 03:56:24
一.jQuery下载安装 1.从 jquery.com 下载 jQuery 库(学习推荐用这种方法,可以在没有网络时使用) 2.从 CDN 中载入 jQuery, 如从 Google 中加载 jQuery(这种方法需要网络环境),可以通过 CDN(内容分发网络) 引用它。Staticfile CDN、百度、又拍云、新浪、谷歌和微软的服务器都存有 jQuery 。如果你的站点用户是国内的,建议使用百度、又拍云、新浪等国内CDN地址。 二.jQuery 语法 通过 jQuery,您可以选取(查询,query) HTML 元素,并对它们执行"操作"(actions) jQuery 语法是通过选取 HTML 元素,并对选取的元素执行某些操作。 基础语法: $( selector ). action () 美元符号定义 jQuery 选择符(selector)"查询"和"查找" HTML 元素 jQuery 的 action() 执行对元素的操作 实例: $(this).hide() - 隐藏当前元素 $("p").hide() - 隐藏所有 <p> 元素 $("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素 $("#test").hide() - 隐藏所有 id="test" 的元素 例如: <!DOCTYPE html> <html> <head

关于浏览器css选择器性能优化

﹥>﹥吖頭↗ 提交于 2019-12-30 21:28:26
【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 作为一个前端开发, 我觉得很有必要了解浏览器对css选择器的解析,因为这个关系到页面的渲染,高效的方式、避开开销大的方式这些无疑为网站加载缩短了时间。 最近在新的项目中陷入了一个误区,也是出于对jquery使用的了解,于是把jquery中选择器的优化放到了写css上面,但是发现其实这两者是不一样的,浏览器解析css是本身默认的规则,而jquery是模拟出来的规则为了用户更好的使用。后面去查找这方面的资料,于是发现自己的错误是那么的可笑。 找到了阿里前端的一篇文章 http://www.aliued.cn/2013/01/24/ 网站css选择器性能讨论.html ,当然也找了其他的一些文章,不过都有说到了safari和webkit的架构师David Hyatt的两段话: 样式系统从最右边的选择符开始向左进行匹配规则。只要当前选择符的左边还有其他选择符,样式系统就会继续向左移动,直到找到和规则匹配的元素,或者因为不匹配而退出。 如果你非常在意页面的性能那千万别使用CSS3选择器。实际上,在所有浏览器中,用 class 和 id 来渲染,比那些使用同胞,后代选择器,子选择器(sibling, descendant and child selectors)对页面性能的改善更值得关注。 因为我项目的原因

jquery中遍历

℡╲_俬逩灬. 提交于 2019-12-28 14:29:01
1、jQuery--Dom遍历   1)jquery遍历---祖先元素 parents() 方法返回被选元素的 所有祖先元素 ,它一路向上直到文档的根元素 (<html>)。也可以使用可选参数来过滤对祖先元素的搜索。 下面的例子返回所有 <span> 元素的所有祖先: $("span").parents(); 下面的例子返回所有 <span> 元素的所有祖先,并且它是 <ul> 元素 $("span").parents(‘ul’); parent() 方法返回被选元素的 父元素, $("span").parents(); parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。 下面的例子返回介于 <span> 与 <div> 元素之间的所有祖先元素 eg、 $("span").parentsUntil("div").css({"color":"red","border":"2px solid red"});   2)jquery遍历---后代 下面是两个用于向下遍历 DOM 树的 jQuery 方法: children() find() children() 方法返回被选元素的所有直接子元素。 该方法只会向下一级对 DOM 树进行遍历。   eg、 $("div").children(); 也可以使用可选参数来过滤对子元素的搜索。下面的例子返回类名为 "1"

jQuery 遍历

好久不见. 提交于 2019-12-28 14:22:57
jQuery遍历,就是根据其相对于其它元素的关系来查找和选取 html 元素。 通过jQuery遍历,能够从被选元素开始,在DOM树中向上移动(祖先),向下移动(子孙),水平移动(同胞)。 jQuery遍历:祖先 向上移动DOM树,来查找元素的祖先。 1. parent() :返回被选元素的 直接 父元素。 2. parents() :返回被选元素的 所有 祖先元素,一直向上,直到文档的根元素;可使用参数来过滤对祖先元素的搜索。 3. parentsUntil() :返回介于两个给定元素 之间 的所有祖先元素。 jQuery遍历:后代 向下遍历DOM树,来查找元素的后代。 1. children() :返回被选元素的所有 直接 子元素;可使用参数来过滤对子元素的搜索。 2. find() :返回被选元素的后代元素,一路向下直到最后一个后代。 jQuery遍历:同胞(siblings) 1. siblings() :返回被选元素的所有同胞元素;可使用参数来过滤对同胞元素的搜索。 2. next() :返回被选元素的下一个同胞元素。(对给定元素之后的元素遍历) 3. nextAll() :返回被选元素的下一个及以后所有的同胞元素。 4. nextUntil() :返回介于两个给定参数之间的所有同胞元素。 5. prev() :返回被选元素的上一个同胞元素。(对给定元素之前的元素遍历)

jQuery遍历

纵饮孤独 提交于 2019-12-28 14:22:05
什么是遍历? jQuery 遍历,意为"移动",用于 根据其相对于其他元素的关系 来 "查找"(或选取)HTML 元素 。(不直接给自己定义id或者class等等,是通过其他元素来找到自己)以某项选择开始,并沿着这个选择移动,直到抵达您期望的元素为止。) 下图展示了一个家族树。通过 jQuery 遍历,您能够从被选(当前的)元素开始,轻松地在家族树中向上移动(祖先),向下移动(子孙),水平移动(同胞)。这种移动被称为对 DOM 进行遍历。 图示解析: <div> 元素是 <ul> 的父元素,同时是其中所有内容的祖先。 <ul> 元素是 <li> 元素的父元素,同时是 <div> 的子元素 左边的 <li> 元素是 <span> 的父元素,<ul> 的子元素,同时是 <div> 的后代。 <span> 元素是 <li> 的子元素,同时是 <ul> 和 <div> 的后代。 两个 <li> 元素是同胞(拥有相同的父元素)。 右边的 <li> 元素是 <b> 的父元素,<ul> 的子元素,同时是 <div> 的后代。 <b> 元素是右边的 <li> 的子元素,同时是 <ul> 和 <div> 的后代。 祖先是父、祖父、曾祖父等等。后代是子、孙、曾孙等等。同胞拥有相同的父。 遍历 DOM jQuery 提供了多种遍历 DOM 的方法。 遍历方法中最大的种类是树遍历(tree

jquery遍历

非 Y 不嫁゛ 提交于 2019-12-28 14:20:51
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jquery遍历</title> <script src="../js/jquery-1.8.3.js"></script> <script src="../js/jquery-1.4.2.js"></script> <style> .ancestors * { display: block; border: 2px solid lightgrey; color: lightgrey; padding: 5px; margin: 15px; } </style> <script> /* * 祖先是父、祖父或曾祖父等等。 * 通过 jQuery,您能够向上遍历 DOM 树,以查找元素的祖先。 * * 向上遍历 DOM 树 * 这些 jQuery 方法很有用,它们用于向上遍历 DOM 树: * parent() * parents() * parentsUntil() */ $(document).ready(function(){ /* * jQuery parent() 方法 * parent() 方法返回被选元素的直接父元素。 * 该方法只会向上一级对 DOM 树进行遍历。 * 下面的例子返回每个 <span> 元素的的直接父元素: */ $("span")

jQuery遍历-祖先

佐手、 提交于 2019-12-28 14:20:39
祖先是父、祖父或曾祖父等等。 通过 jQuery,您能够向上遍历 DOM 树,以查找元素的祖先。 向上遍历 DOM 树 这些 jQuery 方法很有用,它们用于向上遍历 DOM 树: parent() parents() parentsUntil() jQuery parent() 方法 parent() 方法返回被选元素的直接父元素。 该方法只会向上一级对 DOM 树进行遍历。 下面的例子返回每个 <span> 元素的的直接父元素: $('span').parent(); jQuery parents() 方法 parents() 方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>)。 下面的例子返回所有 <span> 元素的所有祖先: $('span').parents();  您也可以使用可选参数来过滤对祖先元素的搜索。 下面的例子返回所有 <span> 元素的所有祖先,并且它class属性为c1: $('span').parents('.c1'); jQuery parentsUntil() 方法 parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。 下面的例子返回介于 <span> 与 <div> 元素之间的所有祖先元素: $('span').parentsUntil('div'); 来源: https://www