![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JQuery
Tong XU
欣赏简洁的代码是一种赏心悦目的事情。
展开
-
JQuery中$("ul li:first")和$("ul li:first-child")的区别
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>菜鸟教程</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.j原创 2018-11-11 20:47:32 · 4419 阅读 · 0 评论 -
JQuery-删除元素
删除元素/内容:remove():删除被选元素及其子元素; empty():从被选元素中删除子元素; remove()方法可接受多个参数,允许对被删元素进行过滤。例如:$("p").remove(".italic")删除class="italic"的所有<p>元素。<!DOCTYPE html><html> <head> &...原创 2019-10-07 10:44:08 · 134 阅读 · 0 评论 -
JQuery-添加元素
通过JQuery,可添加新元素或内容。添加新的HTML内容:append()- 在被选元素的结尾插入内容 prepend()- 在被选元素的开头插入内容 after()- 在被选元素之后插入内容 before()- 在被选元素之前插入内容append():在被选元素的结尾插入内容。<!DOCTYPE html><html> <head&...原创 2019-10-07 10:30:12 · 124 阅读 · 0 评论 -
JQuery-获取内容和属性
获得内容-text(),html()以及val()a. text():设置或返回所选元素的文本内容;b. html():设置或返回所选元素的内容(包括HTML标记);c. val():设置或返回表单字段的值;获取属性-attr()attr()方法用于获取或修改属性值<!DOCTYPE html><html> <head> <...原创 2019-10-07 10:03:25 · 280 阅读 · 0 评论 -
JQuery效果
JQuery效果-隐藏和显示通过JQuery,可以使用hide()和show()来隐藏和显示HTML元素。语法:$(selector).hide(speed, callback)$(selector).show(speed, callback)JQuery-toggle():通过JQuery,可以使用toggle()方法来切换hide()和show()方法。JQuery效果-淡...原创 2019-10-07 09:47:26 · 76 阅读 · 0 评论 -
JQuery选择器
jQuery 选择器jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"(或选择)HTML 元素。 它基于已经存在的CSS 选择器,除此之外,它还有一些自定义的选择器。jQuery 中所有选择器都以美元符号开头:$()。元素选择器jQuery 元素选择器基于元素名选取元素。在页面中选取所有...原创 2019-10-03 22:01:21 · 122 阅读 · 0 评论 -
JQuery遍历-学习笔记
JQuery遍历-祖先:parent()方法返回被选元素的直接父元素; parents()方法返回被选元素的所有祖先元素(包括<html>); parentUntil()方法返回介于2个给定元素之间的所有祖先元素。<div style="width: 200px; height: 200px; background-color: red;"> <p ...原创 2019-01-28 16:31:24 · 135 阅读 · 0 评论 -
JavaScript使用3种方式创建元素
通过HTML标签创建元素 var txt1="<p>文本。</p>"; // 使用 HTML 标签创建文本通过JQuery创建元素 var txt2=$("<p></p>").text("文本。"); // 使用 jQuery 创建文本通过DOM创建文本 var txt3=document.crea原创 2019-01-27 17:06:02 · 139 阅读 · 0 评论 -
JQuery学习笔记-尺寸
jQuery 提供多个处理尺寸的重要方法:width() height() innerWidth() innerHeight() outerWidth() outerHeight()jQuery width() 和 height() 方法width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距)。height() 方法设置或返回元素的高度(不包括内边距、边框...原创 2018-11-21 16:59:02 · 88 阅读 · 0 评论 -
JQuery学习笔记-css()方法用法
css()方法用于设置或返回被选元素的一个或多个属性。1.返回css属性:如需返回指定的 CSS 属性的值,请使用如下语法:css("propertyname");$("p").css("background-color");需注意:这里只会返回首个匹配元素的background-color属性。2.设置css属性如需设置指定的 CSS 属性,请使用如下语法:cs...原创 2018-11-21 16:46:58 · 155 阅读 · 0 评论 -
JQuery学习笔记-获取并设置css类
JQuery中,拥有若干个进行CSS操作的方法。addClass():向被选元素添加一个或多个类; removeClass():向被选元素删除一个或多个类; toggleClass():对被选元素进行填加/删除类的切换操作; css():设置或返回样式属性。<!DOCTYPE html><html> <head> <meta cha...原创 2018-11-21 16:30:00 · 132 阅读 · 0 评论 -
JQuery学习笔记-删除元素
在这里,介绍两种常见方法:remove():删除被选元素及其子元素; empty():从被选元素中删除子元素。<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>菜鸟教程</title> <script src=原创 2018-11-21 16:13:36 · 94 阅读 · 0 评论 -
JQuery学习笔记-添加元素
在这里,介绍4个常用的方法:append():在被选元素的结尾插入内容(仍然是元素内部); prepend():在被选元素的开头插入内容(仍然是元素内部); after():在被选元素之后插入内容; before():在被选元素之前插入内容。<!DOCTYPE html><html> <head> <meta charset="ut...原创 2018-11-21 16:04:28 · 96 阅读 · 0 评论 -
JQuery学习笔记-HTML中如何动态创建元素
在这里,提供三种方法动态创建元素:var txt = "<p>我是tom</p>";var txt2 = $("<p></p>").text("我是徐彤啊!");var txt3 = document.createElement("p"); ...原创 2018-11-21 15:52:17 · 107 阅读 · 0 评论 -
JQuery之淡入淡出
jQuery Fading 方法通过 jQuery,您可以实现元素的淡入淡出效果。jQuery 拥有下面四种 fade 方法:fadeIn() fadeOut() fadeToggle() fadeTo()jQuery fadeIn() 方法jQuery fadeIn() 用于淡入已隐藏的元素。语法:$(selector).fadeIn(speed,callback...原创 2018-11-11 22:04:34 · 99 阅读 · 0 评论 -
JQuery之隐藏hide()方法和显示show()方法
jQuery hide() 和 show()通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素。其语法形式为:$(selector).hide(speed,callback);$(selector).show(speed,callback);可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒...原创 2018-11-11 21:52:44 · 9487 阅读 · 0 评论 -
常用的JQuery事件方法
click()方法:该函数在用户点击 HTML 元素时执行。 dblclick()方法:当双击元素时,会发生 dblclick 事件。 mouseenter()方法:当鼠标指针穿过元素时,会发生 mouseenter 事件。 mouseleave()方法:当鼠标指针离开元素时,会发生 mouseleave 事件。 mousedown()方法:当鼠标指针移动到元素上方,并按下鼠标按键时,会发...原创 2018-11-11 21:34:20 · 176 阅读 · 0 评论 -
$("tr:even")和$("tr:odd")
$("tr:even"):选取偶数位置的 <tr> 元素,注意下标从0开始;$("tr:odd"):选取奇数位置的<tr>元素,注意下标从0开始。<!DOCTYPE html><html> <head> <meta charset="utf-8" /> &am原创 2018-11-11 21:05:24 · 1985 阅读 · 0 评论 -
JQuery - noConflict()方法
noConflict()方法会释放对'$'标识符的控制,这样其他脚本可以使用它。用jQuery代替'$';<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>菜鸟教程(runoob.com)</title> <script src...原创 2019-10-10 09:07:31 · 131 阅读 · 0 评论