2017-04-19 JQ基础
完成复习时间:20:00
已经理解的知识点:
一、JQ对象:
1、获取JQ对象,需早变量前面加上$;
2、DOM对象转JQ对象:
var user = document.getElementById("d");
var $user = $(user);
3、JQ对象转DOM对象:
var $user = $("#username");
var user = $user[0]; //也可通过.get(index)方法得到相应的DOM对象
二、JQ选择器:
1、基本选择器:
1)#id $("#id");
2)Element元素 $("div");
3)class $(".class");
4)* $("*") 匹配所有元素,多用于结合上下文来搜索;
5)$("div,span,p") 返回所有指定元素
2、层次选择器:
1)$("form input") 在给定的祖先元素下匹配所有后代元素;
2)$("form>input") 在给定的父元素下匹配所有子元素;
3)$("prev+next") 匹配所有紧接在prev元素后的next元素;
4)$("prev~siblings") 匹配prev元素后的所有siblings元素,不包含prev元素;
3、基础过滤选择器:
1)$("tr:first") 匹配找到的第一个元素;last:匹配最后一个元素;
2)$("input:not(:checked)") 去除所有与给定选择器匹配的元素;
3)$("tr:even") 匹配所有底标为偶数的元素; odd:奇数;
4)$("tr:eq(0)") 匹配给定索引值的元素; gt:大于 it:小于;
5)$(":header") 匹配标题元素;
4、内容过滤选择器:
1)$("div:contains(‘abc‘)") 匹配包含给定文本的元素;
2)$("td:empty") 匹配所有不包含子元素或文本的空元素;
3)$("div:has(p)").addClass("test") 意思为给所有含P元素的div标签加上class=test;
4)$("td:parent") 匹配含有子元素或文本的元素;
5、可见度过滤选择器:
1)$("input:hidden") 匹配所有不可见的元素,如input元素type为hidden或display:none
2)$("tr:visible") 匹配所有可见元素;
6、属性过滤选择器:
1)$("div[id]") 匹配包含给定属性的元素;
2)$("input[name=‘newsletter‘]").attr("checked", true) 匹配给定属性是某个特定值的元素;
3)$("input[name!=‘newsletter‘]").attr("checked", true) 匹配所有不含指定属性的元素;
4)$("input[name^=‘news‘]") 匹配给定属性是以某些值开始的元素;
5)$("input[name$=‘news‘]") 匹配给定的属性是以某些值结尾的元素;
6)$("input[name*=‘news‘]") 匹配给定的属性是以包含某些值的元素;
7)$("input[id][name*=‘news‘]") 复合选择器,需同时满足以上条件;
7、子元素过滤选择器:
1):nth-child(index/even/odd/equation) 用法:$("ul li:nth-child(2))
匹配其父元素下的第N个或奇偶元素;
2):first-child 匹配第一个子元素;
3):last-child 匹配最后一个子元素;
4):only-child 如果某个元素是父元素中唯一的子元素,就会匹配成功;
8、表单对象属性过滤选择器:
1)$("input:enabled") 匹配所有可用元素,意思为找input中不带有disabled="disabled"的input
2)$("input:disabled") 与上面相对应;
3)$("input:checked") 匹配所有选中的元素(类型为复选框、单选框等的input,不包括select中的option)
4)$("select option:selected") 匹配子元素中所有选中的option元素;
三、JQ事件:
1、加载DOM:$(document).ready();
2、事件绑定:
1)$("#a").bind("click", function(){
});
2)$("#a").click(function(){
})
四、属性操作:
1、attr() 获取和设置属性;
2、removeAttr() 删除指定元素的指定属性;
五、样式操作:
1、addClass()追加样式;
2、removeClass()移除样式;
3、toggleClass()切换样式,控制样式的重复切换;
4、hasClass()判断元素中是否含有某个class;
六、CSS-DOM操作:
1、css()获取和设置元素的样式属性;
2、opacity 获取和设置元素透明度;
3、height() width() 获取和设置元素高宽度,例如$("p:first").height("2px");
4、offset() 获取元素在当前视窗中的相对位移,返回top left;
七、设置和获取HTML,文本和值:
1、html() 获取和设置某个元素中的HTML内容;
2、text() 获取和设置某个元素中的文本内容;
3、val() 获取和设置某个元素中的值,对于文本框, 下拉列表框, 单选框该方法可返回元素的值(多选框只能返回第一个值)