JavaScript学习-jquery知识

最新推荐文章于 2024-04-19 12:48:03 发布

Code_星华

最新推荐文章于 2024-04-19 12:48:03 发布

阅读量149

点赞数

分类专栏： JavaScript javaScript的点点滴滴

JavaScript 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

javaScript的点点滴滴

13 篇文章 1 订阅

订阅专栏

jQuery 库 - 特性
jQuery 是一个 JavaScript 函数库。
jQuery 库包含以下特性：
HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities

基础语法是：$(selector).action()
美元符号定义 jQuery
选择符（selector）“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操作

选择器
元素选择器
jQuery 使用 CSS 选择器来选取 HTML 元素。
$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。
jQuery 属性选择器
jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
CSS 选择器
jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。
$("p").css("background-color","red");

jQuery 是为事件处理特别设计的。
把所有 jQuery 代码置于事件处理函数中
把所有事件处理函数置于文档就绪事件处理器中:$(document).ready(function)
把 jQuery 代码置于单独的 .js 文件中
如果存在名称冲突，则重命名 jQuery 库
jQuery 名称冲突
jQuery 使用 $ 符号作为 jQuery 的简介方式。
某些其他 JavaScript 库中的函数（比如 Prototype）同样使用 $ 符号。
jQuery 使用名为 noConflict() 的方法来解决该问题。
var jq=jQuery.noConflict()，帮助您使用自己的名称（比如 jq）来代替 $ 符号

效果：
隐藏：$(selector).hide(speed,callback);arg1:时间、2:回调
显示：$(selector).show(speed,callback);
切换：$(selector).toggle(speed,callback);
滑动：
slideDown() 用于向下滑动元素
slideUp() 用于向上滑动元素
slideToggle() 切换
淡入淡出：
fadeIn() 淡入已隐藏的元素。
fadeOut() 淡出可见元素。
fadeToggle() 进行切换
fadeTo() 允许渐变为给定的不透明度（值介于 0 与 1 之间）$(selector).fadeTo(speed,opacity,callback);
动画：
$(selector).animate({params},speed,callback); 用于创建自定义动画。
必需的 params 参数定义形成动画的 CSS 属性。
可使用相对值：+=、-=；还可以使用切换隐藏等；
jQuery stop() 方法用于停止动画或效果，在它们完成之前。

链接chaining
代码可直接通过.连成一行；

jQuery 拥有可操作 HTML 元素和属性的强大方法。
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
attr() - 方法用于获取属性值。

jQuery，可以很容易地添加新元素/内容
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

jQuery，可以很容易地删除已有的 HTML 元素。
remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素

jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些：
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性

jQuery 尺寸方法
jQuery 提供多个处理尺寸的重要方法：
width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。
innerWidth() 方法返回元素的宽度（包括内边距）。
innerHeight() 方法返回元素的高度（包括内边距）。
outerWidth() 方法返回元素的宽度（包括内边距和边框）。
outerHeight() 方法返回元素的高度（包括内边距和边框）。
outerWidth(true) 方法返回元素的宽度（包括内边距、边框和外边距）。
outerHeight(true) 方法返回元素的高度（包括内边距、边框和外边距）。
$("#div1").width(500).height(500);

jQuery 遍历
用于向上遍历 DOM 树：
parent() 返回被选元素的直接父元素。
parents() 返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。
parentsUntil() 返回介于两个给定元素之间的所有祖先元素。
向下遍历 DOM 树，以查找元素的后代。
children() 返回被选元素的所有直接子元素。
find() 返回被选元素的后代元素，一路向下直到最后一个后代。
遍历元素的同胞元素。
siblings() 返回被选元素的所有同胞元素。
next() 返回被选元素的下一个同胞元素。
nextAll() 返回被选元素的所有跟随的同胞元素。
nextUntil("p.class")返回介于两个给定参数之间的所有跟随的同胞元素。
prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，
只不过方向相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞元素向后遍历，而不是向前）。

三个最基本的过滤方法是：first(), last() 和 eq()，它们允许您基于其在一组元素中的位置来选择一个特定的元素。
其他过滤方法，比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。
last() 返回被选元素的最后一个元素。
eq(index) 返回被选元素中带有指定索引号的元素。
filter() 允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
not() 返回不匹配标准的所有元素。

JQuery - AJAX
load() 方法从服务器加载数据，并把返回的数据放入被选元素中。
$(selector).load(URL,data,callback);
$.get() 方法
$.get(URL,callback);
$.post() 方法
$.post(URL,data,callback);

noConflict() 方法会释放会 $ 标识符的控制，这样其他脚本就可以使用它了。