Java Web：JQUERY基础核心和选择器，面试题，PPT，多播事件委托，选择器【诗书画唱】
多播事件委托，用JQUERY时可以同时让3个弹出框有效，用window.onload的话就会有些部分失效，个人的理解，有些用jquery写会更具兼容性和更简便，代码量会更少等等：
<!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);
// }
// //后面的函数会覆盖掉前面的函数，所以只会弹出2
// window.onload = function(){
// alert(2);
// }
//通过这种方式绑定的函数不会产生覆盖
//多播事件委托
$(document).ready(function(){
alert(1);
});
$(document).ready(function(){
alert(2);
});
//我们可以给jQuery对象取其他的名字
var $$ = jQuery;
$$(document).ready(function(){
alert(3);
})
</script>
</head>
<body>
</body>
</html>
鼠标放上文字上后出现图片，离开后隐藏图片：
<!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代码会在html代码执行完成以后执行
//原生的JS代码
// window.onload = function(){
// var a = document.getElementById('link');
// var d = document.getElementById('myDiv');
// a.onmouseover = function(){//鼠标放在a标签上时触发
// //显示图片
// d.style.display = 'block';
// }
// a.onmouseout = function(){//鼠标离开a标签时触发
// d.style.display = 'none';
// }
// }
//JQUERY代码
$(function(){//onload对应的事件
var d = $('#myDiv');//ID选择器
$('#link').hover(function(){//复合事件函数
d.css('display','block');//css方法的调用
},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>
常规选择器的使用模板示例：
<!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对象
console.log(span);
//span.style.color = 'red';//原生的JS
$(span).css('color','yellow');//jQuery代码
}
//获取页面中class属性为bg的所有元素
var es = $('.bg');
//console.log('选中元素的个数是：' + es.length);
//分辨什么是jquery对象，什么是dom对象
//通过id选择器选中的返回的对象都是jQuery对象
//获取页面中id为dv的元素
var d = $('#dv');//jQuery对象
var d1 = document.getElementById('dv');//dom对象
//将dom对象转换成jQuery对象
//console.log($(d1));
//将jQuery对象转换成dom对象
//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>
进阶选择器的使用模板示例， 将页面中所有元素的字体大小设置为50px，将页面中id为sub的ul的后代a标签设置为红色，将页面中的id为sub的ul标签的所有的子标签中的a标签的字体颜色设置为红色，将页面中所有div元素的子标签是span的元素的字体颜色设置为红色：
<!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的元素的字体颜色设置为红色
// $('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');
// }
//将页面中所有元素的字体大小设置为50px
$('*').css('font-size','50px');
//将页面中id为sub的ul的后代a标签设置为红色
//空格表示所有的后代，包括儿子，孙子，曾孙，重孙
$('#sub a').css('color','orange');
//将页面中的id为sub的ul标签的所有的子标签中的a标签的字体颜色设置为红色
$('#sub>a').css('color','pink');
//将页面中所有div元素的子标签是span的元素的字体颜色设置为红色
$('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>
数学
<ul>
<li>微积分</li>
<li>复变函数</li>
<li>线性代数<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>
下面的内容可能要记忆，可能为面试题。
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(){}); //执行一个匿名函数
$('#divId'); //进行执行的ID元素选择
$('#divId').css('color','red'); //执行功能函数
由于$本身就是jQuery对象的缩写形式，所以也可以这样写：
jQuery(function(){});
jQuery('#box');
jQuery('#box').css('color','red');
