目标内容
- 列举常见的五中选择器,并简单描述其作用
- 通过选择器,获得jQuery对象
- 学会给标签绑定事件
- 可以实现显示或隐藏标签
目录树图
一 JQuery介绍
1.1 JQuery概述
1.1.1 什么是jQuery
jQuery是一个JavaScript框架,它兼容CSS3,还兼容各种浏览器.文档说明很全,应用详细,成熟插件多.
jQuery2.0及后续版本不再支持IE6/7/8浏览器
核心概念是write less,do more(写的很少,做的很多)
1.1.2 下载![](https://img-blog.csdn.net/20180123122324088?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvQWxleE1vb25TdHJpdmVy/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
1.1.3 引入和对象获取
导入JQuery库
<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
1.2 基本语法
1.2.1jQuery(选择器)或 $(选择器) 在jQuery中"jQuery == $",区分大小写
//1获得jQuery对象
//*命名约定 :jQuery对象变量名建议以$开头
var $demoId = $("#demoId");
1.2.2 JQ和JS页面加载区别
<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>
1.2.3 JQ的获取 <script>
$(function(){
//1.JS方式获取
/*document.getElementById("btn").οnclick= function(){
location.href="惊喜.html";
}*/
//2.JQ方式获取=====>>>$("#btn")
$("#btn").click(function(){
location.href="惊喜.html"
});
});
</script>
</head>
<body>
<input type="button" value="点我有惊喜" id="btn"/>
</body>
<script>
$(function(){
//1.JS方式获取
/*document.getElementById("btn").οnclick= function(){
location.href="惊喜.html";
}*/
//2.JQ方式获取=====>>>$("#btn")
$("#btn").click(function(){
location.href="惊喜.html"
});
});
</script>
</head>
<body>
<input type="button" value="点我有惊喜" id="btn"/>
</body>
1.2.4 jQuery对象和DOM转换
jQuery对象和DOM对象可以项目转换,但两个对象的函数不能彼此混搭使用,jQuery对象只能使用自己的函数
DOM对象转换成jQuery对象,语法jQuery(DOM对象)
jQuery对象转换成DOM对象,语法$username[index]
<head>
<meta charset="UTF-8">
<title>Dom与JQ对象之间的转换</title>
<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
<script>
function write1(){
//1.JS的DOM操作
//document.getElementById("span1").innerHTML="萌萌哒!";
//DOM对象无法操作JQ对象里面属性和方法
//document.getElementById("span1").html("萌萌哒!");
var spanEle = document.getElementById("span1");
//将DOM对象转换成JQ对象
$(spanEle).html("思密达");
}
$(function(){
$("#btn").click(function(){
//JQ对象无法操作JS里面的属性和方法!!!
//$("#span1").innerHTML="呵呵哒!"
$("#span1").html("呵呵哒!");
//JQ对象向DOM对象转换方式一
$("#span1").get(0).innerHTML="美美哒!";
//JQ对象向DOM对象转换方式二
$("#span1")[0].innerHTML="棒棒哒!";
});
});
</script>
</head>
<body>
<input type="button" value="JS写入" οnclick="write1()"/>
<input type="button" value="JQ写入" id="btn"/><br />
班长:<span id="span1">你好帅!</span>
</body>
1.2.5 基本选择器
jQuery后续学习中,"基本选择器"使用频率最大,比较重要
*id选择器 : 格式:$("#id值") var $d1 = $("#r01");
*标签选择器 : 格式: $("标签名") var $d2 = $("input");
*类选择器 : 格式: $(".class 类名") var $d3 = $(".myClass");
1.2.6 基本
*通过改变元素 高度和宽度,显示或隐藏
- show(speed,fn) 显示
参数1: 显示速度,单位:ms ,固定字符串:slow ,normal, or fast
参数2: 显示成功之后的回调函数
- hide() 隐藏
- toggle() 切换
1.2.7 滑动
通过改变元素高度 显示或者隐藏
- slideDown() 显示: 高度变大
- slideUp() 隐藏,高度变小
- slideToggle() 切换
1.2.8 淡入淡出
通过改变元素 透明度 显示或隐藏
- fadeIn() 显示
- fadeOut() 隐藏
- fadeToggle() 切换
- fadeTo(speed,opacity,[fn]) 指定透明度
参数2 opacity:一个0到1之间表示透明度的数字
1.3 定时弹出广告案例<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>
★★★选择器总结
<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>
1.4.1基本选择器
-
id选择器 : 格式:$("#id值") var $d1 = $("#r01");
-
标签选择器 : 格式: $("标签名") var $d2 = $("input");
-
类选择器 : 格式: $(".class 类名") var $d3 = $(".myClass");
1.4.2 层级选择器
- A B , 获得A元素内部的所有B元素(祖孙) --后代
- A>B , 获得A元素下面的所有B子元素(父子)
- A+B , 获得A元素同级下一个B元素(兄弟)
- A~B , 获得A元素同级所有B元素(兄弟)
1.4.3 基本过滤选择器
- :first 第一个
- :last 最后 一个
- :not(..) 删除指定内容 例如:1234:not(3) -->124
- :even 偶数 从0开始技术 -- 操作索引号,页面显示奇数项
- :odd 奇数
- :eq(index) 指定第几个 =
- :gt(index) 大于n个>
- :lt(index) 小于n个<
- ----------------------
- :header获得标题(<h1>/<h2>...)
- :animated 获得动画的
- :focus 获得焦点的
1.4.4 属性选择器
- [属性名] 获得有属性名的元素
- [属性名=值] 获得属性名 等于 值 元素
- [属性名!=值] 获得属性名 不等于 值 元素
- [...][...][...] 符合属性选择器,多个属性同时过滤 where.. and .. and ..
- ---------------------------------------------------------------------
- [属性名^=值] 获得属性名 以 值 开头 元素
- [属性名$=值] 获得属性名 以 值 结尾 元素
- [属性名*=值] 获得属性名 含有 值 元素
1.4.5 表单属性选择器
- :enabled 可用
- :disabled 不可用
- :checked 选中(单选radio 多选checkbox)
- :selected 选择(下拉列表<select>)
二 案例二 隔行换色
2.1 相关技术
<xxx class="">
* addClass() 给指定标签的class属性追加样式
* removeClass() 将标签指定的class属性移除
* toggleClass() 切换class属性样式,
2.2 案例实现 <script>
//1.页面加载
$(function(){
/*//2.获取tbody下面的偶数行并设置背景颜色
$("tbody tr:even").css("background-color","yellow");
//3.获取tbody下面的奇数行并设置背景颜色
$("tbody tr:odd").css("background-color","green");*/
//2.获取tbody下面的偶数行并设置背景颜色
$("tbody tr:even").addClass("even");
$("tbody tr:even").removeClass("even");
//3.获取tbody下面的奇数行并设置背景颜色
$("tbody tr:odd").addClass("odd");
});
</script>
<script>
//1.页面加载
$(function(){
/*//2.获取tbody下面的偶数行并设置背景颜色
$("tbody tr:even").css("background-color","yellow");
//3.获取tbody下面的奇数行并设置背景颜色
$("tbody tr:odd").css("background-color","green");*/
//2.获取tbody下面的偶数行并设置背景颜色
$("tbody tr:even").addClass("even");
$("tbody tr:even").removeClass("even");
//3.获取tbody下面的奇数行并设置背景颜色
$("tbody tr:odd").addClass("odd");
});
</script>
三 案例三 全选和全不选
3.1 相关知识
属性操作 prop()
*prop() 操作的标签的特性,JQ1.6性特性,获得一些第一次分配undefined属性值的标签时,如果抛异常,将忽略浏览器生成的任何错误.
*removeProp() 移除标签的特性
3.2 案例实现<script>
$(function(){
$("#select").click(function(){
//获取下面所有的 复选框并将其选中状态设置跟编码的前端 复选框保持一致。
//attr方法与JQ的版本有关,在1.8.3及以下有效。
//$("tbody input").attr("checked",this.checked);
$("tbody input").prop("checked",this.checked);
});
});
</script>
<script>
$(function(){
$("#select").click(function(){
//获取下面所有的 复选框并将其选中状态设置跟编码的前端 复选框保持一致。
//attr方法与JQ的版本有关,在1.8.3及以下有效。
//$("tbody input").attr("checked",this.checked);
$("tbody input").prop("checked",this.checked);
});
});
</script>