JQ核心：$
代表JQ对JQ对象的引用，JQ是核心对象，通过该对象可以获取JQ对象，调用JQ提供的方法。
JQ选择器
元素选择器：element，$（“div”）选择所有div元素，$（“div[id=”mydiv”]”）选择id=”mydiv”的div元素 JS
例子：
dv = $(“div”) 等于 dv = document.getElementsByName(“div”);
console.log(dv); console.log(dv);
id选择器：#id,$(“#dv”)选择id=”id”的元素
jQ
例子
dv =$(“#dv”); 等于dv=document.getElementById(“dv”);
console.log(dv); console.log(dv);
类选择器:.class ,$(“.blue”)选择所有class=”blue”的元素，$（“span.blue”）选择所有class=”blue”的span元素
例子
dv =$(“.classDiv”); 等于dv=document.getElementsByClassName(“classDic”);
console.log(dv); console.log(dv);
选择所有选择器：* ， $(“*”)选择页面所有元素
例子
dv = $(“*”);
console.log(dv);
组合选择器：e1,e2,eN , $(“#dv,span,.blue”)同时选中这几个选择器匹配的元素
例子
vardv = $(“#dv,.classDiv,div[name=nameDiv]”);
console.log(dv);
后代选择器：ancestor descendant , $(“#parent div”)选择id = “parent”的元素的所有子div元素
例子
varcc=(“#dv p span”);
console.log(cc);
操作元素的属性
1、遍历元素；each()//从开始的元素信息到一直结束的元素信息的意思
$(selector).each(function(index,element))遍历元素
Function为遍历时回调函数
Index为遍历元素序列号，从0开始（关键字）
element是当前的元素(关键字)
selector是元素
例子
$(“div”).each(function(index,element){
console.log(index,element)
});
在log(index,element）后面加上$(element)等于添加对象
2、获取属性
attr(属性名称)：获取指定的属性值，attr(“checked”)attr(“name”)
提示：attr()操作checkbox时选中返回checked,没有选中返回undefined
Prop(属性名称)：获取具有true和false俩个属性的属性值，prop(“checked”)
提示：prop()可以获取元素名称prop(“tagName”),获取checkbox建议使用prop()，attr()无法获取变化的checkbox,值可以获取静态的状态，而prop()都可以
functionjqGetAttr() {
$(“input”).each(function (idx, e) {
console.log($(e).prop(“checked”));
});
}
3、设置属性
functionacc(){
$(“input”).each(function (idx,e){
推荐使用prop()设置动态操作例如checkedselected，浏览器不会更改文档
console.log($(e).prop(“checked”,”checked”));
})
}
js绑定事件
document.getElementById(“bth”).onclick=acc
jQuery移出属性removeAttr()
functionacc (){
$(“input”).each(function (idx,e){
$(e).removeAttr(“checked”);//e此时是js的dom对象，要转换为jq对象
})
}
1、操作元素的样式
Attr(“class”) 获取class（不仅限于class,象Id或其他属性也可以）属性的值，即样式名称
functionadd(){
varblueDv = $(“#blue_div”);
blueDv.attr(“Id”,);
console.log(blueDv.attr(“Id”))；//打印
}
document.getElementById(“add_btn”).onclick = add;//绑定按键
Ate(“class”,”样式名”)修改class（不仅限于class,象Id或其他属性也可以）属性的值，修改样式
addClass(“样式名”)添加样式名称
functionacc(){
varredDv = $(“#red_div”);
redDv.addClass(“red”);
console.log(redDv.addClass(“red”));//打印
}
document.getElementById(“add_btn”).onclick = acc;//绑定按键
css() 添加具体的样式
functionacc(){
varredDv = $(“#red_div”);
redDv.css({
“background”:”red”,
“color”:”white”
})
console.log(redDv.css({
“background”:”red”,
“color”:”white”
}));
}
document.getElementById(“add_btn”).onclick = acc;//绑定按键
removecClass(class) 移出样式名称
当做属性移出
移除全部使用removeAttr（“style”）
移除单个使用css(“属性“，””)；
functionremove(){
varblueDv = $(“#red_div”);
blueDv.removeAttr(“style”);
console.log( blueDv.removeAttr(“style”));
}
document.getElementById(“remove_btn”).onclick = remove;
functionremoveF(){
varredDv = $(“#red_div”);
redDv.css({
“background”:”red”,
“color”:””
})
}
document.getElementById(“remove_btn”).onclick = removeF;
2、操作元素的内容
Html 获取元素的html 内容
functionjq(){
vardv = $(“#html”);
console.log(dv.html());
}
document.getElementById(“btn”).onclick = jq;
Html(“html内容”) 设定元素的html内容
functionjqSetHtml() {
vardv = $(“#html”);
dv.html(“<h3>我是88</h3>”);
}
document.getElementById(“btn”).onclick = jqSetHtml;
Text() 获取元素的文本内容，不包含html
functionjj(){
vardv = $(“#text”);
console.log(dv.text());
}
document.getElementById(“btn”).onclick = jj;
Text(“text内容“) 设置元素的文本内容，不包含html
functionjj(){
vardv = $(“#text”);
dv.text(“你爸爸”);
}
document.getElementById(“btn”).onclick = jj;
Val() 获取元素value值
functionll(){
varinp = $(“#inp”);
console.log(inp.val());
}
document.getElementById(“btn”).onclick = ll;
Val(“值”) 设定元素的value 值
functionww(){
varinp =$(“#inp”);
inp.val(“我是新的爸爸”)
}
document.getElementById(“btn”).onclick = ww;
创建元素
S(“元素内容”)
$(“<p>我是一个p元素</P>”>;
varh5 = $(“<h5>我是一个H5标签</h5>”);
添加元素
$(“body”).prepend(content) 在被选元素内部的开头插入元素或内容，被追加的content参数，可以是字符、HTMl元素标记
varh5 = $(“<h5>我是一个H5标签</h5>”);
functiontest(){
$(“body”).prepend(h5);
console.log( $(“body”).prepend(h5));
}
document.getElementById(“btn”).onclick = test;
$(contnent).prependTo(selector) 把content 元素或内容加入selector元素开头
functiontet(){
h5.prependTo($(“div[class=yellow]”));
}
document.getElementById(“btn”).onclick = tet;
$（“body”）.append(content) 在被选元素内部的结尾插入元素或内容，被追加的content参数，可以是字符，hTMl元素标记
functiontrt(){
varspan = $(“<span>我是一个span</span>”)
$(“[span] b”).append(span);
}
document.getElementById(“btn”).onclick = trt;
$(content).appendTo(selector) 把content元素或内容插入selector元素内，默认是在尾部
functionttt(){
h5.appendTo($(“body”));
}
document.getElementById(“btn”).onclick = ttt;
删除元素
Remove() 筛选所选元素或指定的子元素，包括整个标签和内容一起删除
functiontet(){
vars = $(“span”);
s.remove();
}
document.getElementsByTagName(“button”)[0].onclick = tet;
Empty() 清空所选元素的内容
functiontyt(){
varw = $(“h3”);
w.empty();
}
document.getElementsByTagName(“button”)[0].onclick = tyt;
JQ事件
加载事件
ready()类似于onload()事件，ready()可以写多个，按顺序执行
$(document).ready(function(){
alert(“jqload事件写法第一种”)
})
$(function(){
alert(“jqload事件第二种写法”)
})
绑定事件
$(selector).bind(eventType[,eventData],handler(eventobject));
eventType:是一个字符串类型的事件，类型，就是你所绑定的事件
[,eventData]:传递的参数，格式：｛名：值，名2：值2｝
Handler(eventobject):该事件触发执行的函数
三种方式实现：bind(),click具体的事件类型，on(),
js事件绑定
document.getElementById(“ta”).onkeydown = testKeydown;
document.getElementById(“ta”).onkeyup = testKeyup;
//第一种
$(“#ta”).bind(“keydown”,testKeydown);
$(“#ta”).Bind(“keyup”,testKeyup);
//第二种
$(“#ta”).keydown(testKeydown);
$(“#ta”).keyup(testkeyup);
//第三种
$(“#ta”).on(“keydown”,testKeydown);
$(“#ta”).on(“keyup”,testKeyup);
