jQuery介绍
jQuery是一个函数库,一个js文件,页面用脚本标签引入这个js文件就可以使用。
下载地址:
jQuery官方网站:http://jquery.com/
& lt;脚本类型=拔谋?javascript"src=https://www.yisu.com/zixun/" js/jquery-1.12.2.js ">
将获取元素的语句写到页面头部,会因为元素还没有加载而出的错,jquery提供了准备方法解决这个
问题,它的速度比原生的窗口。onload更快。
& lt;脚本类型=拔谋?javascript"在
美元(文档)时(函数(){
,
});
& lt;/script>
详细写法
& lt;脚本类型=拔谋?javascript"在
美元(函数(){
,
});
& lt;/script>
简写
将获取元素的语句写到页面头部,会因为元素还没有加载而出的错,jquery提供了准备方法解决这个
问题,它的速度比原生的窗口。onload更快
& lt;脚本类型=拔谋?javascript"在
美元(文档)时(函数(){
,
});
& lt;/script>
jQuery选择器
基本选择器
选择某个网页元素,然后对它进行某种操作,jQuery选择器jQuery选择器可以快速地选择元素,
选择规则和css样式相同,使用长度属性判断是否选择成功。
jQuery用法思想一:选择某个网页元素,然后对它进行某种操作
$(文档)//选择整个文档对象
$(李)//选择所有的李元素
$ (' # myId ')//选择id为myId的网页元素
$ (' .myClass ')//选择类为myClass的元素
美元(输入(name=第一))//选择名称属性等于第一次的输入元素
$(“李# ul1跨度”)
//选择id为为ul1元素下的所有李下的跨度元素
$ (' # ul1李:首先')
(# ul1李:奇怪的)美元
选择器修饰过滤
//选择id为ul1元素下的第一个李
//选择id为ul1元素下的李的奇数行
$ (' # ul1李:eq(2))//选择id为ul1元素下的第3个李
$ (' # ul1李:gt(2))//选择id为ul1元素下的前三个之后的李
$ (' # myForm:输入')//选择表单中输入的元素
$ (' div:可见')//选择可见的div元素
选择器函数过滤
美元(div) . (“p”);//选择包含p元素的div元素
(div)美元自身之外(“.myClass”);//选择类不等于myClass的div元素
(div)美元.filter (“.myClass”);//选择类等于myClass的div元素
美元(div)当代();//选择第1个div元素
(div)美元.eq (5);//选择第6个div元素
选择器转移
(div)美元.prev (“p”);//选择div元素前面的第一个p元素
美元(div) . next (“p”);//选择div元素后面的第一个p元素
(div)美元.closest(形式);//选择离div最近的那个形式父元素
(div)美元.parent ();//选择div的父元素
(div)美元定格();//选择div的所有子元素
(div)美元.siblings ();//选择div的同级元素
美元(div); (“.myClass”);//选择div内的类等于myClass的元素
操作行间样式
jquery用法思想二同一个函数完成取值和赋值
//获取div的样式
(“div")美元。css (“width");
(“div")美元。css (“color");
//设置div的样式
(“div")美元。css (“width",“30 px");
(“div")美元。css (“height",“30 px");
(“div")美元。css({字形大小:“30 px",颜色:“red"});
操作样式类名
jquery用法思想二同一个函数完成取值和赋值
$ (“# div1") .addClass (“divClass2")
//为id为div1的对象追加样式divClass2
$ (“# div1") .removeClass (“divClass")
//移除id为div1的对象的类名为divClass的样式
$ (“# div1") .removeClass (“divClass divClass2")
//移除多个样式
$ (“# div1") .toggleClass (“anotherClass")
//重复切换anotherClass样式
jQuery属性操作
设置html内容
//取出文本内容
//取出html内容
var htm=(# div1)美元。text ();
var htm=美元(“# div1”) . html ();
//设置文本内容
//设置html内容
$ (' # div1 ') . html (' & lt; span>添加文字& lt;/span>”);
(# div1)美元。text (' & lt; span>添加文字& lt;/span>”);
设置属性值
//取出图片的地址
var src=https://www.yisu.com/zixun/美元(# img1) .attr (src);
//设置图片的地址和alt属性
$ (“# img1”)。attr ({src:“test.jpg" alt:“测试Image"
绑定事件
(# btn1)美元.click(函数(){
//内部的这指的是原生对象
//使用jquery对象用$ ()
})
jquery特殊效果
渐隐()淡出
fadeToggle()切换淡入淡出
隐藏()隐藏元素
show()显示元素
切换()依次展示或隐藏某个元素
slideDown()向下展开
slideUp()向上卷起
