前言------ 努力奋斗,经过两天的总结,终于写完,加油
jquery的简介
jquery就是一个javascript代码库,或者说是javascript框架,提供一种简单便利的javascript设计模式
宗旨:Write less,Do more
jquery的作用
1、用更少的代码,做更多的事情
2、把网页中的js代码 与 html 分离开
jquery的引入
使用jquery,必须引入jquery.js 文件
<script src="jquery---.js"></script>
jquery语法:
jquery(document).ready(function(){ }); //第一种写法
$(document).ready(function(){ }); //第二种写法
$(function(){ }) //第三种写法,最简单,最推荐
jquery的开发步骤(将js代码与html分离):
1、引入jquery相关文件:jquery-3.3.1.min.js等
2、当文档加载完成触发事件:$(function(){ })
3、在文档加载完成的事件里面:a:进行元素的一系列操作 b:绑定事件
3、在 b 事件发生触发函数
4、在函数中对元素进行一系列的操作
jquery为什么能够使js代码与html代码分离?
因为:<script type="text/javascript">
jquery(document).ready(function(){ }); //第一种写法
$(document).ready(function(){ }); //第二种写法
$(function(){ }) //第三种写法,最简单,最推荐
</script>
表示文档加载完毕触发该事件,相当于javascript中的onload事件,这样的话,就不用再html标签中再写onclick事件了,所以 就使js代码与html代码分离开了。所以要想分离,就必有相当于js的onlode事件,而如果不用jquery的话onclick事件可以根据 需求而定。
而使用js的写法为window.onload=function(){ alert(11); } window.onload=function(){ alert(22); } 运行的时候至上而下, 只显示222,因为window.onload表示window对象的一个onload属性,写两个的话表示属性值改变了。
代码如下:
<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>
jquery的选择器(用于jquery查找元素,与css中的选择器类似)
ID选择器:$("#id名") //相当远js中document.getElementById("id名"); 推荐
类选择器:$(".class名")
属性选择器:$("a[href]") $("a[href='#']") $("a[href$='com'][title]") 选择器[属性='属性值']
通配符选择器:$("*") //匹配所有的元素
选择器,选择器:选择器,选择器 //同时根据两个选择器找出元素中间为逗号(相当于并集)如果没有逗号
例如:$("p.haha") //表示<p></p>标签中含有 类名class="haha" 的
层次选择器:
子元素选择器:选择器1 > 选择器2
后代选择器: 选择器1 选择器2 //注意:选择器1和选择器2中间以空格隔开
兄弟选择器: 选择器1+选择器2 //找出紧挨着的选择器1的兄弟选择器
所有兄弟选择器:选择器1 + 选择器2 //找出所有选择器1的兄弟选择器
<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>
基本过滤器:
选择器1:过滤器 //表示在所有的选择器1中过滤出满足条件(过滤器)的选择器
<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>
表单过滤器:
以 冒号 : 开头 注意与基本过滤器用法的区别 冒号前面没有东西
<script>
//1.文档加载事件
$(function(){
$(":text").css("background-color","pink");
});
</script>
对象属性过滤器:
:selected //下拉列表选中
:checked //复选框选中状态
其他选择器:
$("p.haha") //表示<p></p>标签中含有 类名class="haha" 的
$("ul li:first") //表示无序列表中第一项元素
$("ul li:last") //表示无序列表中最后一项元素
jquery与javascript的对象转换
js对象只能调用js方法和属性
jquery对象只能调用jquery的方法和属性
知识点: 事件:$("#btn2").click():表示给元素绑定事件
$("#btn2").click(function(){ }) :表示给元素绑定事件的同时,添加了触发事件调用的函数
$("div1"):根据id获取的div元素是一个jquery的Object对象,使用get()方法才能得到javascript的元素(div)对象
既$("div1").get();
<script src="./js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
function checkOne() {
var text = document.getElementById("div1");
//text.innerHTML="我用js替换了你";
//js对象转换成jquery对象
$(text).html("我用js对象转换成jquery对象替换了你");
}
$(function () {
//首先给元素绑定事件----1、先找到元素 2、绑定事件 3、并让事件触发函数
$("#btn2").click(function () {
//$("#div1").html("我用jquery替换了你");
//jquery对象转换成js对象
var aa = $("#div1").get(0);
aa.innerHTML="我用jquery对象转换成js对象替换了你";
});
});
</script>
<input type="button" value="js替换内容" onclick="checkOne()">
<input type="button" value="jquery替换内容" id="btn2">
<div id="div1">
哈哈哈,我是你!
</div>
jquery的动画效果
1、show() 显示 hide() 隐藏 Toggle() 显示隐藏来回切换
2、fadeIn() 淡入 fadeOut() 淡出 fadeToggle() 淡入淡出来回切换 fadeTo() 可以规定淡入淡出的透明度
3、slideDown() 向下滑动 slideUp() 向上滑动 slideToggle() 向上滑动向下滑动来回切换
4、animate() 自定义动画 $("#imga").animate({width:'300px', opacity:0.5},5000);
参数:slow:慢 fast:快 毫秒值
使用jquery完成定时广告弹出
需求分析:通js完成一样
项目步骤:
1、引入jquery相关的文件
2、jquery文档加载完成事件
3、启动定时器
4、编写显示广告的函数
5、在显示广告的函数中再写一个定时器
6、编写隐藏广告的函数
代码实现:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定时广告弹出</title>
<script src="./js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function () {
setTimeout("startDime()",5000);
});
function startDime() {
$("#imga").slideDown("slow");
setTimeout("stopDime()",3000);
}
function stopDime() {
$("#imga").slideUp("slow");
}
</script>
</head>
<body>
<img src="./img/美女.jpg" id="imga" width="700px" style="display: none">
</body>
</html>
使用jquery完成表单的隔行换色
注意:<table>标签不能使用子元素选择器找到<tr>标签
<script type="text/javascript">
$(function () {
$("#tab tr:even").css("background-color","#CCCCCC");
$("#tab tr:odd").css("background-color" , "chartreuse");
// $("#tab tr").css("background-color" , "blue");
})
</script>
使用jquery完成复选框全选全不选案例
需求分析:
商品分类界面中,当我们点击全选框的时候,我们希望选中所有的商品,当我们取消掉的时候,我们希望不选中所 有的商品
jquery代码步骤:
1,引入jquery相关文件
2、当文档加载完毕发生事件$(function(){ })
3、给元素绑定事件 $("#checks").click(function(){ this.checked }); ,并定义事件发生触发的函数
5、在函数中对元素进行处理
获得选中的状态:1.this.checked 这是相当于用js方法,对象.属性 this表示当前函数拥有者
2、$("#checks").prop("checked"); 使用的jquery的prop()
3、找出其他复选框,使用jquery选择器$("input[type='checked']:gt(0)")
注意:prop() 和 attr()方法的区别:prop()返回true和false ,并随着checked选中的状态改变而改变
attr()返回的是checked属性的值,与状态无关,前提必须在元素中写上了 checked的属性才可以
代码实现:
<script type="text/javascript">
$(function () {
//给元素绑定事件
$("#checks").click(
function () {
//获得选中元素的状态 this表示当前函数的所拥有者
//alert(this.checked); 第一种方法
var status = $("#checks").prop("checked"); //第二种方法,用attr()时,返回undefind,因为元素没有写checked属性
//$("input[type='checkbox']:gt(0)").prop("checked",this.checked);
//$("input[type='checkbox']:gt(0)").attr("checked",this.checked);
$("table input:gt(0)").prop("checked",status);
}
);
});
</script>
使用jquery完成省市联动案例
代码步骤:
1、导入jquery相关文件
2、进行文档jia加载完成发生的事件
3、给元素绑定事件,并触发相应的函数
4、在函数中进行对元素的操作
获得选中的元素得到省份,根据省份的到相对应的城市
遍历得到的城市,并把城市添加到显得select中
删除元素:$("select2").empty();
jquery遍历:each(function(idex,遍历对象的每一项的值){
$("#select2").append($("<option>"+n+"</option>"))
})
遍历原理:
<script type="text/javascript">
var city = ["北京","上海","杭州"];
//转换成jquery才能使用empry()
$(city).ampty();
//自己写遍历
function bianli(city,callback){
for(var i = 0; i<city.length; i++){
alert(city[i]);
var att = city[i];
callback(i,att);
}
}
function callback(i,n){
console.log("123===="+i+n);
}
//调用
bianli(city,callback)
</script>
代码实现:
<script type="text/javascript">
var citys = [["济南","济宁","泰安","日照"],["杭州","丽水","青田","宁波"],["北京","上海","郑州"]];
$(function () {
//给元素绑定事件
$("#selects").change(function () {
var cityss = citys[this.value];
var aa = $("#selects2");
aa.empty();
/* for (var i = 0; i<cityss.length; i++){
var city = cityss[i];
aa.append("<option>"+city+"</option>");
}*/
$(cityss).each(function (i,n) {
aa.append("<option>"+n+"</option");
})
});
});
</script>
使用jquery完成商品的左右选择
需求分析:
在我们的分类管理中, 我们能够分类管理我们的信息,当点击修改时,进入一个可以编辑的页面,进行我们商品的 分类的修改。
代码步骤:
1. 导入JQ的文件
2. 文档加载函数 :页面初始化
3.确定事件 : 点击事件 onclick
4. 事件触发函数
5 移动被选中的那一项到右边
代码实现:
<script type="text/javascript">
$(function () {
$("#a1").click(function () {
var a = $("#leftSelect:selected");
$("#rightSelect").append(a);
});
$("#b1").click(function () {
var b = $("#leftSelect option");
$("#rightSelect").append(b);
});
});
</script>
使用jquery完成表单校验
项目需求:
注册页面的用户名密码等,当输入的格式不规范时,进行一个校验。
注册页面:一般我们都是 浏览器 发出请求到服务器,然后服务器进行用户名密码的校验,但是如果每个用户都直 接请求到服务器去处理的话,用户百万级,显然服务器的压力会非常大,为解决这样的现象,在客户单 进行一个校验,然后可以的话再在服务器端进行一次校验(共两次)
技术分析:
1 加载jquery相关的包
2.文档加载完毕事件:动态的添加小红点
3 给元素绑定事件:blur, click, keyup
4事件发生时触发函数,并在函数中添加元素
$.trigger("事件名blur等"): 触发blur事件,并默认执行blur事件(类似于浏览器将鼠标移动到文本域触发的事件一样), 当jquery对象是数组时候,会每个对象都触发一遍blur事件
triggerHandle("事件名"): 仅仅只会触发事件。当jquery是数组的时候,只会第一个对象触发一遍事件。
$.is("选择器"): jquery遍历中,表示jquery对象$是否是选择器找到的对象,是返回true
链接式写法:$(".bixuan").blur(function () { }).focus(function () { }).keyup(function () { });
只有返回是jquery的时候才能这样写。
$.remove() :删除调用该方法的对象元素
$.empty(): 删除该对象元素的子元素
$.find("选择器"): jquery遍历,向下寻找,寻找对象后代中选择器选中的对象
$.parent(): 寻找该对象的第一个父类元素
$.parents(): 寻找所有的父类,知道html根
代码实现:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery表单校验</title>
<script src="./js/jquery-3.3.1.min.js"></script>
<style type="text/css" rel="stylesheet">
#ss{
color: red;
}
.onTrue{
background:#E9FBEB url(./img/reg4.gif) no-repeat 0 center;
padding-left:25px;
}
.onFalse{
background:#FFE0E9 url(./img/reg3.gif) no-repeat 0 center;
padding-left:25px;
}
</style>
<script type="text/javascript">
/*
* 运用trigger("事件")函数:调用某个事件,调用同时执行事件的默认行为,返回事件处理函数的jquery对象
* triggleHandler("事件") :调用某个事件,但不会执行事件的默认行为,只影响第一个元素,返回事件处理函数的返回值
* */
$(function () {
//动态添加小红点
$(".bixuan").after("<font size='2' color='red'>*</font>");
//给元素绑定事件
$(".bixuan").blur(function () {
//获取文本内容
var value = this.value;
//删除多余的font标签
$(this).parent().find(".ff").remove();
//判断是哪个jquery对象
if($(this).is("#username")){
if (value.length<6){//进行用户名校验
$(this).parent().append("<font color='red'class='ff onFalse' >用户名不行</font>");
}else {
$(this).parent().append("<font color='red'class='ff onTrue'>用户名够用</font>");
}
}
//进行密码校验
if($(this).is("#password")){
if (value.length < 3){ //进行密码校验
$(this).parent().append("<font color='red'class='ff onFalse'>密码长度不够</font>");
} else {
$(this).parent().append("<font color='red'class='ff onTrue'>密码够用</font>");
}
}
}).focus(function () {
$(this).triggerHandler("blur");
}).keyup(function () {
$(this).triggerHandler("blur");
});
//只有返回的是jquery才可以调用
//$(".bixuan").blur(function () { }).focus(function () { }).keyup(function () { });
$("#tijiao").click(function () {
//必选框进行校验
$(".bixuan").trigger("blur");
//判断如果输入错误时,不让他提交 这个this代表的form表单
if($(".onFalse").is(".onFalse")){
return false;
}
return true;
});
});
</script>
</head>
<body>
<form action="index.html">
<div>用户名:<input type="text" class="bixuan" id="username"></div>
<div>密码:<input type="password" class="bixuan" id="password"></div>
<div>手机号:<input type="tel"></div>
<div><input type="submit" id="tijiao"></div>
</form>
</body>
</html>