jQuery获取目标时：为$(" 目标 ") 如果目标是id：#id 目标是class：.class 目标是标签 ：标签名
页面加载事件，等同于JavaScript原生中的window.onload = function（）{}
<script>
$(function(){
alert("hello jquery!");
});
</script>原生JS与JQ的比较：
<script>
//传统js onload页面加载会存在页面覆盖问题(加载比jQuery慢,整个页面加载完毕<包括里面的其他内容,比如图片>)
window.onload = function(){
alert("张三");
}
//jQuery加载比js加载要快!(当整个dom树结构绘制完毕就会加载)
jQuery(document).ready(function(){
alert("李四");
});
//jQuery不存在覆盖问题,加载的时候是顺序执行
$(document).ready(function(){
alert("王五");
});
//jQuery的最简写方式
$(function(){
alert("田七");
});
</script>案例一：使用JQ代替JS实现弹出广告的效果：
1.书写显示广告图片的定时操作
2.书写显示广告图片的函数
3.获取广告图片并让其显示图片
4.清除显示图片的定时操作
5.设置隐藏图片的定时操作
6.获取广告图片让其隐藏
7.清除隐藏图片的定时操作
核心代码：
<script src="../js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function() {
//1.书写显示广告图片的定时操作
time = setInterval("showAd()", 3000);
});
//2.书写显示广告图片的函数
function showAd() {
//3.获取广告图片并让其显示图片
//$("#img2").show(3000);
//$("#img2").slideDown(3000);
$("#img2").fadeIn(3000);
//4.清除显示图片的定时操作
clearInterval(time);
//5.设置隐藏图片的定时操作
time = setInterval("hiddenAd()", 6000);
}
function hiddenAd() {
//6.获取广告图片让其隐藏
//$("#img2").hide();
//$("#img2").slideUp(1000);
$("#img2").fadeOut(1000);
//7.清除隐藏图片的定时操作
clearInterval(time);
}
</script>
HTML核心代码:
<!--定时弹出广告图片位置-->
<img id="img2" src="../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" width="100%" style="display: none;" />切换的使用方法：
实现切换方法的标签都会一直显示隐藏。
核心代码：
<script>
$(function(){
$("#btn").click(function(){
$("#img1").toggle()
});
});
</script>
Html核心代码;
<div>
<input type="button" value="显示/隐藏" id="btn" />
<img src="../img/middle01.jpg" width="100%" height="100%" id="img1" />
</div>选择器：符号之间的使用
<script src="../../js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function(){
//id符号为"#"
$("#btn1").click(function(){
$("#one").css("background-color","pink");
});
//class符号为"."
$("#btn2").click(function(){
$(".mini").css("background-color","aqua");
});
//标签符号"空"
$("#btn3").click(function(){
$("div").css("background-color","#008000");
});
//匹配所有元素为"*"
$("#btn4").click(function(){
$("*").css("background-color","#E9FBEB");
});
//同时匹配两个条件使用逗号连接
$("#btn5").click(function(){
$("#two,.mini").css("background-color","red");
});
});
</script>
Html核心代码:
<body>
<input type="button" id="btn1" value="选择为one的元素"/>
<input type="button" id="btn2" value="选择样式为mini的元素"/>
<input type="button" id="btn3" value="选择所有的div元素"/>
<input type="button" id="btn4" value="选择所有元素"/>
<input type="button" id="btn5" value="选择id为two并且样式为mini的元素"/>
<hr/>
<div id="one">
<div class="mini">
111
</div>
</div>
<div id="two">
<div class="mini">
222
</div>
<div class="mini">
333
</div>
</div>
<div id="three">
<div class="mini">
444
</div>
<div class="mini">
555
</div>
<div class="mini">
666
</div>
</div>
<span id="four">
</span>
</body>使用jQuery实现表格奇偶行的隔行换色处理（even odd）
第一步，在页面加载事件中进行隔行换色
第二步：对偶数行进行换色
第三步：对奇数行进行换色
核心代码：
<script>
//1.页面加载函数
$(function(){
//2.获取tbody中的偶行并设置背景颜色
$("tbody>tr:even").css("background-color","#FF0000");
//3.获取tbody中的奇数行并设置背景颜色
$("tbody>tr:odd").css("background-color","gray");
});
</script>
html核心代码：
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>22</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>25</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>27</td>
</tr>
<tr>
<td>4</td>
<td>赵六</td>
<td>29</td>
</tr>
<tr>
<td>5</td>
<td>田七</td>
<td>30</td>
</tr>
<tr>
<td>6</td>
<td>汾九</td>
<td>20</td>
</tr>
</tbody>上述代码是在没有样式时使用的！如果我们的美工给了我们样式，此时我们应该使用美工的样式，去导入css样式如下核心代码：
<script>
//1.页面加载函数
$(function() {
//2.获取tbody中的偶行并设置背景颜色
$("tbody>tr:even").addClass("even");
//3.获取tbody中的奇数行并设置背景颜色
$("tbody>tr:odd").addClass("odd");
});
</script>
注意：一定要在上面引入我们的样式css才能看见效果使用JQuery实现全选全不选操作
核心代码：
<script>
//页面加载事件
$(function() {
//下述代码表明为：为checkAll按钮绑定一个单击事件，并绑定一个方法
$("#checkAll").click(function() {
//$("tbody input").attr("checked",true); //层级获取全部选框
//$("input.checkone").attr("checked",true);//jQuery不能直接使用Dom标签的checked=true
//解释以下代码：this代表当前操作的对象，checked代表获取当前操作对象的checked的属性，这样就可以是下面的选框与上面的保持一致了
//attr方法与JQ的版本有关，在1.8.3及以下有效。
//$("input.checkone").attr("checked",this.checked);
//高版本的方法都是向低版本兼容
$("input.checkone").prop("checked", this.checked);
});
});
</script>
html核心代码:
<tr>
<th><input type="checkbox" id="checkAll" /></th>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
<tbody>
<tr>
<td><input type="checkbox" class="checkone" /></td>
<td>1</td>
<td>张三</td>
<td>22</td>
</tr>
</tbody>