-
jquery相关的知识
Jquery它是javascript的一个轻量级框架，对javascript进行封装，它提供了很多方便的选择器。供你快速定位到需要操作的元素上面去。还提供了很多便捷的方法。-*
Jquery它是一个库(框架)，要想使用它，必须先引入！
jquery-1.8.3.js：一般用于学习阶段。
jquery-1.8.3.min.js：用于项目使用阶段
-
jquery的简单入门
所有的jquery代码写在页面加载函数
$(function(){
Jquery代码
});-
获取元素
JS: document.getElementById();
JQ: $(“#id”);
-
JS与JQ页面加载区别
传统的方式页面加载会存在覆盖问题，加载比JQ慢(整个页面加载完毕<包括里面的其它内容，比如图片>)
JQ的加载比JS加载要快！(当整个dom树结构绘制完毕就会加载)
JQ不存在覆盖问题，加载的时候是顺序执行
<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
<script>
window.onload = function(){
alert("张三");
}
//传统的方式页面加载会存在覆盖问题，加载比JQ慢(整个页面加载完毕<包括里面的其它内容，比如图片>)
window.onload = function(){
alert("老王");
}
//JQ的加载比JS加载要快！(当整个dom树结构绘制完毕就会加载)
jQuery(document).ready(function(){
alert("李四");
});
//JQ不存在覆盖问题，加载的时候是顺序执行
$(document).ready(function(){
alert("王五");
});
//简写方式
$(function(){
alert("汾九");
});
</script>
张三被覆盖掉了
JQ的获取 VS JS方式获取
<script>
$(function(){
//1.JS方式获取
document.getElementById("btn").onclick= function(){
location.href="惊喜.html";
}
//2.JQ方式获取=====>>>$("#btn")
$("#btn").click(function(){
location.href="惊喜.html"
});
});
</script>
<body>
<input type="button" value="点我有惊喜" id="btn"/>
</body>使用JQ完成首页定时弹出广告图片
步骤：
第一步：引入jQuery相关的文件
第二步：书写页面加载函数
第三步：在页面加载函数中，获取显示广告图片的元素。
第四步：设置定时操作(显示广告图片的函数)
第五步：在显示广告图片的函数中，使用jQuery的方法让广告图片显示(show())
第六步：清除显示广告图片的定时操作
第七步：设置定时操作(隐藏广告图片的函数)
第八步：在隐藏广告图片的函数中，使用jQuery的方法让广告图片隐藏(hide())
第九步：清除隐藏广告图片的定时操作
<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<script>
$(function(){
//1.书写显示广告图片的定时操作
time = setInterval("showAd()",3000);
});
//2.书写显示广告图片的函数
function showAd(){
//3.获取广告图片，并让其显示
//$("#img2").show(1000);
//$("#img2").slideDown(5000);
$("#img2").fadeIn(4000);
//4.清除显示图片定时操作
clearInterval(time);
//5.设置隐藏图片的定时操作
time = setInterval("hiddenAd()",3000);
}
function hiddenAd(){
//6.获取广告图片，并让其隐藏
//$("#img2").hide();
//$("#img2").slideUp(5000);
$("#img2").fadeOut(6000);
//7.清除隐藏图片的定时操作
clearInterval(time);
}
</script>
<body onload="init()">
<div id="father">
<!--定时弹出广告图片位置-->
<img src="../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" width="100%" style="display: none" id="img2"/>
</div>
</body>-
基本选择器
- id选择器：$(“#id名称”);
- 元素选择器：$(“元素名称”);
- 类选择器：$(“.类名”);
-
层级选择器
- ancestor descendant: 在给定的祖先元素下匹配所有的后代元素(儿子、孙子、重孙子)
- parent > child : 在给定的父元素下匹配所有的子元素(儿子)
- prev + next: 匹配所有紧接在 prev 元素后的 next 元素(紧挨着的，同桌)
- prev ~ siblings: 匹配 prev 元素之后的所有 siblings 元素(兄弟)
-
属性选择器
-
表单选择器
-
使用jQuery完成表格隔行换色
此处用了两种方法，方法一是直接使用css$("tbody tr:even")--------css("background-color","yellow");
，方法二是引入一个css,给相应的行数增加class类别标签直接引用外部写好的css样式----- $("tbody tr:even").addClass("even");
<script>
//1.页面加载
$(function(){
//2.获取tbody下面的偶数行并设置背景颜色
$("tbody tr:even").css("background-color","yellow");
//3.获取tbody下面的奇数行并设置背景颜色
$("tbody tr:odd").css("background-color","pink");
//2.获取tbody下面的偶数行并设置背景颜色
$("tbody tr:even").addClass("even");
//$("tbody tr:even").removeClass("odd");
//3.获取tbody下面的奇数行并设置背景颜色
$("tbody tr:odd").addClass("odd");
});
</script>
<body>
<table border="1" width="500" height="50" align="center" id="tbl" id="tbl">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr >
<td>1</td>
<td>张三</td>
<td>22</td>
</tr>
</tbody>
</table>
</body>
使用jQuery完成复选框的全选和全不选
$("tbody input").attr("checked",this.checked); ------将tbody下的input的checked值变成和select的checked一样
<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<!--<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>-->
<script>
$(function(){
$("#select").click(function(){
//获取下面所有的 复选框并将其选中状态设置跟编码的前端 复选框保持一致。
//attr方法与JQ的版本有关，在1.8.3及以下有效。
//$("tbody input").attr("checked",this.checked);
$("tbody input").prop("checked",this.checked);
});
});
</script>
如果我改成这样，就不论全选框怎样，我的下面的每一列都是选中的了-------------$("tbody input").prop("checked",true);
