jquery的主要功能有:1、存取頁面框架的局部;2、修改頁面的表現;3、更改頁面內容;4、回應事件;5、為頁面新增動畫;6、與伺服器非同步交互;7.簡化常用的JavaScript操作。
本教學操作環境:Windows10系統、jquery3.2.1、Dell G3電腦。
jquery的主要功能有哪些?
jQuery的主要功能
1:存取頁面框架的局部
jQuery大大簡化了DOM取得頁面某個節點或某一類節點的固定方法;
2:修改頁面的表現
由於各個瀏覽器對CSS3標準的支援不同,是的許多CSS3的樣式風格沒能很好的體現。 jQuery的出現很好的解決了這個問題。它透過封裝好的JavaScript程式碼,是的各種瀏覽器能很好的使用CSS3標準。
3:更改頁面內容
透過強大而面向的API,jQuery可以很方便的修改頁面的內容,甚至整個頁面的框架;
4:回應事件
不需要在考慮瀏覽器的兼容性問題,可以更輕鬆的處理事件;
5:為頁面添加動畫
jQuery的庫提供了大量可自定義參數的動畫效果,
6:與伺服器非同步互動
jQuery提供了一整套Ajax相關的操作,大大方便了非同步互動的開發與使用;
# 7:簡化常用的JavaScript操作
jQuery提供了許多附加的功能來簡化常用的JavaScript操作,例如陣列的操作,迭代運算等;
jQuery 的基本功能
jQuery 封裝了DOM 功能,讓DOM 函數的使用變得非常簡潔方便。無論是對網頁元素的取得或是「增刪改查」都進行了更人性化的封裝。以下讓我們簡單了解 jQuery 的基本功能以及 jQuery 設計的優秀之處。
一、取得網頁元素
jQuery 取得的結果是一個物件
一些基本方法
$(document); // 选择整个文档对象 $("#myId"); // 选择id = 'myId' 的元素 $(".myClass"); // 选择class = 'myClass' 的元素 $("div.myClass"); // 选择class = 'myClass' 的div元素 $("input[name=first]"); // 选择name = 'first' 的 input 元素
jQuery 特有的表達式
$("a:first"); // 选择网页中第一个a元素 $("tr:odd"); // 选择表格中的奇数行 $("#myFrom:input"); // 选择表单中的id='myFrom'的input元素 $("div:visible"); // 选择可见的div元素 $("div:gt(2)"); // 选择所有的div元素,除了前3个 $("div:animated"); // 选择当前处于动画状态的div元素
進一步過濾div 的選擇結果物件
$("div").has("p"); // 选择包含p元素的div元素 $("div").not(".myClass"); //选择class != 'myClass' 的div元素 $("div").filter(".myClass"); // 选择class = 'myClass' 的div元素 $("div").first(); // 选择第1个div元素 $("div").eq(5); // 选择第6个div元素
$("div").next("p"); // 选择div元素后面的第1个p元素 $("div").parent(); // 选择div元素的父元素 $("div").closest("from"); // 选择离div最近的from父元素 $("div").children(); // 选择div的所有子元素 $("div").siblings(); // 选择div同级的其他兄弟元素(不包括自己)
#二、鍊式運算
jQuery 最令人稱道的部分jQuery 可以對同一物件進行連續函數操作範例:$("div").find("p").addClass("first").removeClass("second").html("third"); // 分解 $("div") // 找到div元素 .find("p") // 选择其中的p元素 .addClass("first") // 添加一个class = 'first' .removeClass("second") // 删除一个class = 'second' .text("third"); // 将文本改为 third
$("div") // 找到div元素 .find("p") // 选择其中的p元素 .addClass("first") .removeClass("second") .text("third") .end() // 将jQuery对象从p退回到div .addClass("myDiv"); // 给div添加一个class = 'myDiv'
#三、增刪改查
1. 增 建立新元素:直接在jQuery 直接傳入符合html 格式的字串let $myDiv = $("<div class='myDiv'><p>Derek</p></div>"); // 创建新的元素,用变量$myDiv储存 $("body").append($myDiv); // 把$myDiv储存的新元素插入到body中 $("ul").append("<li>list</li>"); // 把新创建的li插入到ul中
.remove() 不保留被删元素的事件 .detach() 保留被删元素的事件,便于在重新插入文档时使用 .empty() 清空元素内容,但不删除该元素(即删除元素里面的所有节点)
$("div").insertAfter($("p")); // 把div元素移动到p元素的后面 $("p").after($("div")); // 把p元素移动到div元素的前面
// 在div内部的 末端 插入内容 $("div").append("插入的部分"); $("插入的部分").appendTo("div"); // 在div内部的 顶端 插入内容 $("div").prepend("插入的部分"); $("插入的部分").prependTo("div");
$("h1").html(); // html没有传参,实现取出h1的值 $("h1").html("Hello"); // html传参'Hello',实现对h1进行赋值
取值時,則是只取出第一個元素的值.text()例外,它會取出所有元素的text 內容推薦學習:《
jQuery影片教學》
以上是jquery的主要功能有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章!