Java Web：JQUERY基礎(chǔ)核心和選擇器，面試題，PPT，多播事件委托，選擇器【詩書畫唱】
?
多播事件委托，用JQUERY時(shí)可以同時(shí)讓3個(gè)彈出框有效，用window.onload的話就會(huì)有些部分失效，個(gè)人的理解，有些用jquery寫會(huì)更具兼容性和更簡便，代碼量會(huì)更少等等：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" srcc="js/jquery-1.11.0.js" ></script>
<script>
// window.onload = function(){
// alert(1);
// }
// //后面的函數(shù)會(huì)覆蓋掉前面的函數(shù)，所以只會(huì)彈出2
// window.onload = function(){
// alert(2);
// }
? ? ? ? ? ? //通過這種方式綁定的函數(shù)不會(huì)產(chǎn)生覆蓋
? ? ? ? ? ? //多播事件委托
? ? ? ? ? ? $(document).ready(function(){
? ? ? ? ? ? alert(1);
? ? ? ? ? ? });
? ? ? ? ? ? $(document).ready(function(){
? ? ? ? ? ? alert(2);
? ? ? ? ? ? });
? ? ? ? ? ??
? ? ? ? ? ? //我們可以給jQuery對(duì)象取其他的名字
? ? ? ? ? ? var $$ = jQuery;
? ? ? ? ? ??
? ? ? ? ? ? $$(document).ready(function(){
? ? ? ? ? ? alert(3);
? ? ? ? ? ? })
</script>
</head>
<body>
</body>
</html>
鼠標(biāo)放上文字上后出現(xiàn)圖片，離開后隱藏圖片：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" srcc="js/jquery-1.11.0.js" ></script>
<script>
//寫在onload事件中的js代碼會(huì)在html代碼執(zhí)行完成以后執(zhí)行
//原生的JS代碼
// window.onload = function(){
// var a = document.getElementById('link');
// var d = document.getElementById('myDiv');
// a.onmouseover = function(){//鼠標(biāo)放在a標(biāo)簽上時(shí)觸發(fā)
// //顯示圖片
// d.style.display = 'block';
// }
// a.onmouseout = function(){//鼠標(biāo)離開a標(biāo)簽時(shí)觸發(fā)
// d.style.display = 'none';
// }
// }
//JQUERY代碼
$(function(){//onload對(duì)應(yīng)的事件
var d = $('#myDiv');//ID選擇器
$('#link').hover(function(){//復(fù)合事件函數(shù)
d.css('display','block');//css方法的調(diào)用
},function(){
d.css('display','none');
});
})
//完整的寫法
// $(document).ready(function(){
//
// });
// //簡寫方式
// $(function(){
//
// })
</script>
</head>
<body>
<a hreff="#" id="link">瀏覽</a>
<div id="myDiv" style="display: none;">
<img srcc="img/25.png" />
</div>
</body>
</html>
常規(guī)選擇器的使用模板示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" srcc="js/jquery-1.11.0.js" ></script>
<script>
$(document).ready(function(){
//獲取頁面中id為sp的元素
var sp = $('#sp');
//獲取頁面中所有的span元素
var ss = $('span');
for(var i = 0;i < ss.length;i ++) {
var span = ss[i];//dom對(duì)象
console.log(span);
//span.style.color = 'red';//原生的JS
$(span).css('color','yellow');//jQuery代碼
}
//獲取頁面中class屬性為bg的所有元素
var es = $('.bg');
//console.log('選中元素的個(gè)數(shù)是：' + es.length);
//分辨什么是jquery對(duì)象，什么是dom對(duì)象
//通過id選擇器選中的返回的對(duì)象都是jQuery對(duì)象
//獲取頁面中id為dv的元素
var d = $('#dv');//jQuery對(duì)象
var d1 = document.getElementById('dv');//dom對(duì)象
//將dom對(duì)象轉(zhuǎn)換成jQuery對(duì)象
//console.log($(d1));
//將jQuery對(duì)象轉(zhuǎn)換成dom對(duì)象
//console.log(d.get(0));
//console.log(d[0]);
});
</script>
</head>
<body>
<div class="bg" id="dv">Hello world</div>
<span class="bg">第一段文本</span>
<span id="sp">第二段文本</span>
<span>第三段文本</span>
<input type="text" />
<input type="password" />
<input class="bg" type="text" />
</body>
</html>
進(jìn)階選擇器的使用模板示例，? ?將頁面中所有元素的字體大小設(shè)置為50px，將頁面中id為sub的ul的后代a標(biāo)簽設(shè)置為紅色，將頁面中的id為sub的ul標(biāo)簽的所有的子標(biāo)簽中的a標(biāo)簽的字體顏色設(shè)置為紅色，將頁面中所有div元素的子標(biāo)簽是span的元素的字體顏色設(shè)置為紅色：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" srcc="js/jquery-1.11.0.js" ></script>
<script>
$(document).ready(function(){
//將頁面中所有的p元素以及class為bg的元素的字體顏色設(shè)置為紅色
// $('p').css('color','red');
// $('.bg').css('color','red');
? ? ? ? ? ? ? ? $('p,.bg').css('color','blue');//隱式遍歷
//? ? ? ? ? ? ? var all = $('p,.bg');
//? ? ? ? ? ? ? for(var i = 0;i < all.length;i ++) {
//? ? ? ? ? ? ? var e = all[i];
//? ? ? ? ? ? ? $(e).css('color','yellow');
//? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? //將頁面中所有元素的字體大小設(shè)置為50px
? ? ? ? ? ? ? ? $('*').css('font-size','50px');
? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? //將頁面中id為sub的ul的后代a標(biāo)簽設(shè)置為紅色
? ? ? ? ? ? ? ? //空格表示所有的后代，包括兒子，孫子，曾孫，重孫
? ? ? ? ? ? ? ? $('#sub a').css('color','orange');
? ? ? ? ? ? ? ? //將頁面中的id為sub的ul標(biāo)簽的所有的子標(biāo)簽中的a標(biāo)簽的字體顏色設(shè)置為紅色
? ? ? ? ? ? ? ? $('#sub>a').css('color','pink');
? ? ? ? ? ? ? ? //將頁面中所有div元素的子標(biāo)簽是span的元素的字體顏色設(shè)置為紅色
? ? ? ? ? ? ? ? $('div>span').css('color','red');
});
</script>
</head>
<body>
<div>
<span>a</span>
<div>
<p><span>b</span></p>
</div>
</div>
<ul id="sub">
<a hreff="#">哈哈</a>
<li>
數(shù)學(xué)
<ul>
<li>微積分</li>
<li>復(fù)變函數(shù)</li>
<li>線性代數(shù)<a href="#">詳情</a></li>
</ul>
<a hreff="#">瀏覽更多</a>
</li>
<li>語文</li>
<li>英語</li>
</ul>
<a href="#">說明</a>
<span>aaa</span>
<span class="bg">bbb</span>
<span>ccc</span>
<p>測試1</p>
<p>測試2</p>
<p>測試3</p>
<div class="bg">AAA</div>
<div>BBB</div>
<div id="tt">CCC</div>
</body>
</html>
下面的內(nèi)容可能要記憶，可能為面試題。
http://docs.jquery.com/Downloading_jQuery
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
? ? <title></title>
? ? <script srcc="jquery-1.11.1.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>
$(function(){}); //執(zhí)行一個(gè)匿名函數(shù)?
$('#divId'); //進(jìn)行執(zhí)行的ID元素選擇?
$('#divId').css('color','red'); //執(zhí)行功能函數(shù)
由于$本身就是jQuery對(duì)象的縮寫形式，所以也可以這樣寫：?
jQuery(function(){});
jQuery('#box');
jQuery('#box').css('color','red');
