jq基础

###jQuery（jq）
是一个js代码的框架，用于简化原生js代码，可以让人写的少，做的多，此框架就是
js写的
优势：
-简化js代码
可以像css一样获取元素 可以直接修改元素的样式，解决内部兼容性
jQ引入方式
jq本身就是一个js文件，和普通的js文件的引入方式一样
#####获取按钮并动态绑定事件
$("#btn").click(function(){
alert(“jq动态绑定”);
})
####选择器
基本选择器
1.标签名选择器 选取所有div $（“div”）
2.id选择器 $（"#abc"）
3.类选择器 $（".c1"）
4.分组选择器 $（“h1,p,div”）
5.所有元素选择器 KaTeX parse error: Expected 'EOF', got '#' at position 7: （"*"） #̲##层级选择器 1.(“div span”)获取div下所有的span子孙后代选择器
2.$("div>span")获取div的span子元素子元素选择器3.$(“div+span”)获取div后面紧邻的span兄弟选择器
4.$(“div~span”)获取div后面所有的span兄弟元素
####层级函数
1.获取元素的所有兄弟元素
$("#one").siblings(“div”)获取id为one元素的所有div兄弟元素
2.获取元素的哥哥元素
$("#one").prev()获取id为one元素的上一个兄弟元素
3.获取元素的哥哥们元素
$("#one").prevAll()获取id为one元素的上一个兄弟元素
4.获取元素的弟弟元素
$("#one").next()获取id为one元素的上一个兄弟元素
3.获取元素的弟弟们元素
$("#one").nextAll()获取id为one元素的上一个兄弟元素

#####$介绍
$是jq缩写 $("#one")等效 jq("#one")

#####过滤选择器
1.$("div:first")匹配所有div的第一个元素2.$(“div:last”)匹配所有div中的最后一个
3.$("div:even")匹配所有div下标为偶数的div4.$(“div:odd”)匹配所有div中下标为基数的div
5.$("div:lt(n)")匹配div下标小于n的div6.$(“div:gt(n)”)匹配div下标大于n的div
7.$("div:eq(n)")匹配div下标等于n的div8.$(“div:not(.one)”)匹配所有div中class值不为one的
####内容选择器
1.$("div:has(p)")匹配含有p标签的所有div2.$(“div:empty”)匹配所有空的div
3.$("div:parent")匹配所有非空的div4.$(“div:contains(‘abc’)”)匹配所有div中包含abc文本的元素
###可见选择器
1.$("div:hidden")匹配所有隐藏的div元素2.$(“div:visible”)匹配所有可见的div元素
###jq中和显示隐藏相关的函数
//让元素隐藏
$(’#abc’).hide();
//让元素显示
$("#abc").show();
//让元素隐藏显示切换
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲abc").toggle();…(“div[id]”)匹配所有 有id属性的div
2.KaTeX parse error: Double superscript at position 13: ("div[id=' '̲]")匹配所有id属性值为xx…(“div[id！=’ ']”)匹配所有id属性值不为xxx的div
#####子元素选择器
1.$("div:nth-child(n)")匹配所有div中是子元素并且是第n个子元素2.$(“div:frist-child”)匹配所有div中是子元素并且是第一个子元素
3.KaTeX parse error: Expected 'EOF', got '#' at position 42: …是子元素并且是最后一个子元素 #̲###表单选择器 1.(":input")匹配所有input包括文本框、密码框、按钮、单选、
2.$(":password")匹配所有密码框3.$(":radio")匹配所有单选
4.$(":checkedbox")匹配所有多选5.$(":checked")匹配所有被选中的单选，多选，下拉选
6.$("input:checked")匹配所有被选中的单选，多选7.$(":selected")匹配所有被选中的下拉选
each()方法是用来遍历选择器选择的所有元素
####js对象和jq对象相互转换
var div=document.getElementById(“mydiv”);
$("#mydiv")
//页面加载完成事件
$(function(){
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲btn").click(fun…("#i1").val());
})
})
######相互转换
$(function(){
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲btn2").click(fu…(input).val());
})

})
$(function(){
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲btn3").click(fu…("#i1");
//把jq转成js
var js1=jq[0];
alert(js1.value);
//把jq转成js
var js2=jq.get(0);

})

})
######jq的文档操作
1.创建元素
var jq=$("

");
2添加元素
-添加到最后
/* $(“body”).append(h3); */
-添加到最前面
$(“body”).prepend(h3);
-插入元素
-插入到兄弟元素的后面
兄弟元素,after(新元素);
-插入到兄弟元素的前面
兄弟元素.before(新元素)
-删除元素
元素.remove()
5.样式相关
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲xxx").css("widt…("#xxx").css(“width”)
$(function(){
$("#btn1").click(function(){
$(“div”).css(“color”,“red”);
//设置多个样式
$(“div”).css({“background-color”:“yellow”,“width”:“200px”})

})

})
6.属性相关
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲xxx").attr("属性名…("#xxx").attr(“属性名”)；//获取属性值
7.文本相关 innerText
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲xxx").text("abc…("#xxx").text();//获取元素的元素内容
8.html相关innerHTML
$("#xxx").html(“

xxx

”);//给元素添加html内容
var str= $("#xxx").html();//获取元素的html内容