颜琳琳
今日学了对JS进行封装,是JS的类库JQuery.分别学了JQuery的使用,事件,效果,css,选择器,对属性的操作,DOM的操作.
1.JQuery的使用:
1.JQ的导入:<scrip src=”要导入的JQuery的版本文件”></Scrip>
2.JQ的语法: $(“选择器”) JQuery(“选择器”)
3.JS和JQ区别: JS在随着页面加载且只能加载一次,而JQ在等页面中的DOM树状加载完加载且多次加载;
Js--->Jq $(JS对象)
Jq--->js Jq对象(index) Jq对象.get(index)
2.JQuery事件:
该事件和js事件类似,只是比js事件中少了on,且页面加载的写法有两种1. $(function(){}); 2. $(document).ready(function()){};这两种方法必须要在JQuery使用前加载,否则会无法使用.
3.JQuery效果:
JQuery的效果只要有显示show(),隐藏hide(),向下滑出slideDown(),向上滑入slideUp(),淡出fadeOut,淡入fadeIn();这几种效果的使用方法相同,如 1.jq对象.show();2.Jq对象.show(“毫秒数”), 3.Jq对象.show(毫秒值,function(){});
4.JQuery的CSS:(用于表格的隔行换色)
1.设置样式:JQ对象.css(“属性”:”值”) (css后面的属性和值可以添加多个用逗号隔开即可)
2.添加样式:addClass(“要引入的样式”)
3.删除样式:removeClass(“要删除的样式”)
5 .JQuery的选择器:
这部分的内容需要记住几种常用的选择器: 1. 基本选择器:有ID选择器 使用方法$(“#id”); 类选择器 使用方法$(“.类名”); 元素选择器 使用方法$(“元素名称”); 通配符选择器 $(“*”) (注:*号为所有的内容); 并列选择器 使用方法$(“选择器,选择器,选择器”)(注:该选择器中的选择器可以是任意类型选择器); 2. 层级选择器, 有后代选择器,如body div; 子元素选择器,如body > div; 子元素的下一个同辈元素,如body + div; 兄弟选择器如:body ~ div; 3. 属性选择器 [属性名] [属性名=’值’]
还有一部分选择器只需知道怎么用即可: 1.基本过滤选择器 有第一个:first; 最后一个:last; 偶数:even, 奇数:odd, 索引= :eq(index), 索引> :gt(index), 索引< :It(index)
2.内容选择器 :contians() , 3.表单选择器 :checkbox()下拉列表, :text()文本, :password()密码框等.(注意:这些选择器在使用前都要加冒号( : )).
6 .JQuery对属性的操作:
1.有attr()和prop(),这两种用法一样,只是attr()的JQuery的版本比较低,只能在1.8前的版本使用,prop()用于1.9以上的版本,prop的方法有1.设置属性: JQ对象.prop(“属性”:”值”) 2.添加属性: JQ对象.prop({“属性”:”值”,“属性”:”值”,“属性”:”值”}) 3.删除属性: JQ对象.removeprop(“属性名”)
7 .JQuery的DOM属性操作:
1.内部插入: append 例: a.append(c) 将c插入a的内部后面 appendTo 例: a.appendTo 将a插入c的内部后面
2.外部插入; 3.删除: empty() 清空子元素 remove() 清空元素包括自己
3.数组的遍历:1. $(数组).each(function(i,n){}) (其中i代表要遍历的元素的索引,n表示该索引所对应的值) 2. $.each(数组,function(i,n){}) (其中i代表要遍历的元素的索引,n表示该索引所对应的值); |
