吴鹏
总结
----------------------------------------------------------------
JQuery是一个经过封装后的轻量级的js类库,提供很多功能,理念是"write less,do more",
有配套的api,每次版本更新后都会有功能的增删,所以对应版本的jq库要查对应版本的api;
使用方式:$("选择器")或者jQuery("选择器"),在使用之前要在<head></head>里引入jq库,
方式是<script src="jq库的地址"></script>;
注意:通过js调用的对象和通过jq调用的对象的属性和方法不能互相使用,但是两者可以转换,
方式是:
js对象转换成jq对象为,$(js对象),$符号为jQuery的简单表示方式,所以可以看成是jQuery(js对象);
jq对象转换成js对象为,jq对象[index],或者jq对象.get(index);
------------------------------------------------------------
要使用jq的函数必须等页面的内容加载完,所以在<head></head>里面必须先有个声明
$(document).ready(function(){
要执行的函数;
});
可简化为:
$(function(){
要执行的函数;
});
-----------------------------------------------------------
jq的一些方法:
jq对象.show():显示一个jq对象;
括号里面可传入毫秒值或"slow","normal","fast"(实现速度从慢到快);或者是show(毫秒值,function(){});
jq对象.hide():隐藏一个jq对象;
jq对象.fadeIn():淡入一个jq对象(由浅到深显示);
jq对象.fadeOut():淡出一个jq对象(由深到浅消失);
jq对象.slideDown():jq对象向下滑动;
jq对象.slideUp():jq对象向上滑动;
例子:
<head>
<script src="jq库所在地址"></script>
//引入jq库;
$(function() {
$("p").click(function(){
//当点击jq对象p时,执行函数function();
$("p").show(1000);
//function()函数执行的内容是将p元素的内容显示出来,此方法使用的选择器是元素选择器;
});
});
//声明待页面加载完成后再调用function()函数;
</head>
<body>
<p style="display:none;">点击此文字后隐藏</p>
//将p的样式定义为隐藏;
</body>
1.9版本以后删除的方法jq对象.toggle(fn1,fn2,...);执行toggle()函数时,第一次执行fn1,第二次执行fn2,...
-------------------------------------------------------------------------------
jQ的选择器:
一 基本选择器:元素选择器,类选择器,id选择器,通配符选择器,并列选择器;
1 元素选择器调用方式:$("元素名称"),调用与括号里面元素名称相同的元素;
2 类选择器调用方式:$(".类名"),调用与括号里面类名相同的元素;
3 id选择器调用方式:$("#id值"),调用与括号里面id值相同的元素;
4 通配符选择器调用方式:$("*"),此调用方式甚至会包括<body>标签;
5 并列选择器调用方式:$("选择器1","选择器2","选择器3"),形如:$("#abc",".aaa","div"),
可以将id值为abc,类名为aaa,元素名为div的元素并列调用;
二 层级选择器:a b,a>b,a+b,a~b;
1 a b(后代选择器),会将所有在a标签里的次级b标签和次次级b标签选择(假如有的话),包括同级的其它a标签下的次级b标签和次次级b标签(假如有的话);
2 a>b(子类选择器),会将a标签里的次级标签下为b的标签选择,此选择器不会将次次级选择器选中,因此称为子类选择器;
3 a+b(兄弟选择器),会将紧接着a元素后面的b元素选择,不包含子孙元素;
4 a~b(兄弟会选择器),会将a后面的所有b元素选择,ab元素为同级元素,不包含子孙元素;
三 属性选择器:$("属性"),$("[属性='属性值']");
1 $("属性") :选择含有指定属性的元素,例如$("name")会将页面body中含有name属性的元素选择;
2 $("[属性='属性值']") :选择含有指定属性和属性值的元素,例如$("[name='abc']")只会将元素中含有name属性且属性值为abc的元素选择;
四 过滤选择器: :first,:last,:even,:odd,:gt(index),lt(index);
1 :first ,会将body中索引值为0的元素选择出来,比如页面中有5个同级且父级为body的<div>,调用$(div:first)时,会将第一个div选择,特别的是,如果
在括号里面填写如$(div div:first),则会将div子级中的第一个div选择;
2 :last ,将索引值为最后的元素选择,例子见上面;
3 :even ,将索引值为偶数的元素选择;
4 :odd ,将索引值为奇数的元素选择;
5 :gt(index) ,将索引值大于index的元素选择;
6 :lt(index) ,将索引值小于index的元素选择;
特别注意:上面所说的索引值为同级(树状)的相同元素的从上到下,数值从0开始排序,使用even和odd时,要特别注意索引值和我们实际想要操作的元素的序号;
-------------------------------------------------------------------
在jq对象中使用css:
一 设置css样式
jq对象.css("属性","属性值");
jq对象.css({"属性":"属性值","属性1":"属性值1"});
二 添加css样式,需先引入对应的css
jq对象.addClass("引入的css名");
三删除css样式
jq对象.removeClass("对应的css名");
-------------------------------------------------------------------
jq对属性和DOM操作的方法(下面直接列出):
jq对象.attr("属性名","值")
jq对象.attr({"属性":"值","属性1":"值"});
jq对象.attr("属性名")
jq对象.removeAttr("属性名");
prop:
a.append(c)
appendTo(c)
a.empty()
a.after(c)
a.before(c)
a.insertAfter(c)
a.insertBefore(c)
a.remove()
$(数值).each(function(i,n) {})
$.each(数组,function(i,n) {})
--------------------------------------------------------------------
一 确定触发事件
二 确定触发事件时要执行的函数
三 获取执行函数时要进行操作的对象
四 对对象进行各种操作
--------------------------------------------------------------------
jq实现广告的显示与隐藏
分析:当页面加载后,开始计时,经过一段时间后,图片显示,再经过一段时间后,图片隐藏;
计时使用的方法为js库的setTimeOut(),显示和隐藏使用的是jq库的show()和hide();
实现代码(引入jq库等操作会忽略掉,只写方法体):
$(document).ready.(function() {
//声明当页面加载完成后再执行jq对象的函数;
setTimeout("showAd()",3000);
setTimeout()方法,作用是在3秒后执行一次showAd()方法;
});
function showAd() {
$("#adDiv").fadeIn(2000);
setTimeout("hideAd()",5000);
}
//此方法为id值为adDiv的元素在2秒内淡入,且在5秒后执行hideAd()方法;
function hideAd() {
$("#adDiv").fadeOut(2000);
}
//此方法为同个元素在2秒内淡出页面;
<body>
<div id="adDiv" style="width:100%;display:none;">
<img src="广告图片地址" />
<div>
</body>
此代码实现了当页面加载后经过3秒的事件,图片在2秒的时间里淡入页面最顶端;
当经过5秒后,图片在2秒内淡出页面;
--------------------------------------------------------------------
jq实现表格的隔行换色
分析:在js中,我们是通过遍历tab集合的行集合,判断索引值是否能被2整除,区分出奇数和偶数行,
分别设置颜色;在jq中,可以直接通过选择器的组合来过滤出表格体的奇数和偶数行,然后设置颜色;
代码实现:
首先,给定条件,要进行颜色隔行换色的表格体是标签<tbody></tbody>的子级,行的标签是<tr></tr>,
jq库已经引入,
$(function() {
$("tbody tr:odd").css("background","blue");
//选择器为后代选择器和过滤选择器的组合,过滤出所有索引值为偶数的行,用css样式设置背景颜色为蓝色;
$("tbody tr:even").css("background","red");
//同理,选出索引值为奇数的所有的行,设置成红色;
});
注意:索引值和实际表现的行序号有时并不一致,因本题是在tbody下进行过滤,因此索引值的奇偶性和行的奇偶性就一直;
--------------------------------------------------------------------
jq实现复选框的全选和全不选
分析:使用jq库中表单里的:checkbox过滤出除标题复选框之外的所有的复选框()可以通过增加属性选择器如name来排除标题),
然后将此所有的复选框设置成跟标题的复选框一样的值;本题中,根据所用的jq库的版本不同,需要分别用attr或prop来进行属性的设置;
代码实现:
假设,所有的复选框都有input="checkbox"属性,标题复选框的id值为"selectAll",其余复选框的name值为"ids",
$(function() {
$("#selectAll").click.(function() {
//id值为selectAll的元素在点击之后执行下面的方法;
$(":checkbox[name='ids']").prop("checked",this.checked);
//过滤出所有属性值有checkbox的元素,在这些元素中找出有name属性且值为ids的元素,
//将其checked值设置成与id为selectAll的元素相同的值;
});
});
以上代码实现了,当点击标题复选框时,将标题复选框的值赋值给其余之外的复选框,实现复选框的全选全不选;
本题中如果jq版本使用1.6以上的,需用prop进行属性值的设置,否则可以使用attr进行属性值的设置;
--------------------------------------------------------------------
jq实现省市联动
分析:<select>创建省的元素后,对每个省分别设置不同的value值,从0开始,这样可以与后面的数组的索引值结合使用;
创建一个二维数组,高维的每个元素的索引值就和每个省份的value值对应,因此,可以在每个元素(每个元素都是一个一维数组)
里面存放对应省份(根据value值)的城市;然后使用jq库中的change方法,在下拉菜单中单击任意一个省份后都会执行一个函数,
这个函数可以使用jq库中针对数组的一个方法即$.each(数组,function(i,n){ }),对于传入的数组,定义一个函数进行操作,其中
i为数组中的每一个元素索引,n为该索引的具体的内容;
代码实现:
$(function(){
var cities = [
["杭州市","绍兴市","温州市","义乌市","嘉兴市"],
["南京市","苏州市","扬州市","无锡市"],
["武汉市","襄阳市","荆州市","宜昌市","恩施"],
["石家庄市","唐山市","保定市","邢台市","廊坊市"],
["长春市","吉林市","四平市","延边市"]
];
//创建二维数组,定义每个省份具体的城市值,根据省份的value值确定省份的索引值;
var $city = $("#city");
//将jq对象赋值给变量city,在下面中将jq对象转换成js对象,调用js的方法,对city进行初始化;
$("#province").change(function(){
//change方法,当下拉内容改变时,调用下面的函数;
$city.get(0).options.length = 1;
//将city的值清空;
var val = this.value;
//获得省份的value值,赋值给val变量;
$.each(cities,function(i,n){
//调用each方法,传入二维数组,
if(i == val){
//判断索引值与省份的值是否相等,目的是将省份与二维数组对应起来;
$(n).each(function(j,m){
//当上面相等时,既可以遍历相应的存放城市的元素数组;
$city.append("<option>"+m+"</option>");
使用jq库的append方法,将具体的城市的值写入city中;
});
}
});
});
});
|
收藏
淘帖
踩
来自 3#
