JQuery(一)
- JQuery文档非常完善
- 今日重点:
- JQ选择器的学习
- 概述
- jQuery是javascript的一个库,很轻量级
- 在实际开发中,都不会使用javascript,即使使用,也是很少的一部分公司使用,一般都是用javascript封装好的一些小型框架
- jQuery兼容CSS3，jQuery2.0之后不再支持ie6,ie7,ie8
- jQuery1.8.3用的最多
- 引入JQ
<!--现在1.8.3用的比较多-->
<script src="../../js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
alert("Hello JQuery!");
});
</script>
-
jQuery 和 javascript页面加载区别
- javascript页面加载区别
/*传统js如果调用两次window.onload会存在覆盖问题,后面的覆盖前面的*/ window.onload = function() {alert('hello world1')} window.onload = function() {alert('hello world2')}- jQuery加载比js快
- JQ:dom加载完成后就会加载
- JS:整个页面加载完毕再调用
- jQuert不存在覆盖问题,顺序执行
jQuery(document).ready(function() { //1 alert('hello world1'); }); $(document).ready(function( //2 alert('hello world2'); )); $(function( //3 alert('hello world3') ))； /* 简写方式 $(function(){}) */ JQ获取元素
//页面加载
$(function(){
//传统方式获取
document.getElementById('id').onclick = function(){
location.href = 'http://www.google.com'
}
//JQ方式获取
$('#id').click(function(){
location.href = 'http://google.com';
})
});
- DOM对象和jQuery对象的转换
//JS的dom操作
document.getElementById('span_1').innerHTML = 'xxxx';
//jQuery的dom操作
$(function(){//docuent加载完后执行,不加这行代码,事件不能绑定
$('#btn').click(function(){
//jQuery获取的对象不能调用js对象的方法，反过来也一样
//$('#span_1').innerHTML = 'xxxx';
$('#span_1').html('xxxx');
});
});
//jQuery转DOM
$('#btn').click(function(){
//jQuery获取的对象转换为DOM对象
//$('#span_1').get(0) //这样就编程DOM对象
$('#span_1').get(0).innerHTML = 'xxxx';
$('#span_1')[0].innerHTML = 'xxxx';
});
//DOM转jQuery
function fun() {
var spanEle = document.getElementById('#span_1');
//$(spanEle) //这样就转成了Jquery对象了
$(spanEle).html('xxxx');
}
jQuery选择器
-
基本选择器
- id选择器:"#id"
$("#id_name").css("background-color","pink");- 类选择器:".class"
$(".class_name").css('background-color',"yellow");- 元素选择器:
$("div").css("background-color","#FF6500");- 匹配所有的元素(*):只要是标签都匹配
$("*").css("background-color",'red');- 并集选择器:select1,select2,select3(将多个选择器匹配的到的元素合并后返回)
//选择id为id_name并且类为class_name的元素 $("#id_name,.class_name").css("background-color","#FF6500"); -
层级选择器
- 在给定的祖先元素下匹配所有的元素(子孙关系)
$("body div").css("background-color","paleturquoise");- 给定父元素下的所有子元素(父子关系)
$("body>div").css("background-color","gold");- 匹配所有紧接在prev元素后的next元素(同桌)
//id为two后紧挨着的div $("#two+div").css("background-color",'#FF6500');- 匹配prev元素之后的所有siblings元素(兄弟)
//id为one的所有div兄弟元素 $("#one~div").css('background-color',"#FF0000"); -
基本过滤器
- 第一个元素
//body下的第一个div元素 $("body>div:first").css("background-color",'pink');- 最后一个元素
//body下最后一个div $("body>div:last").css("background-color","blueviolet");- 奇数集合
# body下所有div元素中序号为基数的div集合 $("body div:odd").css("background-color","yellowgreen");- 偶数集合
$("body div:even").css("background-color","red"); 属性选择器
//所有有id属性的div元素
$("div[id]").css("background-color",'yellow');
//所有id为two的所有div元素
$("div[id='two']").css('background-color',"#FF0000");
- 表单选择器
$(":input"):查找所有的input元素
$(":text"):查找所有文本框
$(":password"):查找所有密码框
$(":radio"):查找所有单选按钮
$(":checkbox"):查找所有复选框
$(":submit")
$(":image")
$(":reset")
$(":button")
$(":file")
jQuery弹出广告图片
<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>
- toggle使用
<div>
<input type="button" value="显示/隐藏" id="btn" /><br />|
</div>
<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
$("#img1").toggle();
});
});
</script>
jQuery隔行换色
<script type="text/javascript">
$(function(){
$("tbody>tr:even").css("background-color","gold");
$("tbody>tr:odd").css("background-color","pink");
});
</script>
- 通过JQ设置CSS一般不自己写,都是通过引用UI提供的CSS样式
<!--引入UI给的css样式-->
<link rel="stylesheet" href="../css/style.css" />
$("tbody tr:even").addClass("class_name");
$("tbody tr:even").removeClass("class_name");
//3.获取tbody下面的奇数行并设置背景颜色
$("tbody tr:odd").addClass("class_name");
jQuery全选全不选
<script>
$(function(){
$("#select").click(function(){
//获取下面所有的 复选框并将其选中状态设置跟编码的前端 复选框保持一致。
//attr方法与JQ的版本有关，在1.8.3及以下有效。
$("tbody input").attr("checked",this.checked);
$("tbody input").prop("checked",this.checked);
});
});
</script>
