DOM中获取元素的方式
//根据id·获取元素
document.getElementById("id属性值");
//根据标签名字获取元素
document.getElementsByTagName("标签名字");
//根据name属性获取元素(一般指表单标签)
document.getElementsByName("name属性的值");
//根据类样式获取元素
document.getElementsByClassName("类样式的名字");
//根据选择器获取元素(id选择器，类选择器，标签选择器。。。)
document.querySelector("选择器");//获取的是单个的
document.querySelectorAll("选择器");//获取的是多个的jQuery中获取元素的方式
$("选择器")------jQuery对象
$("#id属性的值")-----操作id
$("标签名字")------改变一个或是多个
$(".类样式的名字")-----类选择器
$("标签名称.类样式名称")------->交集选择器
$("选择器，选择器，选择器------->类样式名字，#id选择器")------>并集选择器
$("父标签名 子标签名")------>层次选择器(后代选择器，直接的，间接的都能拿到)
$("父标签名>子标签名")------>子代选择器（直接的子标签）
$("标签名~标签名")------>获取到的是第一个标签名之后所有和第二个标签名相同的兄弟标签
$("标签名+标签名")------>获取到的是第一个标签名后面的直接的兄弟元素
jQuery中获取兄弟元素的方式
$(function () {
$("#btn").click(function () {
//.next()表示下一个兄弟节点
$("#li").next().css("backgroundColor","red");
//.prev()表示上一个兄弟节点
$("#li").prev().css("backgroundColor","red");
//.nextAll()表示下面的所有兄弟节点
$("#li").nextAll().css("backgroundColor","red");
//.prevAll()表示上面的所有兄弟节点
$("#li").prevAll().css("backgroundColor","red");
////.siblings()表示所有的兄弟节点
$("#li").siblings().css("backgroundColor","red");
});
});元素绑定事件的几种方式
以下两种方式，只能给已经存在的元素绑定事件，不能给后添加的元素绑定事件
（1）对象.事件(事件处理函数);------>普通写法
（2）对象.bind(参数1，参数2);------>参数1：事件名字；参数2:事件处理函数
下面两种方式，可以给已存在的元素绑定，也可以给后来添加的元素绑定事件
（3）父级对象.delegate("选择器"，"事件名字",事件处理函数);------>父元素调用方法，代理子级元素绑定事件
（4）对象.on("事件名字","选择器"，事件处理函数)------>父元素调用方法，代理子级元素绑定事件
建议以后直接用on
元素解绑事件的几种方式
用什么绑定，最好用什么方式解绑
（1）unbind方式解绑
对象.unbind();------->解绑所有事件
对象.unbind("事件名字");------->解绑相应的事件
对象.unbind("事件名字 事件名字");------->同时解绑多个事件
（2）undelegate方式解绑
父级对象.undelegate();-------->解绑子级的所有事件
父级对象.undelegate("子级对象","事件名称");-------->解绑相应子级的相应事件
父级对象.undelegate("子级对象","事件名称 事件名称");-------->解绑相应子级的多个相应事件
（3）off方式解绑
父级对象.off();--------->解绑父级元素和子级元素的所有事件
父级元素.off("事件名字");--------->解绑父级元素和子级元素对应的事件
父级元素.off("事件名字 事件名字");--------->解绑父级元素和子级元素对应的多个事件
父级元素.off("事件名字","子级元素");--------->解绑子级元素对应的相关事件
父级元素.off("事件名字 事件名字","子级元素");--------->解绑子级元素对应的多个事件
父级元素.off("事件名字","**");--------->解绑父级元素所有子级元素的对应事件
父级元素.off(" ","子级元素");--------->解绑子级元素的所有事件
阻止事件冒泡--------->return false
事件的触发
（1）对象.事件名字();
（2）对象.trigger("事件名字");
（3）对象.triggerHandler("事件名字");
注意！前面两种方式没有区别，第三种方式虽然也可以触发，但是不能触发浏览器的默认行为
隐式迭代
代码本身没有循环操作，jQuery中内部帮助我们循环操作
.val()-------->设置或获取表单标签的value内容
.text()-------->设置或获取该元素的文本内容
.text()方法相当于DOM中的.innerText属性
对象.text()------>获取该元素的文本内容
对象.text("属性","值")----->设置该元素的文本内容
.css()-------->设置某个元素的css样式属性值
.html()-------->设置或是获取标签中的html内容
设置或是获取标签中的html内容，相当于DOM中的innerHTML
.addClass()-------->设置类样式
.addClass("类样式 类样式 类样式")-------->设置多个类样式
无论括号里是否有值，返回来的都是这个对象
.removeClass()-------->移除类样式
.removeClass(“类样式 类样式 类样式”)------>移除多个类样式
无论括号里是否有值，返回来的都是这个对象
.hasClass()-------->判断元素是否应用了某个类样式
.hasClass("类样式 类样式 类样式")------>判断元素是否应用了多个类样式
.toggleClass()-------->切换类样式
（有则移除，无则应用）
.end()-------->修复断链
.stop()-------->停止动画
.animate()-------->动画函数
.attr(参数1，参数2)-------->设置某个属性的值
参数1：属性的名字
参数2：属性的值
.attr(参数1)-------->获取某个属性的值
参数1：属性的名字
!!!.attr()方法主要操作的是元素的自定义属性，也可以操作元素的自带属性（html中的属性），但是用来操作选中不合适。
.prop()-------->设置或获取是否选中
参数1：属性的名字(checked)
参数2：属性的值(true或者flase)
.width()-------->设置或获取某元素的宽
.height()-------->设置或获取某元素的高
.offset()-------->设置或获取某元素的left,top属性
.offset({"left":值,"top":值})
.scrollLeft()-------->获取元素向左卷曲出去的距离
.scrollTop()-------->获取元素向上卷曲出去的距离
简单案例：
（1）点击按钮，改变P标签的内容
<body>
<input type="button" value="改变P标签的值" id="btn">
<p>p</p>
<p>p</p>
<p>p</p>
<p>p</p>
<p>p</p>
</body>
<script src="jquery-1.12.4.js"></script>
<script>
$("#btn").click(function (){
$("p").text("我们喜欢jQuery");
});
</script>（2）点击按钮，改变class=“.cls”的div的颜色及内容
jQuery代码
<body>
<input type="button" value="改变div的颜色" id="btn02">
<div class="cls">我原本的颜色是yellow</div>
<div class="cls">我原本的颜色是yellow</div>
</body>
<script src="jquery-1.12.4.js"></script>
<script>
$("#btn02").click(function () {
$(".cls").css("backgroundColor","pink");
$(".cls").text("我现在的颜色是粉色");
});
</script>css样式代码
<style>
.cls{
width: 200px;
height: 150px;
margin-top: 5px;
background-color: yellow;
}
</style>