目前超过 90% 的网站都使用了 jQuery 库，jQuery 的宗旨：写的更少，做得更多！.../libs/jquery/1.9.1/jquery.min.js"> # 1.5 jQuery 快速使用 <!...子元素筛选器 需求描述：选择所有父级元素 ul 下的第一个子元素 li，设置其背景为红色 li>我是列表项1li> li>我是列表项2li> li>我是列表项...li>列表项3li> 我是段落2 console.log($('#two').prev()[0]); # 4. prevAll() 方法描述：获得集合中每个匹配元素的所有前面的兄弟元素...li>列表项3li> 我是段落2 console.log($('#two').next()[0]); # 6. nextAll() 方法描述：获得集合中每个匹配元素的所有后面的兄弟元素
:contains :empty :has :parent 匹配包含给定文本的元素 匹配所有不包含子元素或者文本的空元素 匹配含有选择器所匹配的元素的元素 匹配含有子元素或者文本的元素 5.可见性选择器...:nth-child 从1开始的，匹配父元素下第n个元素 $("ul li:nth-child(2)"); 获取2 3 4。。...:first-child 匹配每个父元素下的第一个子元素 :last-child 匹配每个父元素下的最后一个子元素 :only-child 匹配父元素中只有唯一的子元素，如果父元素中有多个子元素，就不会被匹配...:input 会获取所有input,textarea,select,button :text 匹配所有单行文本元框 :password 匹配所有密码框 :radio 匹配所有单选按钮 :checkbox...匹配所有复选框 :submit 匹配所有提交按钮 :image 匹配所有图像 :reset 匹配所有重置按钮 :button 匹配所有按钮 :file 匹配所有文本域 :hidden 匹配所有不可见元素
$(":selected") 匹配所有选中的下拉选 ###修改页面元素相关 创建及添加元素 创建: var d = $("abc"); 后面添加: 父元素.append...(d); 前面添加: 父元素.prepend(d); 插入元素前面: 兄弟元素.before(d); 插入元素后面: 兄弟元素.after(d); 删除元素: 元素对象.remove(); 获取和修改元素的文本内容...//得到文本框里面的文本 var str = $("input:first").val(); //设置li的显示文本 text方法等效js中的innerText li.text(...deltd.children().click(function(){ tr.remove();//删除按钮所在行 }) //前4个td里面显示的文本是用户输入文本框里面的文本,...,或者从我这里下,无需积分免费下载:jquery-1.4.2.js
大家好，又见面了，我是你们的朋友全栈君。...下的子元素； :last：同上了，只是是最后一个而已； :first- child：为每个父元素匹配第一个子元素，如li:first-child返回每个ul的第一个li元素。...只是取的是最后一个； :only– child：返回所有没有兄弟节点的元素，注意，文本元素不是，也就是说类似这样的hellojquery，对于这段会选出...V开头的； E[A 4.利用jQuery自定义的选择器进行选择： :button：选择任何按钮类型的元素，包括input[type=submit]等等； :checkbox：选择复选框元素； :file...：选择已选中的选项元素； :visible：选择可见元素； :enable：选择界面上已经可以使用的表单元素； :disabled：选择界面上被禁用的表单元素； :checked：选择已选中的复选框或单选按钮
delegate() / on()等，其中最好用的是: on() on() 方法在匹配元素上绑定一个或多个事件的事件处理函数 语法 element.on(events,[selector],fn) 1...事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素 $('ul').on('click', 'li', function() { alert('hello...案例：发布微博案例 1.点击发布按钮， 动态创建一个小li，放入文本框的内容和删除按钮， 并且添加到ul 中。2.点击的删除按钮，可以删除当前的微博留言。 ...代码实现 $(function () { // 1.点击发布按钮， 动态创建一个小li，放入文本框的内容和删除按钮， 并且添加到ul 中 $...li 滑动出来 $(".txt").val(); // 发布后把之前文本框里输入的内容清空 }); // 2.点击的删除按钮，可以删除当前的微博留言li
核心特性： 链式语法 高效灵活的CSS选择器使用和扩展 丰富的插件 官网：https://jquery.com/ 三大版本： 目前jQuery有三个大版本。... 如何不使用innerHTML呢？...:text) 匹配所有的文本框 查找所有文本框: $(":text") $(:password) 匹配所有密码框 查找所有密码框: $(":password...") $(:radio） 匹配所有单选按钮 查找所有单选按钮 $(:checkbox) 匹配所有复选框 查找所有复选框: $(":checkbox") $(:submit) 匹配所有提交按钮...3.2.1 鼠标悬停事件 hover:一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。
文本的元素 $("td:empty") //不包含子元素或者文本的空元素 $("div:has(selector)") //含有选择器所匹配的元素 $("td...:parent") //含有子元素或者文本的元素 3.3可见性过滤选择器 $("li:hidden") //匹配所有不可见元素，或type为hidden的元素...[type=text]")，推荐使用$("input:text")效率更高，下同 $(":password") //所有密码框 $(":radio") //所有单选按钮 $(":checkbox...- text()、html() 以及 val() 三个用于 DOM 操作的 jQuery 方法： text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容（包括 HTML...） outerHeight() - 高度（包括内边距和边框） 向上遍历 DOM 树 这些 jQuery 方法很有用，它们用于向上遍历 DOM 树： parent() - 返回被选元素的直接父元素。
（可以是ID选择器、元素选择器或是类名选择器）组合在一起，两个选择器之间以逗号”,”分隔，只要符合其中的任何一个筛选条件就会被匹配，返回的是一个集合形式的jQuery包装集，利用jQuery索引器可以取得集合中的...2. parent>child选择器 parent>child选择器中的parent代表父元素，child代表子元素，用于在给定的父元素下匹配所有的子元素，使用该选择器只能选择父元素的直接子元素...匹配ul元素中的最后一个子元素li :only-child 说明：如果某个元素是它父元素中唯一的子元素，那么将会被匹配，如果父元素中含有其他元素，...=”submit”的input元素 示例：(“:submit”) //匹配所有的提交按钮 :text 说明：匹配所有的单行文本框...\\(1\\)”); 2.属性选择器的@符号问题： 在jQuery升级版本过程中，jQuery在1.3.1版本中彻底放弃了1.1.0版本遗留的@符号，假如我们使用1.3.1以上的版本，那么不需要在属性前添加
[li>Johnli>,li>Glenli>] :last-child //概述 //匹配最后一个子元素 :last只匹配最后一个元素,而次选择符将为每一个父元素匹配到最后一个子元素·...jQuery代码 $("ul li:nth-child(2)") 结果 [li>22222li>,li>55555li>] :only-child //概述 //如果某个是父元素中唯一的子元素...,那将会被匹配· //如果父元素中含有其他元素,那将 不会被匹配·(注:这里的其它元素并不包含文本节点,如:网页,用$('p img:only-child')是可以匹配)...").text("Hello world"); 回调函数描述 使用函数来设置所有匹配元素的文本内容 jQuery代码 $("p").text(function(n){ return "这个p...元素的index是："+n; }) val([val|fn|arr]) //概述 //获得匹配元素的当前值 //jQuery 1.2中,可以 返回任意的值了.包括select.如果多选,将返回一个数组
(详情参考源代码) 1.2. jQuery 文本属性值 jQuery的文本属性值常见操作有三种：html() / text() / val() ; 分别对应JS中的 innerHTML 、innerText...注意：此方法用于遍历 jQuery 对象中的每一项，回调函数中元素为 DOM 对象，想要使用 jQuery 方法需要转换。 语法2 ? ...注意：此方法用于遍历 jQuery 对象中的每一项，回调函数中元素为 DOM 对象，想要使用 jQuery 方法需要转换。...案例代码 li>原先的lili> 我是原先的div <script...创建元素 var li = $("li>我是后来创建的lili>"); // 2.
Jquery 的初体验 需求：使用Jquery和javascript给一个按钮绑定单击事件 注意：使用Jquery之前要将第三方jar包导入 使用jquery一定要引入jquery库吗？ 答案： 是2、jquery中的到底是什么？ 答案： 核心函数3、怎么为按钮添加点击响应函数的？...:empty 匹配所有不包含子元素或者文本的空元素 :parent 匹配含有子元素或者文本的元素 :has(selector) 匹配含有选择器所匹配的元素的元素 案例： $(document).ready...事件的冒泡是指，父子元素同时监听同一个事件。当触发子元素的事件的时候，同一个事件也被传递到了父元素的事件里去响应。 那么如何阻止事件冒泡呢？...我们重点关心的是怎么拿到这个javascript的事件对象。以及使用。 如何获取呢javascript事件对象呢？
返回值:Booleanis(expr|obj|ele|fn)，根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。...parent([expr]),取得一个包含着所有匹配元素的唯一父元素的元素集合 parents([expr]),取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。...B.children() 获得所有子元素（CDEF） A.find(D) 从A子元素中查询D D.parent() 获得D的父元素（B） C.next() 下一个兄弟（D） C.nextAll...，直到指定元素截止（DE） F.prevUntil(D) （DE） D.parents() 获得D所有父元素（B、A） D.closest()获得D所有父元素,含自己（D、B、A）与 D.parents...跨域：在一个服务器上，去访问另一个服务器 jQuery如何实现跨域请求？使用JSONP形式实现跨域。 javascript如果调用另一个域程序，不能执行当前域js函数。
jQuery 对象是经过包装的dom对象（伪数组形式存储） jQuery对象才能使用jQuery方法,不能混用 1.1.4 jQuery对象和Dom对象转换 // DOM对象转换成jQuery对象...$s(“Ii.current”) 交集元素 2.1.2 层级选择器 名称 用法 描述 子代选择器 $(“ul>li”); 使用>号，获取亲儿子层级的元素;注意，并不会获取孙子层级的元素 后代选择器...$(“ul li”); 使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等 2.1.3 筛选选择器 名称 用法 描述 :first $(‘li:first’) 获取第一个li元素 :last...parent() $(“li”).parent(); 查找父级 children(selector) $(“ul”).children("“li”) 相当于$(“ul>li”)，最近一级（亲儿子) find...) {}); 是dom对象不是jQuery对象，需要转换成jquery对象才能使用方法 $.each(obj,function(index,domele){}) 可以用来遍历任何对象，主要用来做数据处理
语法 说明 html() 获取第一个匹配元素的HTML内容 html(content) 设置第一个匹配元素的HTML内容 text() 获取所有匹配元素包含的文本内容组合起来的文本 text(content...">Smiles to the rocky li>天生我材必有用，千金散尽还复来。...,function) 在父元素上检测子元素失去焦点的情况 表单事件 select([[data],function]) 当文本框（包括和）中的文本被选中时触发 表单事件...（包括外部元素，如图片）才能执行 网页中的所有DOM结构绘制完成后就执行（可能关联内容并未加载完成） 编写个数 不能同时编写多个 能够同时编写多个 简化写法 无 $() jQuery中的ready与JavaScript...obj表示进行匹配的HTML元素对应的jQuery对象。 根据需要对jQuery对象的属性进行判断，并使用return返回匹配结果。
轻量级：依赖程序少，占用的资源少 特点：js代码和html代码分离 jQuery已经成为最流行的 javascript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。...、使用Ajax以及其他功能 jQuery能够使用户的html页面保持代码和html内容分离 不用再在html里面插入一堆js来调用命令了，只需要定义id即可 jQuery提供API让开发者编写插件，有许多成熟的插件可供选择...文档说明很全 二、jQuery 的基本语法 2.1、jQuery语法：获得jQuery对象 1-获得jQuery对象.html 获得value的值，需要把js代码放在input标签的下面 // jQuery 中获得jQuery对象的语法： // $("选择器") == jQuery(...:parent 当前元素是否是父元素（不常用） :contains(text) 标签体是否含有指定的文本（更不常用） 示例代码如下： 04-内容过滤选择器.html <!
也都能做，但使用 jQuery 能大幅提高开发效率 jQuery Advantages 体积小，压缩后只有 100 KB 左右 强大的选择器 出色的 DOM 封装 可靠的事件处理机制 出色的浏览器兼容性...DOM 元素 方法 action()：jQuery 中提供的方法，其中包括绑定事件处理的方法 “$” 等同于 “jQuery” 例如： hello ..."color","red"); // 下标小于 2 的 li $("li:lt(2)").css("color","red"); // 使用转义符 $("#h2\\#x"...value 值 val("x") 修改表单元素中的 value 值 html() 获得元素中的内容（标签 + 文本） html("x") 修改元素中的内容（标签 + 文本） text() 获得元素中的文本..."); // 获得 div 中的内容（包含标签信息） alert($("div").html()); // 获得 div 中的内容（不包含标签信息，只包含文本内容
注意：此方法用于遍历 jQuery 对象中的每一项，回调函数中元素为 DOM 对象，想要使用 jQuery 方法需要转换。 语法2 ?...注意：此方法用于遍历 jQuery 对象中的每一项，回调函数中元素为 DOM 对象，想要使用 jQuery 方法需要转换。...注意 :总计是文本框里面的值相加用val() ,总额是普通元素的内容用text() 要注意普通元素里面的内容要去掉￥并且转换为数字型才能相加 // 封装一个函数 function getSum...案例代码 li>原先的lili> 我是原先的div <script...创建元素 var li = $("li>我是后来创建的lili>"); // 2.
:eq（匹配一个给定索引值的元素） $('ul li:eq(2)') li>333li> 4.gt（匹配所有大于给定索引值的元素） $('ul li:gt(2)') li>444li>...[attribute*=value] 匹配给定的属性是以包含某些值的元素 [selector1][selector2][selectorN] 复合属性选择器，需要同时满足多个条件时使用 表单选择器...，并返回最先匹配的元素 nextAll 查找当前元素之后所有的同辈元素 nextUntil 查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止 offsetParent 返回第一个匹配元素用于定位的父节点...筛选出与指定表达式匹配的元素集合 is 根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true map...$("input").val(); //获取文本框中的值 $("input").val("nick"); //设置文本框中的内容 1.html（获取和设置匹配元素的内容
大家好，又见面了，我是你们的朋友全栈君。...(p)”) 所有包含有 元素在其内的 元素 :empty $(“:empty”) 所有空元素 :parent $(“:parent”) 匹配所有含有子元素或者文本的父元素。...下面的例子演示如何获得链接中 href 属性的值： <!...图示解析 ： 元素是 的父元素，同时是其中所有内容的祖先。...jQuery animate() – 使用相关值 演示如何在 jQuery animate() 方法中使用相关值。
CDF（siblings：兄弟姐妹） E.parent() 获得父元素（不含自己）。B E.parents() 获得所有的父元素（不含自己）。...AB E.closest(A) 向上获得指定的父元素（含自己），如果获得到了，就返回一个对象；如果没有获得到，就返回空的jQuery对象。...第二层：load()、$.get()、$.post() 开发中常用3个，$符号开头的叫全局函数，不是$开头的是普通函数，普通函数必须使用jQuery对象才能获得 第三层：$.getJSON(...，不是$开头的是普通函数，普通函数必须使用jQuery对象才能获得 * * 格式：load(url, [data], [callback]) []中括号表示该项可以省略...* * 对于响应的数据，如果服务端使用的是：text/html;charset=UTF-8 ，那么回调函数获得的是字符串数据，需要手动进行转换。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
