JQuery基础知识学习总结
什么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完成页面定时弹出广告
定时器:
setInterval clearInterval
setTimeout clearTimeout
显示: img.style.display = “block”
隐藏: img.style.display = “none”
img 对象
style属性: style对象
使用JQuery完成表格的隔行换色
获得所有的行
table.rows[]
修改行的颜色
row.bgColor =”red”
row.style.backgroundColor = “black”
row.style.background = “red”
“background-color:red”
“background:red”
使用JQuery完成复选框的全选效果
checked属性
如何获取所有复选框:
document.getElementsByName get Elements By Name 数据库里面
使用JQuery完成省市联动效果
JS中的数组: [“城市”]
new Array()
DOM树操作:
创建节点: document.createElement
创建文本节点: document.createTextNode
添加节点: appendChild
使用JQuery完成下列列表左右选择
select下拉列表
multiple 允许多选
ondblclick : 双击事件
for循环遍历,一边遍历一边移除出现的问题
使用JQuery完成表单的校验(扩展)
事件:
获得焦点事件: onfocus
失去焦点事件: onblur
按键抬起事件: onkeyup
鼠标移入: onmouseenter
鼠标移出: onmouseout
JS引入外部文件 : script
使用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. 函数里面再去操作相关的元素
显示和隐藏 img.style.display
【JQ中的动画效果】
show()
hide()
slideUp
slideDown
fadeIn
fadeOut
animate : 自定义动画
步骤分析:
- 导入JQ的文件
- 编写JQ的文档加载事件
- 启动定时器 setTimeout(“”,3000);
- 编写显示广告的函数
- 在显示广告里面再启动一个定时器
- 编写隐藏广告的函数
代码实现
<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完成表格的隔行换色
步骤分析:
- 导入JQ的包
- 文档加载完成函数: 页面初始化
- 获得所有的行 : 元素选择器
- 根据行号去修改颜色
代码实现:
$(function(){
//获得所有的行 : 元素选择器
$("tbody > tr:even").css("background-color","#CCCCCC");
//修改基数行
$("tbody > tr:odd").css("background-color","#FFF38F");
// $("tbody > tr").css("background-color","#FFF38F");
});
使用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>
使用JQ完成表单的校验(扩展)
技术分析
- trigger
- triggerHandler
- is()
步骤分析
- 首先给必填项,添加尾部添加一个小红点
- 获取用户输入的信息,做相应的校验
- 事件: 获得焦点, 失去焦点, 按键抬起
- 表单提交的事件
代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../css/style.css" />
<title></title>
<!--
1. 首先给必填项,添加尾部添加一个小红点
2. 获取用户输入的信息,做相应的校验
3. 事件: 获得焦点, 失去焦点, 按键抬起
4. 表单提交的事件
Jq的方式来实现:
1. 导入JQ的文件
2. 文档加载事件: 在必填项后天加一个小红点
3. 表单校验确定事件: blur focus keyup
4. 提交表单 submit
-->
<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
<script>
$(function(){ //默认做一些页面初始化
//动态在必填项后面添加小红点
$(".bitian").after("<font class='high'>*</font>");
//给必填项绑定事件
$(".bitian").blur(function(){
//首先获取用户当前输入的值
var value = this.value; //123
//清空上一次提示的信息
$(this).parent().find(".formtips").remove();
//判断当前的值是哪一项输入的值
if($(this).is("#username")){ //判断是否是用户名输入项
if(value.length < 6){
$(this).parent().append("<span class='formtips onError'>用户名太短了</span>");
}else{
$(this).parent().append("<span class='formtips onSuccess'>用户名够用</span>");
}
}
if($(this).is("#password")){ //判断是否是密码输入项
if(value.length < 6){
$(this).parent().append("<span class='formtips onError'>,密码太短了</span>");
}else{
$(this).parent().append("<span class='formtips onSuccess'>密码够用</span>");
}
}
}).focus(function(){
$(this).triggerHandler("blur");
}).keyup(function(){
$(this).triggerHandler("blur");
})
//给表单提交绑定事件
$("form").submit(function(){
//触发所有必填项的校验
$(".bitian").trigger("focus");
//找到错误信息的个数
if($(".onError").length > 0){
return false;
}
return true;
});
});
/*
$(function(){
// 在所有必填项后天加一个小红点 *
$(".bitian").after("<font class='high'>*</font>");
//事件绑定
$(".bitian").blur(function(){
// var value = this.value;
var value = $(this).val();
//清空当前必填项后面的span
// $(".formtips").remove();
$(this).parent().find(".formtips").remove();
//获得当前事件是谁的
if($(this).is("#username")){
//校验用户名
if(value.length < 6){
$(this).parent().append("<span class='formtips onError'>用户名太短了</span>");
}else{
$(this).parent().append("<span class='formtips onSuccess'>用户名够用</span>");
}
}
if($(this).is("#password")){
//校验密码
if(value.length < 3){
$(this).parent().append("<span class='formtips onError'>密码太短了</span>");
}else{
$(this).parent().append("<span class='formtips onSuccess'>密码够用</span>");
}
}
}).focus(function(){
$(this).triggerHandler("blur");
}).keyup(function(){
$(this).triggerHandler("blur");
});
// $(".bitian").blur(function(){}).focus(function(){}).keyup(function(){})
//给表单绑定提交事件
$("form").submit(function(){
//触发必填项的校验逻辑
$(".bitian").trigger("focus");
var length = $(".onError").length
if(length > 0){
return false;
}
return true;
});
});*/
</script>
</head>
<body>
<form action="../index.html">
<div>
用户名:<input type="text" class="bitian" id="username" />
</div>
<div>
密码:<input type="password" class="bitian" id="password" />
</div>
<div>
手机号:<input type="tel" />
</div>
<div>
<input type="submit" />
</div>
</form>
</body>
</html>
使用JQuery发送请求局部刷新页面
数据交换格式:
json
xml
什么是JSON
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于ECMAScript的一个子集。 JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯(包括C、C++、C#、Java、JavaScript、Perl、Python等)。这些特性使JSON成为理想的数据交换语言。 易于人阅读和编写,同时也易于机器解析和生成(一般用于提升网络传输速率)。
JSON格式
JSON对象
{ key1:value} {"username":"zhangsan","password":"123"}
JSON数组
[{ key1:value},{ key1:value},{ key1:value}]
内容总结:
定时器
动画效果: show hide slideDown slideUp fadeIn fadeOut animate
基本选择器:
ID选择器: #ID名称
类选择器: .类名
元素选择器: 元素/标签名称
通配符选择器: * 找出所有页面元素 包含页面上所有的标签
选择器分组 : 选择器1, 选择器2 [选择器1,选择器2]
层级选择器:
后代选择器: 选择器1 选择器2 找出所有的后代,儿子孙子曾孙
子元素选择器: 选择器1 >选择器2 找出所有儿子
相邻兄弟选择器: 选择器1+选择器2 : 找出紧挨着自己那个弟弟
兄弟选择器 : 选择器1~选择器2 : 找出所有的弟弟
属性选择器:
选择器[属性名称]
选择器[属性名称][属性名名]
选择器[属性名称='属性值'][属性名称='属性值'][属性名称='属性值']
表单选择器:
:input 找出所有的输入项 : 不单单找出input textarea select
:text 找出type类型为 text
:password
基本过滤器:
:even
:odd
:gt
:lt
:eq
:first
:last
表单对象属性:
:selected
:checked
$(function) : 文档加载完成的事件
css() : 修改css样式
prop() : 修改属性/ 获取属性
html() : 修改innerHTML
append : 给自己添加子节点
appendTo : 将自己添加到别人家,给自己找一个爹
prepend : 在自己最前面添加子节点
after : 在自己后面添加一个兄弟
empty : 清空所有子节点
$(cities).each(function(i,n){
})
$.each(arr,function(i,n){
});