搜尋

首頁  >  文章  >  web前端  >  jQuery方法的總結（附範例）

jQuery方法的總結（附範例）

不言
不言轉載
2019-03-20 11:53:152423瀏覽

這篇文章帶給大家的內容是關於jQuery方法的總結（附範例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

jQuery 簡介

jQuery 是一個輕量級操作DOM 的JS 函式庫，主要包含下列功能：

HTML 元素選取與操作

#HTML 事件函數

HTML DOM 遍歷與修改

CSS 動作

JavaScript 特效與動畫

AJAX

基於jQuery 的外掛程式

jQuery 的優點在於相容於所有主流瀏覽器, 包含Internet Explorer 6!

jQuery 語法

$(selector).action()

文件載入就緒事件

$(document).ready(function() {
  // 代码...
});

// 简写方式
$(function() {
  // 代码...
});

$(document).ready 與window.onload 的區別

$(document).ready 和window.onload 都是在都是在頁面加載完執行的函數，大多數情況下差異不大。
$(document).ready:是 DOM 結構繪製完畢後就執行，不必等到載入完畢。意思就是 DOM 樹載入完畢，就執行，不必等到頁面中圖片或其他外部檔案都載入完畢。並且可以寫多個.ready。
window.onload:是頁面所有元素都載入完畢，包括圖片等所有元素。只能執行一次。

jQuery 選擇器

jQuery 選擇器基於已經存在的CSS 選擇器

$('*')
$('p ')
$('ul li')
$('ul li:last-child')
...

jQuery 事件

滑鼠事件 鍵盤事件 表單事件 文件/視窗事件
click keypress submit #load
dbclick keydown change resize
mouseenter keyup focus scroll
mouseleave
blur unload
hover


##常用的jQuery 事件方法

  • click() 點選事件
  • dbclick() 雙擊事件
  • mouseenter() 滑鼠穿過元素事件
  • mouseleave() 滑鼠離開元素事件
  • mousedown() 滑鼠移到元素上方按下滑鼠事件
  • mouseup() 滑鼠按住移動到元素上方放開滑鼠事件
  • hover() 滑鼠懸停事件
  • focus() 表單元素聚焦事件
  • blur() 表單元素失去焦點事件
  • submit() 表單提交事件
  • change() 表單元素值改變事件
  • keypress() 鍵盤鍵按住事件
  • keydown() 鍵盤鍵按下事件
  • keyup() 鍵盤鍵放開事件
  • load()指定元素載入完成式執行事件（1.8 版本後廢棄）
  • resize() 視窗大小改變事件
  • scroll() 捲動監聽事件

jQuery 效果

$(selector).action(speed,callback)
##變數說明#selector選擇器#action事件#speed速度，毫秒，也可以為'slow'、'fast'callback#回函數
顯示隱藏

    hide() 隱藏元素
  • show() 顯示元素
  • toggle() 顯示被隱藏的元素，隱藏已顯示的元素
淡入淡出

    fadeIn() 淡入
  • fadeOut() 淡入淡出
  • fadeToggle () 已淡出的元素淡入，已淡入的元素淡出
  • fadeTo() 漸變為給定不透明度

    $(selector).fadeTo(speed,opacity,callback) ;
    opacity 值為0 與1 之間
滑動

    #slideDown() 向下滑動展開元素
  • slideDown( ) 向上滑動收起元素
  • slideToggle() 已展開元素上滑收起，已收起元素下滑展示
動畫

$(selector). animate({params},speed,callback);
#參數paramsspeed##速度，毫秒，也可以為'slow'、'fast'可選#callback回掉函數實例
$("button").click(function() {
  $("p").animate({
    left: "250px",
    opacity: "0.5",
    height: "150px",
    width: "150px"
  });
});
停止動畫
##說明 是否必須
定義形成動畫的css 屬性 #必須
##可選

$(selector).stop(stopAll, goToEnd);

#參數說明stopAll是否應該清除動畫佇列，預設是false是否立即完成目前動畫
是否必須
可選 #goToEnd
可選

jQuery 链(Chaining)

通过 jQuery，可以把动作/方法链接在一起。

Chaining 允许我们在一条语句中运行多个 jQuery 方法（在相同的元素上，浏览器就不必多次查找相同的元素。

$("#p1")
  .css("color", "red")
  .slideUp(2000)
  .slideDown(2000);

// "p1" 元素首先会变为红色，然后向上滑动，再然后向下滑动

jQuery HTML

jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。

获取内容和属性

获取内容

  • text() 设置或返回所选元素的文本内容
  • html() 设置或返回所选元素的内容（包括 HTML 标记）
  • val() 设置或返回表单字段的值

获取属性

  • attr() 设置或者返回所选的属性的值
// 获取属性
$('#test').attr('href'）

// 设置属性
$('#test').attr('href','http://www.baidu.com')

$('#test').attr({
    href: 'http://www.baidu.com',
    title: '百度'
})

// 回掉函数
$('#test').attr('href', function(i, origValue){
    // i 被选元素列表中当前元素的下标
    // origValue 原始值
    return origValue + '/jquery'
  })

添加删除元素

  • append() 在被选元素的结尾插入内容
  • prepend() 在被选元素的开头插入内容
  • after() 在被选元素之后插入内容
  • before() 在被选元素之前插入内容
     
  • remove() 删除被选元素（及其子元素）
  • empty() 从被选元素中删除子元素

jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。该参数可以是任何 jQuery 选择器的语法。下面的代码表示删除所有 p 元素中类名是 italic 的元素

$('p').remove('.italic')

获取并设置 css 类

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

// 设置样式属性
$("p").css("background-color", "yellow");
// 或者
$("p").css({ "background-color": "yellow", "font-size": "200%" });

尺寸方法

  • width() 元素宽度
  • height() 元素高度
  • innerWidth() 包含 padding 宽度
  • innerHeight() 包含 padding 高度
  • outerWidth() 包含 padding、border 宽度
  • outerHeight() 包含 padding、border 高度
  • outerWidth(true) 包含 padding、border、margin 宽度
  • outerHeight(true) 包含 padding、border、margin 高度

元素遍历

祖先元素：

  • parent() 返回被选元素的直接父元素，该方法只会向上一级对 DOM 树进行遍历。
  • parents() 返回被选元素的所有祖先元素，它一路向上直到文档的根元素 ()。
  • parentsUntil() parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。
$(document).ready(function() {
  // p > ul > li > span
  $("span").parentsUntil("p");
  // 返回 ul 和 li
});

后代元素：

  • children() 返回被选元素的所有直接子元素。
  • find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。
$(document).ready(function() {
  $("p").find("span");
});

同胞元素：

  • siblings() 返回被选元素的所有同胞元素。
  • next() 返回被选元素的下一个同胞元素。
  • nextAll() 返回被选元素的所有跟随的同胞元素。
  • nextUntil() 返回介于两个给定参数之间的所有跟随的同胞元素。
  • prev() 返回被选元素的上一个同胞元素。
  • prevAll() 返回被选元素之前的所有的同胞元素。
  • prevUntil() 返回介于两个给定参数之间的所有前方的同胞元素。

元素过滤：

  • first() 返回被选元素的首个元素。
  • last() 返回被选元素的最后一个元素。
  • eq() 返回被选元素中带有指定索引号的元素。
  • filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
  • not() 方法返回不匹配标准的所有元素。

本篇文章到这里就已经全部结束了，更多其他精彩内容可以关注PHP中文网的jQuery教程视频栏目！

以上是jQuery方法的總結（附範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

php JavaScript jquery css ajax html Filter append JS 事件 dom 选择器 margin padding border 表单事件 鼠标事件 窗口事件 键盘事件 ul li
陳述：
本文轉載於：segmentfault.com。如有侵權，請聯絡admin@php.cn刪除
上一篇：vue專案全域使用axios的方法介紹下一篇：vue專案全域使用axios的方法介紹

相關文章

看更多