今日目标：
掌握JQuery的基本使用
掌握JQuery的基本选择器,层次选择器
会使用JQuery完成DOM的基本操作
什么JQuery:
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等
JQuery的作用:
1. 写更少的代码,做更多的事情: write Less ,Do more
2. 将我们页面的JS代码和HTML页面代码进行分离
为什么学习JQuery:
提高我们的工作效率
JQ的入门
<script>
//js文档加载完成的事件
window.onload = function(){
alert("window.onload 111");
}
window.onload = function(){
alert("window.onload 222");
}
/*文档加载完成的事件*/
jQuery(document).ready(function(){
alert("jQuery(document).ready(function()");
});
/*
jQuery 简写成 $
*/
$(document).ready(function(){
alert("$(document).ready(function()");
});
/*
最简单的写法
*/
$(function(){
alert("$(function(){");
});
</script>
【JQ中根据ID查找元素】
全都是根据选择器去找的
#ID{}
.类名{}
$("#ID的名称")
【JQ和JS之间的转换】
-
JQ对象,只能调用JQ的属性和方法
-
JS对象 只能调用JS的属性和方法
function changeJS(){
var div = document.getElementById("div1");
// div.innerHTML = "JS成功修改了内容"
//将JS对象转成JQ对象
$(div).html("转成JQ对象来修改内容")
}
$(function(){
//给按钮绑定事件
$("#btn2").click(function(){
//找到div1
// $("#div1").html("JQ方式成功修改了内容");
//将JQ对象转成JS对象来调用
var $div = $("#div1");
// var jsDiv = $div.get(0);
var jsDiv = $div[0];
jsDiv.innerHTML="jq转成JS对象成功";
});
});JQ的开发步骤: (将我们页面的JS代码和HTML页面代码进行分离)
1. 导入JQ相关的文件 2. 文档加载完成事件: $(function) : 页面初始化的操作: 绑定事件, 启动页面定时器 3. 确定相关操作的事件 4. 事件触发函数 5. 函数里面再去操作相关的元素
1. 使用JQuery完成页面定时弹出广告
1.1 需求分析：
当用户打开界面，3秒钟之后弹出广告，这个广告显示5秒钟，隐藏广告
1.2 技术分析
定时器: setTimeout
显示和隐藏: style.display = "block/none"
显示和隐藏 img.style.display
【JQ中的动画效果】
show() hide() slideUp slideDown fadeIn fadeOut animate : 自定义动画
1.3 步骤分析：
-
导入JQ的文件
-
编写JQ的文档加载事件
-
启动定时器 setTimeout("",3000);
-
编写显示广告的函数
-
在显示广告里面再启动一个定时器
-
编写隐藏广告的函数
1.4 代码实现
<script>
//显示广告
function showAd(){
$("#img1").slideDown(2000);
setTimeout("hideAd()",3000);
}
//隐藏广告
function hideAd(){
$("#img1").slideUp(2000);
}
$(function(){
setTimeout("showAd()",3000);
});
</script>
JQuery中的选择器
让我们能够更加精确找到我们要操作的元素
基本选择器
-
ID选择器 : #ID的名称
-
类选择器: 以 . 开头 .类名
-
元素选择器: 标签的名称
-
通配符选择器: *
-
选择器,选择器: 选择器1,选择器2
基本选择器的案例
<!--
- ID选择器 : #ID的名称
- 类选择器: 以 . 开头 .类名
- 元素选择器: 标签的名称
- 通配符选择器: *
- 选择器,选择器: 选择器1,选择器2
-->
<script>
//文档加载事件,页面初始化的操作
$(function(){
//初始化操作: 给按钮绑定事件
$("#btn1").click(function(){
$("#two").css("background-color","palegreen");
});
//找出mini类的所有元素
$("#btn2").click(function(){
$(".mini").css("background-color","palegreen");
});
$("#btn3").click(function(){
$("div").css("background-color","palegreen");
});
$("#btn4").click(function(){
$("*").css("background-color","palegreen");
});
/*选择器分组*/
//找出mini类 和 span元素
$("#btn5").click(function(){
$(".mini,span").css("background-color","palegreen");
});
});
</script>JQ中的层级选择器
-
子元素选择器: 选择器1 > 选择器2
-
后代选择器: 选择器1 儿孙
-
相邻兄弟选择器 : 选择器1 + 选择器2 : 找出紧挨着的一个弟弟
-
找出所有弟弟: 选择器1~ 选择器2 : 找出所有的弟弟
<script>
//文档加载事件,页面初始化的操作
$(function(){
//初始化操作: 给按钮绑定事件
//找出body下面的子div
$("#btn1").click(function(){
$("body > div").css("background-color","palegreen");
});
//找出body下面的所有div
$("#btn2").click(function(){
$("body div").css("background-color","palegreen");
});
$("#btn3").click(function(){
$("#one+div").css("background-color","palegreen");
});
$("#btn4").click(function(){
$("#two~div").css("background-color","palegreen");
});
});
</script>
JQ中的基本过滤器
<script>
$(function(){
/<script>
//文档加载事件,页面初始化的操作
$(function(){
//初始化操作: 给按钮绑定事件
//过滤出所有div中第一个元素
$("#btn1").click(function(){
$("div:first").css("background-color","palegreen");
});
//过滤出所有div中偶数位的div
$("#btn2").click(function(){
$("div:even").css("background-color","palegreen");
});
$("#btn3").click(function(){
$("div:odd").css("background-color","palegreen");
});
$("#btn4").click(function(){
$("div:gt(2)").css("background-color","palegreen");
});
});
</script>
JQ中的属性选择器
$(function(){
//找到有name属性的input
$("#btn1").click(function(){
$("input[name]").attr("checked",true);
});
$("#btn2").click(function(){
$("input[name='accept']").attr("checked",true);
});
$("#btn3").click(function(){
$("input[name='newsletter'][value='Hot Fuzz']").attr("checked",true);
});
});JQ中的表单过滤器
<script>
//1.文档加载事件
$(function(){
$(":text").css("background-color","pink");
});
</script>使用JQ完成表格的隔行换色
需求分析:
在我们的实际开发过程中,我们的表格如果所有的行都是一样的话,很容易看花眼,所以我们需要让我们的表格隔行换色
技术分析:
获取所有行 table.rows
遍历所有行
根据行号去修改每一行的背景颜色: bgColor
style.backgroundColor = "red"
步骤分析:
-
导入JQ的包
-
文档加载完成函数: 页面初始化
-
获得所有的行 : 元素选择器
-
根据行号去修改颜色
代码实现:
$(function(){
//获得所有的行 : 元素选择器
$("tbody > tr:even").css("background-color","#CCCCCC");
//修改基数行
$("tbody > tr:odd").css("background-color","#FFF38F");
// $("tbody > tr").css("background-color","#FFF38F");
});
使用JQuery完成表单的全选全不选功能
需求分析
在我们对表格处理的时,有些情况下,我们需要对表格进行批量处理,
技术分析:
代码实现:
使用JQ完成省市联动效果
需求分析:
在我们的注册表单中,通常我们需要知道用户的籍贯,需要一个给用选择的项,当用户选中了省份之后,列出省下面所有的城市
技术分析:
-
准备工作 : 城市信息的数据
-
添加节点 : appendChild (JS)
-
append : 添加子元素到末尾
-
appendTo : 给自己找一个爹,将自己添加到别人家里
-
prepend : 在子元素前面添加
-
after : 在自己的后面添加一个兄弟
-
-
遍历的操作:
步骤分析:
-
导入JQ的文件
-
文档加载事件:页面初始化
-
进一步确定事件: change事件
-
函数: 得到当前选中省份
-
得到城市, 遍历城市数据
-
将遍历出来的城市添加到城市的select中
代码实现:
$(function(){
$("#province").change(function(){
// alert(this.value);
//得到城市信息
var cities = provinces[this.value];
//清空城市select中的option
/*var $city = $("#city");
//将JQ对象转成JS对象
var citySelect = $city.get(0)
citySelect.options.length = 0;*/
$("#city").empty(); //采用JQ的方式清空
//遍历城市数据
$(cities).each(function(i,n){
$("#city").append("<option>"+n+"</option>");
});
});
});
使用JQ完成下拉列表左右选择
需求分析
我们的商品通常包含已经有了的, 还有没有的,现在我们需要有一个页面用于动态编辑这些商品
技术分析
步骤分析
1. 导入JQ的文件 2. 文档加载函数 :页面初始化 3.确定事件 : 点击事件 onclick 4. 事件触发函数 1. 移动被选中的那一项到右边
代码实现
<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
<script>
$(function(){
$("#a1").click(function(){
//找到被选中的那一项
//将被选中项添加到右边
$("#rightSelect").append($("#leftSelect option:selected"));
});
//将左边所有商品移动到右边
$("#a2").click(function(){
$("#rightSelect").append($("#leftSelect option"));
});
});
</script>
扫一扫
217
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
