jQuery 基础

jQuery 选择器(外传)

$("*") 选取所有元素
$(this) 选取当前 HTML 元素
$("p.intro") 选取 class 为 intro 的 <p> 元素
$("p:first") 选取第一个 <p> 元素
$("ul li:first") 选取第一个 <ul> 元素的第一个 <li> 元素
$("ul li:first-child") 选取每个 <ul> 元素的第一个 <li> 元素
$("[href]") 选取带有 href 属性的元素
$("a[target='_blank']") 选取所有 target 属性值等于 "_blank" 的 <a> 元素
$("a[target!='_blank']") 选取所有 target 属性值不等于 "_blank" 的 <a> 元素
$(":button") 选取所有 type="button" 的 <input> 元素 和 <button> 元素
$("tr:even") 选取偶数位置的 <tr> 元素
$("tr:odd") 选取奇数位置的 <tr> 元素

jQuery 事件

click():click() 方法是当按钮点击事件被触发时会调用一个函数。

dblclick():当双击元素时,会发生 dblclick 事件。

mouseenter():当鼠标指针穿过元素时,会发生 mouseenter 事件。

mouseleave():当鼠标指针离开元素时,会发生 mouseleave 事件

mousedown():当鼠标指针移动到元素上方,并按下鼠标按键时,会发生 mousedown 事件。

mouseup():当在元素上松开鼠标按钮时,会发生 mouseup 事件。

hover():hover()方法用于模拟光标悬停事件。

focus():当元素获得焦点时,发生 focus 事件。

blur():当元素失去焦点时,发生 blur 事件。

 隐藏和显示

$(selector).hide/show(隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。,隐藏或显示完成后所执行的函数名称。);
toggle() 方法来切换 hide() 和 show() 方法。

$(document).ready(function(){
  $(".hidebtn").click(function(){
    $("div").hide(1000,"linear",function(){
      alert("Hide() 方法已完成!");
    });
  });
});
linear:表示过渡使用哪种缓动函数。译者注:jQuery自身提供"linear" 和 "swing",其他可以使用相关的插件)。

淡入淡出

$(selector).fadeIn(规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒, fading 完成后所执行的函数名称。);

fadeIn() 用于淡入已隐藏的元素。

fadeOut() 方法用于淡出可见元素。

fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

fadeTo() 方法允许渐变为给定的不透明度

滑动

$(selector).slideDown(规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒, fading 完成后所执行的函数名称。);

 slideDown() 方法用于向下滑动元素。

slideUp() 方法用于向上滑动元素。

 slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。

动画

$(selector).animate({形成动画的 CSS 属性},规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒,动画完成后所执行的函数名称);

停止动画

$(selector).stop(规定是否应该清除动画队列,规定是否立即完成当前动画);

stop() 会清除在被选元素上指定的当前动画。

text()、html() 以及 val()

  • text() - 设置或返回所选元素的文本内容
  • html() - 设置或返回所选元素的内容(包括 HTML 标记)
  • val() - 设置或返回表单字段的值
  • attr() 方法用于获取属性值。

添加元素

  • append() - 在被选元素的结尾插入内容
  • prepend() - 在被选元素的开头插入内容
  • after() - 在被选元素之后插入内容
  • before() - 在被选元素之前插入内容

删除元素

  • remove() - 删除被选元素(及其子元素)
  • empty() - 从被选元素中删除子元素

获取并设置 CSS 类

  • addClass() - 向被选元素添加一个或多个类
  • removeClass() - 从被选元素删除一个或多个类
  • toggleClass() - 对被选元素进行添加/删除类的切换操作
  • css() - 设置或返回样式属性

尺寸

width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距)。

height() 方法设置或返回元素的高度(不包括内边距、边框或外边距)。

innerWidth() 方法返回元素的宽度(包括内边距)。

innerHeight() 方法返回元素的高度(包括内边距)。

outerWidth() 方法返回元素的宽度(包括内边距和边框)。

outerHeight() 方法返回元素的高度(包括内边距和边框)。

 

 

遍历 - 祖先

parent() 方法返回被选元素的直接父元素。

parents() 方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>)。

下面的例子返回所有 <span> 元素的所有祖先,并且它是 <ul> 元素:

$(document).ready(function(){
  $("span").parents("ul");
});

parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。

下面的例子返回介于 <span> 与 <div> 元素之间的所有祖先元素:

$(document).ready(function(){
  $("span").parentsUntil("div");
});

遍历 - 后代

children() 方法返回被选元素的所有直接子元素。

find() 方法返回被选元素的后代元素,一路向下直到最后一个后代。

下面的例子返回属于 <div> 后代的所有 <span> 元素:

$(document).ready(function(){
  $("div").find("span");
});

遍历 - 同胞(siblings)

siblings() 方法返回被选元素的所有同胞元素。

next() 方法返回被选元素的下一个同胞元素。

nextAll() 方法返回被选元素的所有跟随的同胞元素。

nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。

 
posted @ 2021-11-25 22:36  裳裳者华  阅读(26)  评论(0编辑  收藏  举报