一 jQuery概述
jQuery就是一个js库,里面封装了很多js的方法,相当于是一个外部的js文件。
1.快速入门
1) 导库
2)在scrpit中直接使用jquery即可。
2.jquery的页面加载函数(当页面加载完后执行的函数)
window.onload只能出现一个,并且后面的会覆盖前面的,但jquery的多个页面加载函数不会覆盖
jquery页面加载函数
//方式一
jQuery(document).ready(function(){//....});
//方式二:
$().ready(function(){//....});
//方式三:常用
$(function(){
//内容
});
3.jquery对象和dom对象之间的转换
· dom对象转换成jquery对象,就可以使用jquery对象中的属性和方法
$(function(){
var sp1 = document.getElementById("sp1");
// sp1.innerHTML = "hello!";
$(sp1).html("hello jquery!");
});
· jquery对象转换成dom对象,就可以使用dom对象中的属性和方法
$(function(){
$("#sp1").get(0).innerHTML = "hello!";
});
二、jquery的选择器
通过查看jquery文档可知,jquery的选择器有多种,常用的选择器如下:
1.基本选择器
· id选择器:
$("#btn1");
· 元素选择器
$("div");
· 类选择器
$(".mini");
· 所有元素
$("*")
· 合并多个选择器
$("div,.mini");
2.层级选择器
· $("爷爷 后代"): 后代包括儿子和孙子
· $("爷爷 > 儿子"):只有儿子,没有孙子
· $("哥哥 + 弟弟"):弟弟必须是紧挨着哥哥的,其他的远房弟弟不算
· $("哥哥 ~ 弟弟"):弟弟可以不是紧挨着的,只有是同辈的。
3.基本过滤选择器
· first(): 选择第一个
· last():选择最后一个
· even: 选择索引是偶数的元素
· odd:选择索引是奇数的元素
4.属性选择器
· [属性]
· [属性='值']
三、案例之省市二级联动
要想完成二级联动,就必须搞清jquery中each函数的用法。
each函数的语法格式:
$.each(数据集,回调函数(i,n)),其中i指的是每次循环的循环变量,n指的是每次循环对应的数据集中的元素。
省市二级联动的代码如下:
千锋成都Java培训作为国内IT研发人才一体化服务的开拓者,为学生制定合理有序的学习计划,0学费入学,2周免费试听不满意不收费,与学员签订就业协议,坚持良心面授,从千锋Java培训班出去的学员均已高薪就业。千锋推出的免费java视频教程,让学员能够方面的巩固基础技术能力。