jQuery基础入门篇

一、使用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代码

});

<html>

<head>

<title>jquery入门</title>

//整个文档加载完毕后执行

/*function init(){

alert("张三");

}*/

/*window.οnlοad= function(){

alert("张三");

}

//整个文档加载完毕后(包括图片)执行

window.οnlοad= function(){

alert("老王");

}

//dom树绘制完毕后执行,可能DOM元素关联的东西并没有加载完

jQuery(document).ready(function(){

alert("李四");

});

//jquery的简写方法(页面加载)

$(function(){

alert("王五");

});

传统的JavaScript页面加载函数是最后一个生效，它会覆盖之前的。它的加载顺序比jQuery的要慢。【它是整个文档加载完毕后才会执行】

jQuery的页面加载函数可以存在多个(不会发生覆盖)，它会按照顺序进行执行。(dom数加载完成)

function init(){

document.getElementById("a1").onclick= function(){

location.href="";

}

$(function(){

document.getElementById("a1").onclick= function(){

location.href="";

}

});

$(function(){

document.getElementById("a2").onclick= function(){

location.href="";

}

});

</script>

</head>

</body>

</html>

获取元素

JS:document.getElementById();

JQ:$(“#id”);

Jquery对象与DOM对象转换

<html>

<head>

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="呵呵哒！";

});

</script>

</head>

<body>

<span id="span1">sssss</span>

</body>

</html>

注意：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);

}

</script>

5.补充内容

Toggle的使用

<html>

<head>

$(function(){

$("#btn1").click(function(){

$("#img1").toggle();

});

</script>

</head>

<body>

</body>

</html>

6.总结

6.1 jquery的选择器

基本选择器

id选择器：$(“#id名称”);

元素选择器：$(“元素名称”);

类选择器：$(“.类名”);

通配符：*

多个选择器共用(并集)

案例代码：

<html>

<head>

<title>基本选择器</title>

$(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");

});

</script>

</head>

<body>

<hr/>

111

</div>

222

</div>

333

</div>

444

</div>

555

</div>

666

</div>

</span>

</body>

</html>

层级选择器

ancestor descendant: 在给定的祖先元素下匹配所有的后代元素(儿子、孙子、重孙子)

parent > child : 在给定的父元素下匹配所有的子元素(儿子)

prev + next: 匹配所有紧接在 prev 元素后的 next 元素(紧挨着的，同桌)

prev ~ siblings: 匹配 prev 元素之后的所有 siblings 元素(兄弟)

代码演示：

<html>

<head>

<title>层级选择器</title>

$(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");

});

</script>

</head>

<body>

<hr/>

111

</div>

222

</div>

333

</div>

444

</div>

555

</div>

666

</div>

</span>

</body>

</html>

基本过滤选择器

$('li').first() 等价于：$(“li:first”)

代码案例演示：

<html>

<head>

<title>基本过滤选择器</title>

$(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");

});

</script>

</head>

<body>

<hr/>

111

</div>

222

</div>

333

</div>

444

</div>

555

</div>

666

</div>

</span>

</body>

</html>

属性选择器

<html>

<head>

<title>层级选择器</title>

$(function(){

$("#btn1").click(function(){

$("div[id]").css("background-color","pink");

});

$("#btn2").click(function(){

$("div[id='two']").css("background-color","pink");

});

</script>

</head>

<body>

<hr/>

111

</div>

222

</div>

333

</div>

444

</div>

555

</div>

666

</div>

</span>

</body>

</html>

表单选择器

<html>

<head>

<title>表单选择器</title>

$(function(){

$("#btn1").click(function(){

$(":input").css("background-color","pink");

});

$("#btn2").click(function(){

$(":text").css("background-color","pink");

});

</script>

</head>

<body>

<br/>

<form>

</form>

</body>

</html>

二、使用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");

});

</script>

三、使用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);

});

</script>

注意：attr在jquery1.11版本不适用，采用prop()来替代(在各个版本都适用)。

在jquery中如何调用方法？

元素.方法（）

使用jquery选择器获取到需要操作元素

四、使用JQ完成省市二级联动

1.需求分析

使用jquery完成省市二级联动

2.技术分析

2.1数组的遍历操作

方式一：

$(function(){

// 全选/ 全不选

$("#checkallbox").click(function(){

var isChecked = this.checked;

//使用对象访问的方式进行遍历，语法：$().each(function(){})

//被遍历的对象(是一个集合)

$("input[name='hobby']").each(function(){

this.checked = isChecked;

});

方式二：

$.each( [0,1,2], function(i, n){

alert( "Item #" + i + ": " + n );

});

2.2 文档处理操作

追加内容

apend: A.append(B) 将B追加到A的内容的末尾处

appendTo: A.appendTo(B) 将A加到B内容的末尾处

3.步骤分析

第一步：确定事件(change事件),在绑定的函数里面获取用户选择的省份

第二步：创建二维数组来存储省份和城市

第三步：遍历二维数组中的省份(与用户选择的省份进行比较)【使用JQ的遍历操作】

第四步：接着遍历数组中的城市

第五步：创建一个城市文本节点

第六步：创建option元素节点

第七步：将文本节点添加到元素节点中【使用JQ的文档操作方法】

第八步：获取第二个下拉列表并将option元素节点添加进去

第九步：清除第二个下拉列表的option内容

4.代码实现

$(function(){

//2.创建二维数组用于存储省份和城市

var cities = new Array(3);

cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市");

cities[1] = new Array("长沙市","郴州市","株洲市","岳阳市");

cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市");

cities[3] = new Array("郑州市","洛阳市","开封市","安阳市");

$("#province").change(function(){

//10.清除第二个下拉列表的内容

$("#city").empty();

//1.获取用户选择的省份

var val = this.value;

//alert(val);

//3.遍历二维数组中的省份

$.each(cities,function(i,n){

//alert(i+":"+n);

//4.判断用户选择的省份和遍历的省份

if(val==i){

//5.遍历该省份下的所有城市

$.each(cities[i], function(j,m) {

//alert(m);

//6.创建城市文本节点

var textNode = document.createTextNode(m);

//7.创建option元素节点

var opEle = document.createElement("option");

//8.将城市文本节点添加到option元素节点中去

$(opEle).append(textNode);

//9.将option元素节点追加到第二个下拉列表中去

$(opEle).appendTo($("#city"));

});

}

});

</script>

五、使用JQ完成下拉列表左右选择

1.需求分析

见图片文字部分内容。

2.分析

第一步：确定事件(鼠标单击事件click)

第二步：获取左侧下拉列表被选中的option($(“#left option:selected”)) [假设左侧select定义了一个id=left]

第三步：将获取到的option添加到右侧的下拉列表中去。(append方法的使用)

3.代码实现

$(function(){

/*1.选中单击去右边*/

$("#selectOneToRight").click(function(){

$("#left option:selected").appendTo($("#right"));

});

/*2.单击全部去右边*/

$("#selectAllToRight").click(function(){

$("#left option").appendTo($("#right"));

});

/*3.选中双击去右边*/

$("#left option").dblclick(function(){

$("#left option:selected").appendTo($("#right"));

});

</script>

六、使用JQ完成表单校验

1.需求分析

2.技术分析

这里使用validation插件完成对表单数据的校验3

validation插件的使用：

一款优秀的表单验证插件——validation插件

特点：

内置验证规则：拥有必填、数字、email、url和信用卡号码等19类内置验证规则
自定义验证规则：可以很方便的自定义验证规则
简单强大的验证信息提示：默认了验证信息提示，并提供自定义覆盖默认提示信息的功能
实时验证：可以通过keyup或bulr事件触发验证，而不仅仅在表单提交的时候验证。

下载：

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

快速入门：

第一步：引入jquery库和validation插件

案例：

$(function(){

$("#registForm").validate({

rules:{

user:{

required:true,

minlength:2

password:{

required:true,

digits:true,

minlength:6

repassword:{

required:true,

digits:true,

minlength:6,

equalTo:"[name='password']"

email:{

required:true,

email:true

username:{

required:true,

minlength:2

sex:{

required:true

}

messages:{

user:{

required:"用户名不能为空!",

minlength:"用户名不得少于2个字符!"

password:{

required:"密码不能为空!",

digits:"密码必须是数字!",

minlength:"密码长度不得低于6位!"

repassword:{

required:"确认密码不能为空!",

digits:"密码必须是数字!",

minlength:"密码长度不得低于6位!",

equalTo:"两次密码不一致!"

email:{

required:"邮箱不能为空!",

email:"邮箱格式不正确!"

username:{

required:"姓名不能为空!",

minlength:"姓名不得少于2个字符!"

sex:{

required:"性别必须勾选!"

}

errorElement: "label", //用来创建错误提示信息标签

success: function(label) { //验证成功后的执行的回调函数

//label指向上面那个错误提示信息标签label

label.text(" ") //清空错误提示消息

.addClass("success"); //加上自定义的success类

}

});

})

</script>

全国市列表数据保存，说不定以后会用到：

北京京北京

东城区西城区崇文区宣武区朝阳区丰台区石景山区海淀区门头沟区

房山区通州区顺义区昌平区大兴区怀柔区平谷区密云县延庆县

上海沪上海

黄浦区卢湾区徐汇区长宁区静安区普陀区闸北区

虹口区杨浦区闵行区宝山区嘉定区浦东新区金山区

松江区青浦区南汇区奉贤区崇明县

天津津天津

和平区河东区河西区南开区河北区红桥区塘沽区汉沽区大港区东丽区西青区津南区北辰区武清区宝坻区宁河县静海县蓟县

重庆渝重庆

万州区涪陵区渝中区大渡口区江北区沙坪坝区九龙坡区南岸区北碚区万盛区双桥区渝北区巴南区黔江区长寿区江津区合川区永川区南川区綦江县潼南县铜梁县大足县荣昌县璧山县梁平县城口县丰都县垫江县武隆县忠县开县云阳县奉节县巫山县巫溪县石柱土家族自治县

秀山土家族苗族自治县酉阳土家族苗族自治县彭水苗族土家族自治县

黑龙江黑哈尔滨

哈尔滨市齐齐哈尔市鸡西市鹤岗市双鸭山市大庆市伊春市

佳木斯市七台河市牡丹江市黑河市绥化市大兴安岭地区

吉林吉长春

长春市吉林市四平市辽源市通化市白山市

松原市白城市延边朝鲜族自治州

辽宁辽沈阳

沈阳市大连市鞍山市抚顺市本溪市丹东市锦州市营口市阜新市辽阳市盘锦市铁岭市朝阳市葫芦岛市

山东鲁济南

济南市青岛市淄博市枣庄市东营市烟台市潍坊市济宁市泰安市威海市

日照市莱芜市临沂市德州市聊城市滨州市菏泽市

山西晋太原

太原市大同市阳泉市长治市晋城市朔州市

晋中市运城市忻州市临汾市吕梁市

陕西陕或秦西安

西安市铜川市宝鸡市咸阳市渭南市延安市

汉中市榆林市安康市商洛市

河北冀石家庄

石家庄市唐山市秦皇岛市邯郸市邢台市保定市

张家口市承德市沧州市廊坊市衡水市

河南豫郑州

郑州市开封市洛阳市平顶山市安阳市鹤壁市新乡市焦作市济源市濮阳市许昌市漯河市三门峡市南阳市商丘市信阳市周口市驻马店市

湖北鄂武汉

武汉市黄石市十堰市宜昌市襄樊市鄂州市荆门市孝感市荆州市黄冈市咸宁市随州市恩施土家族苗族自治州仙桃市潜江市天门市神农架林区

湖南湘长沙

长沙市株洲市湘潭市衡阳市邵阳市岳阳市常德市张家界市

益阳市郴州市永州市怀化市娄底市湘西土家族苗族自治州

海南琼海口

海口市三亚市五指山市琼海市儋州市文昌市万宁市东方市定安县屯昌县澄迈县临高县白沙黎族自治县昌江黎族自治县乐东黎族自治县

陵水黎族自治县保亭黎族苗族自治县琼中黎族苗族自治县

江苏苏南京

南京市无锡市徐州市常州市苏州市南通市连云港市淮安市

盐城市扬州市镇江市泰州市宿迁市

江西赣南昌

南昌市景德镇市萍乡市九江市新余市鹰潭市赣州市吉安市

宜春市抚州市上饶市

广东粤广州

广州市韶关市深圳市珠海市汕头市佛山市江门市湛江市茂名市

肇庆市惠州市梅州市汕尾市河源市阳江市清远市

东莞市中山市潮州市揭阳市云浮市

广西桂南宁

南宁市柳州市桂林市梧州市北海市防城港市钦州市贵港市

玉林市百色市贺州市河池市来宾市崇左市

云南云或滇昆明

昆明市曲靖市玉溪市保山市昭通市丽江市思茅市临沧市

楚雄彝族自治州红河哈尼族彝族自治州文山壮族苗族自治州

西双版纳傣族自治州大理白族自治州德宏傣族景颇族自治州

怒江傈僳族自治州迪庆藏族自治州

贵州贵或黔贵阳

贵阳市六盘水市遵义市安顺市铜仁地区毕节地区

黔西南布依族苗族自治州黔东南苗族侗族自治州黔南布依族苗族自治州

四川川或蜀成都

成都市自贡市攀枝花市泸州市德阳市绵阳市广元市遂宁市

内江市乐山市南充市眉山市宜宾市广安市达州市雅安市

巴中市资阳市阿坝藏族羌族自治州甘孜藏族自治州凉山彝族自治州

内蒙古内蒙古呼和浩特

呼和浩特市包头市乌海市赤峰市通辽市鄂尔多斯市呼伦贝尔市

巴彦淖尔市乌兰察布市兴安盟锡林郭勒盟阿拉善盟

宁夏宁银川

银川市石嘴山市吴忠市固原市中卫市

甘肃甘或陇兰州

兰州市嘉峪关市金昌市白银市天水市武威市张掖市平凉市

酒泉市庆阳市定西市陇南市临夏回族自治州甘南藏族自治州

青海青西宁

西宁市海东地区海北藏族自治州黄南藏族自治州海南藏族自治州

果洛藏族自治州玉树藏族自治州海西蒙古族藏族自治州

西藏藏拉萨

拉萨市昌都地区山南地区日喀则地区那曲地区阿里地区林芝地区

新疆新乌鲁木齐

乌鲁木齐市克拉玛依市吐鲁番地区哈密地区昌吉回族自治州

博尔塔拉蒙古自治州巴音郭楞蒙古自治州阿克苏地区

克孜勒苏柯尔克孜自治州喀什地区和田地区伊犁哈萨克自治州

塔城地区阿勒泰地区石河子市阿拉尔市图木舒克市五家渠市

安徽皖合肥

合肥市芜湖市蚌埠市淮南市马鞍山市淮北市铜陵市安庆市

黄山市滁州市阜阳市宿州市巢湖市六安市亳州市池州市宣城市

浙江浙杭州

杭州市宁波市温州市嘉兴市湖州市绍兴市

金华市衢州市舟山市台州市丽水市

福建闽福州

福州市厦门市莆田市三明市泉州市漳州市南平市龙岩市宁德市

台湾台台北

台北市高雄市基隆市台中市台南市新竹市嘉义市

香港港香港

中西区湾仔区东区南区油尖旺区深水埗区九龙城区黄大仙区观塘区

荃湾区葵青区沙田区西贡区大埔区北区元朗区屯门区离岛区

澳门澳澳门

澳门

注：1、以下城市为副省级市：沈阳、大连、长春、哈尔滨、南京、杭州、宁波、厦门、济南、青岛、武汉、广州、深圳、成都、西安。
2、以下城市为计划单列市：大连、宁波、厦门、青岛、深圳。