JQ基础知识

Posted 2020-09-27

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() 获取和设置某个元素中的值，对于文本框, 下拉列表框, 单选框该方法可返回元素的值(多选框只能返回第一个值)