晨读单词:
toggle:切换
each:每个(遍历)
append:追加(内部追加,将B追加到A的内部结尾处)
appendTo:追加(内部追加,将A追加到B的内部结尾处)
prepend:追加(内部追加,将B追加到A的内部开始处)
prependTo:追加(内部追加,将A追加到B的内部开始处)
find:查找
after(content | fn) 后来,以后(外部追加,在content后面追加)
before(content | fn) 以前,在前(外部追加,在content前面追加)
insertAfter(content) 插入(外部追加,在content后面插入)
insertBefore(content) 插入(外部追加,在content前面插入)
empty:空的(清空当前节点之后的所有节点内容)
remove:移除
detach:分离
validate:校验
rule:规则
required:必须
digits:数字(证书)
minlength:最小长度
equal 相等
一、使用JQ完成首页的定时广告弹出
1.需求分析
在首页中(logo的上方)显示一个广告图片(页面加载后,间隔3秒弹出广告图片,再间隔3秒后隐藏广告图片)。【使用jQuery实现】
2.技术分析
2.1 jquery相关的知识
Ø 什么是jquery
Jquery它是javascript的一个轻量级框架,对javascript进行封装,它提供了很多方便的选择器。供你快速定位到需要操作的元素上面去。还提供了很多便捷的方法。
Ø 怎么使用jquery
Jquery它是一个库(框架),要想使用它,必须先引入!
jquery-1.8.3.js:一般用于学习阶段。
jquery-1.8.3.min.js:用于项目使用阶段
Ø Jquery的简单入门
所有的jquery代码写在页面加载函数
$(function(){
Jquery代码
});
jquery入门//整个文档加载完毕后执行
/*function init(){
alert("张三");
}*/
/*window.οnlοad= function(){
alert("张三");
}
//整个文档加载完毕后(包括图片)执行
window.οnlοad= function(){
alert("老王");
//dom树绘制完毕后执行,可能DOM元素关联的东西并没有加载完
jQuery(document).ready(function(){
alert("李四");
//jquery的简写方法(页面加载)
$(function(){
alert("王五");
});
*/
function init(){
document.getElementById("a1").οnclick= function(){
location.href="";
}
}
$(function(){
document.getElementById("a1").οnclick= function(){
location.href="";
}
});
$(function(){
document.getElementById("a2").οnclick= function(){
location.href="";
}
});
[ThinkPad1]传统的JavaScript页面加载函数是最后一个生效,它会覆盖之前的。它的加载顺序比jQuery的要慢。【它是整个文档加载完毕后才会执行】
[ThinkPad2]jQuery的页面加载函数可以存在多个(不会发生覆盖),它会按照顺序进行执行。(dom数加载完成)
Ø 获取元素
JS:document.getElementById();
JQ:$(“#id”);
Ø Jquery对象与DOM对象转换
function JSWrite(){
//document.getElementById("span1").innerHTML="美美哒!";
var spanEle = document.getElementById("span1");
$(spanEle).html("美美哒!");
}
$(function(){
/*document.getElementById("btn1").onclick = function(){
document.getElementById("span1").innerHTML="帅帅哒!";
}*/
$("#btn1").click(function(){
//JQ对象转换成DOM对象的第一种方式
//$("#span1")[0].innerHTML="呵呵哒!";
//JQ对象转换成DOM对象的第二种方式
$("#span1").get(0).innerHTML="呵呵哒!";
});
});
sssss
注意:JQ对象只能操作JQ里面的属性和方法
JS对象只能操作JS里面的属性和方法。
Ø Jquery的效果
3.实现步骤
第一步:引入jQuery相关的文件
第二步:书写页面加载函数
第三步:在页面加载函数中,获取显示广告图片的元素。
第四步:设置定时操作(显示广告图片的函数)
第五步:在显示广告图片的函数中,使用jQuery的方法让广告图片显示(show())
第六步:清除显示广告图片的定时操作
第七步:设置定时操作(隐藏广告图片的函数)
第八步:在隐藏广告图片的函数中,使用jQuery的方法让广告图片隐藏(hide())
第九步:清除隐藏广告图片的定时操作
4.代码实现
var time;
$(function(){
time=setInterval("showAd()",3000);
});
function showAd(){
//$("#img1").show();
//$("#img1").slideDown(3000);
$("#img1").fadeIn(3000);
clearInterval(time);
time = setInterval("hideAd()",5000);
}
function hideAd(){
//$("#img1").hide();
//$("#img1").slideUp(3000);
$("#img1").slideUp(3000);
clearInterval(time);
}
5.补充内容
Toggle的使用
$(function(){
$("#btn1").click(function(){
$("#img1").toggle();
});
});
6.总结
6.1 jquery的选择器
Ø 基本选择器
id选择器:$(“#id名称”);
元素选择器:$(“元素名称”);
类选择器:$(“.类名”);
通配符:*
多个选择器共用(并集)
案例代码:
基本选择器$(function(){
$("#btn1").click(function(){
$("#one").css("background-color","pink");
});
$("#btn2").click(function(){
$(".mini").css("background-color","pink");
});
$("#btn3").click(function(){
$("div").css("background-color","pink");
});
$("#btn4").click(function(){
$("*").css("background-color","pink");
});
$("#btn5").click(function(){
$("#two .mini").css("background-color","pink");
});
});
111
222
333
444
555
666
Ø 层级选择器
ancestor descendant: 在给定的祖先元素下匹配所有的后代元素(儿子、孙子、重孙子)
parent > child : 在给定的父元素下匹配所有的子元素(儿子)
prev + next: 匹配所有紧接在 prev 元素后的 next 元素(紧挨着的,同桌)
prev ~ siblings: 匹配 prev 元素之后的所有 siblings 元素(兄弟)
代码演示:
层级选择器$(function(){
$("#btn1").click(function(){
$("body div").css("background-color","pink");
});
$("#btn2").click(function(){
$("body>div").css("background-color","pink");
});
$("#btn3").click(function(){
$("#two+div").css("background-color","pink");
});
$("#btn4").click(function(){
$("#one~div").css("background-color","pink");
});
});
111
222
333
444
555
666
Ø 基本过滤选择器
$('li').first()等价于:$(“li:first”)
代码案例演示:
基本过滤选择器$(function(){
$("#btn1").click(function(){
$("div:first").css("background-color","pink");
});
$("#btn2").click(function(){
$("div:last").css("background-color","pink");
});
$("#btn3").click(function(){
$("div:odd").css("background-color","pink");
});
$("#btn4").click(function(){
$("div:even").css("background-color","pink");
});
});
111
222
333
444
555
666
Ø 属性选择器
层级选择器$(function(){
$("#btn1").click(function(){
$("div[id]").css("background-color","pink");
});
$("#btn2").click(function(){
$("div[id='two']").css("background-color","pink");
});
});
111
222
333
444
555
666
Ø 表单选择器
表单选择器$(function(){
$("#btn1").click(function(){
$(":input").css("background-color","pink");
});
$("#btn2").click(function(){
$(":text").css("background-color","pink");
});
});
二、使用JQ完成表格的隔行换色
1.需求分析
在页面加载的时候让显示用户的表格进行隔行换色显示,效果如下:使用JQ实现!
2.技术分析
需要使用jquery的选择器(基本选择器、基本过滤选择器)
还需要使用jquery的CSS的方法(css(name,value))
如果CSS样式已经由美工写好,此时可以使用jquery的CSS类操作
3.步骤分析
第一步:引入jquery的类库
第二步:直接写页面加载函数
第三步:直接使用jquery的选择器(组合选择)拿到需要操作的元素(奇数行和偶数行)
第四步:分别使用CSS的方法(css(name,value))对奇数行和偶数行设置背景颜色。
4.代码实现
$(function(){
$("tbody tr:even").addClass("even");
$("tbody tr:odd").addClass("odd");
});
三、使用JQ完成全选和全不选
1.需求分析
在系统后台进行人员管理时,进行批量删除,使用jq完成全选和全不选
2.技术分析
需要使用jquery的选择器(id选择器、类选择器)
需要使用jquery的属性操作方法 prop()
3.步骤分析
第一步:引入jquery文件
第二步:书写页面加载函数
第三步:为上面的复选框绑定单击事件
第四步:将下面所有的复选框的选中状态设置成跟上面的一致!
4.代码实现
$(function(){
//找到下面所有的复选框并设置属性checked()
/*if($("#select")[0].checked==true){
$(".selectOne").attr("checked",true)
}*/
$("#select").click(function(){
$(".selectOne").attr("checked",this.checked);
});
});
注意:attr在jquery1.11版本不适用,采用prop()来替代(在各个版本都适用)。
在jquery中如何调用方法?
[ThinkPad1]使用jquery选择器获取到需要操作元素