溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
原生缺點:
1. JS的出現使得網頁與用戶之間實現了一種實時/動態/交互的關系,網頁可以包含更多活躍的元素和精彩的內容
2. JS的弊端在于復雜的DOM對象,而JQuery封裝了很多預定義的對象和使用函數簡化了DOM操作,使得我們可以快速創建有高難度交互的富客戶端頁面,且兼容各大瀏覽器
簡單介紹:
1. JQuery是一個優秀的JavaScript庫,擁有強大的選擇器,出色的DOM操作,可靠的事件處理,完善的兼容性和鏈式操作等功能,目前團隊主要推核心庫(JQuery)/UI(JQuery UI)/移動端(JQuery Mobile)
小試牛刀:
說明: 官網下載最新版,.min.js結尾的表示壓縮版,自己開發學習可以使用未壓縮版,需要明確的是在JQuery庫環境下$就是JQuery簡寫形式,其實兩個是等價的,以后開發中更多用的當然是$符號了~
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>前端開發</title>
</head>
<body>
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
// 常規寫法
$(document).ready(function () {
alert('Hello Word!')
})
// 簡寫方式
$(function () {
alert('Hello Word!')
})
</script>
</body>
</html>說明: 如上代碼的$(document).ready(function(){})其實類似于傳統JS中的window.onload方法,但是不同點一是前者只要等待DOM結構繪制完畢后執行,可能DOM元素關聯的東西還沒有加載完,而后者是必須等待所有的東西加載完畢才能執行,不同點二是前者支持同時編寫多個,而后者編寫多個就無法正確執行,不同點三是前者還支持簡化寫法$(function(){})
小小項目:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>前端開發</title>
<style type="text/css">
#menu {
width: 300px;
}
.sub_menu {
color: #ffffff;
cursor: pointer;
background-color: #555555;
}
div {
padding: 0;
margin: 1px 0;
}
div a {
background: #888888;
display: none;
float: left;
width: 300px;
}
.highlight {
color: #ffffff;
background-color: green;
}
</style>
</head>
<div id="menu">
<div class="sub_menu">
<span>第1章 - 認識JQuery</span>
<a href="">1.1 - Javascript和Javascript庫</a>
<a href="">1.2 - 加入JQuery</a>
<a href="">1.3 - 編寫簡單JQuery代碼</a>
<a href="">1.4 - JQuery對象和DOM對象</a>
<a href="">1.5 - 解決JQuery和其它庫的沖突</a>
<a href="">1.6 - JQuery開發工具和插件</a>
</div>
<div class="sub_menu">
<span>第2章 - JQuery選擇器</span>
<a href="">2.1 - JQuery選擇器是什么</a>
<a href="">2.2 - JQuery選擇器的優勢</a>
<a href="">2.3 - JQuery選擇器</a>
<a href="">2.4 - 應用JQuery改寫示例</a>
<a href="">2.5 - 選擇器中的一些注意事項</a>
<a href="">2.6 - 類似淘寶品牌列表的效果</a>
<a href="">2.7 - 還有其它選擇器嗎?</a>
</div>
<div class="sub_menu">
<span>第3章 - JQuery中的DOM操作</span>
<a href="">3.1 - DOM操作的分類</a>
<a href="">3.2 - JQuery中的DOM操作</a>
<a href="">3.3 - 某網站超鏈接和圖片提示效果</a>
</div>
</div>
<body>
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$('.sub_menu').click(function () {
// 對點擊的對象添加highlight類
$(this).addClass('highlight')
.children('a')
.show()
// 重新定位到上次操作的節點
.end()
.siblings()
.removeClass('highlight')
.children('a')
.hide()
})
</script>
</body>
</html>說明: 如上代碼簡單實現了一個手風琴的效果, 通過$('.sub_menu')定位到class屬性包含.sub_menu的元素,并給其綁定一個click事件,回調函數內部$(this)其實就是觸發回調函數的源對象,當點擊時先通過.addClass('highlight').children('a').show()展開自己的子元素,然后通過.end()重新定位到上次操作的節點$(this),然后通過.siblings()..removeClass('highlight') .children('a').hide()讓其它兄弟元素不高亮且子元素隱藏.
兩種對象:
1. DOM對象是文檔原生對象模型,只能通過原生的方法對其添加/刪除/查詢/修改,不能使用JQuery對象下的任何方法
2. JQuery對象是基于DOM對象封裝的對象,可以通過JQuery特有的方法對齊添加/刪除/查詢/修改,不能使用DOM對象下的任何方法.
3. DOM對象變量聲明常定義為var xm = 10,JQuery對象變量聲明常定義為var $xm = 10,這個是約定俗稱的規定.
4. DOM對象可以通過$()轉換為JQuery對象,從此遍可以使用JQuery對象的方法,反之JQuery對象也可以通過[]或get()轉換為DOM原生對象,從此便可使用DOM對象的方法
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>前端開發</title>
</head>
<body>
<div id="container">
asdasdas
</div>
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
// 將JQuery對象轉換為DOM對象
var $div = $('#container')
var div = $div[0]
console.log(div)
var div = $div.get(0)
// 將DOM對象轉換為JQuery對象
var div = document.getElementById('container')
var $div = $(div)
console.log($div)
</script>
</body>
</html>免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
