JQuery的理解概述：
- jQuery是JavaScript框架之一，封装了JavaScriptde常用功能的原生代码，比如：优化HTML文档操作（选择元素增删改查样式，内容，属性；增删改元素，属性）、事件处理、动画设计，Ajax交互，旨在"write less,do more".
JQuery的使用概述:
- 写JQuery相关代码的前提：
1.下载JQuery
2.导入JQuery的js文件：导入min.js文件 - 简单来说，一个前端页面在写好html+css静态效果之后，无论是添加不涉及用户交互的动态视觉效果，还是涉及用户交互的视觉效果，或者涉及前后端数据请求响应的交互效果，都需要javaScript完成，使用javaScript时就自然而然会主动想到语法更简洁，功能更灵活的JQuey，然后再查手册开放式的学习。
JQuery和JavaScript元素对象相互转换的测试代码：
<body>
<div id="div1">div1....</div>
<div id="div2">div2....</div>
<script>
//1. 分别通过js方式和JQuery方式获取名称叫div的所有html元素对象
var divs = document.getElementsByTagName("div");
var $divs = $("div");
//2.两种方式获取的对象都可以当作数组来用
alert(divs.length);
alert($divs.length);//也可以当做数组使用
//3.两种方式下相同作用的方法，名称不同，且不通用
for (var i = 0; i < divs.length; i++) {
divs[i].innerHTML = "aaa"; //一一遍历，改变数组内所有对象标签体的内容
//divs[i].html("ccc"); 错于JavaScript对象与JQuery对象的方法不通用
}
$divs.html("bbb"); //不需要遍历，改变数组内所有对象标签体的内容
//$divs.innerHTML = "bbb"; 错于错于JavaScript对象与JQuery对象的方法不通用
/*4.两者相互转换
* jq -- > js : jq对象[索引] 或者 jq对象.get(索引)
* js -- > jq : $(js对象)
*/
//jq -- > js
$divs[0].innerHTML = "ddd";
$divs.get(1).innerHTML = "eee";
//
//js -- > jq
$(divs[0]).html("hhh")
</script>
</body>
JQquey入口函数，事件的测试代码：
<script>
//1. jquery入口函数(dom文档加载完成之后执行该函数中的代码)：可以定义多次的。
$(function () {
//2.获取b1按钮并绑定点击事件
$("#b1").click(function(){
alert("abc");
});
});
/*对标的js原生代码：只能定义一次,如果定义多次，后边的会将前边的覆盖掉
window.onload=function fun(){
//1.获取b1按钮
document.getElementById("b1").onclick=function (){
alert("abc");
};
}
*/
</script>
<body>
<input type="button" value="点击一下" id="b1">
</body>
JQuery基本选择器的样例代码：
1. 基本选择器
* 标签选择器（元素选择器）：$("html标签名") 获得所有匹配标签名称的元素
$("div").css("样式属性名称","属性值");
* id选择器：$("#id的属性值") 获得与指定id属性值匹配的元素
$("#id1").css("样式属性名称","属性值");
* 类选择器：$(".class的属性值") 获得与指定的class属性值匹配的元素
$(".class1").css("样式属性名称","属性值");
* 并集选择器： $("选择器1,选择器2....") 获取多个选择器选中的所有元素
$("div,#id1").css("样式属性名称","属性值");
2. 层级选择器
* 后代选择器： $("A B ") 选择A元素内部的所有B元素
$("body div").css("样式属性名称","属性值");
* 子选择器： $("A > B") 选择A元素内部的所有B子元素
$("body > div").css("样式属性名称","属性值");
3. 属性选择器
* 属性名称选择器：$("A[属性名]") 包含指定属性的选择器
$("div[title]").css("样式属性名称","属性值");
* 属性选择器： $("A[属性名='值']") 包含指定属性等于指定值的选择器
$("div[title='test']").css("样式属性名称","属性值");
* 复合属性选择器： $("A[属性名='值'][]...") 包含多个属性条件的选择器
$("div[title!='test']").css("样式属性名称","属性值"); //选择属性title值不等于test的div标签
$("div[title^='te']").css("样式属性名称","属性值"); //选择属性title值以te开始的div标签
$("div[title$='est']").css("样式属性名称","属性值");//选择属性title值以est结束div标签
$("div[title*='es']").css("样式属性名称","属性值"); //选择属性title中含有es的div标签
$("div[id][title*='es']").css("样式属性名称","属性值"); //选取有属性id的div标签，然后在结果中选取属性title值含有“es”的div标签
4. 过滤选择器
* 首元素选择器： :first 获得选择的指定元素（可能多个）中的第一个
$("div:first").css("样式属性名称","属性值"); //改变第一个div元素的样式
* 尾元素选择器： :last 获得选择的指定元素（可能多个）中的最后一个
$("div:last").css("样式属性名称","属性值"); //改变最后一个div元素的样式
* 非元素选择器： :not(selector) 不包括指定内容的元素
$("div:not(.one)").css("样式属性名称","属性值"); //改变class不为one的所有 div元素的样式
* 偶数选择器： :even 偶数，从 0 开始计数
$("div:even").css("样式属性名称","属性值"); //改变索引值为偶数的div元素的样式
* 奇数选择器： :odd 奇数，从 0 开始计数
$("div:odd").css("样式属性名称","属性值"); //改变索引值为奇数的div元素的样式
* 等于索引选择器： :eq(index) 指定索引元素
$("div:eq(3)").css("样式属性名称","属性值"); //改变索引值为等于3的div 元素的样式
* 大于索引选择器 ： :gt(index) 大于指定索引元素
$("div:gt(3)").css("backgroundColor","pink"); //改变索引值为大于3的div元素的样式
* 小于索引选择器 ： :lt(index) 小于指定索引元素
$("div:lt(3)").css("样式属性名称","属性值"); //改变索引值为小于3的div元素的样式
* 标题选择器： :header 获得标题（h1~h6）元素，固定写法
$(":header").css("样式属性名称","属性值"); //改变所有的标题元素的样式
5. 表单过滤选择器
* 可用元素选择器： :enabled 获得可用元素
$("input[type='text']:enabled").val("aaa"); //利用jQuery对象的val()方法改变表单内可用的且属性type值为text的<input>元素的值
* 不可用元素选择器： :disabled 获得不可用元素
$("input[type='text']:disabled").val("aaa"); //利用jQuery对象的val()方法改变表单内不可用且type属性值为text的<input>元素的值"
* 选中选择器： :checked 获得单选/复选框选中的元素
alert($("input[type='checkbox']:checked").length);//利用jQuery对象的 length属性获取复选框选中的个数
* 选中选择器： :selected 获得下拉框选中的元素
alert($("option:selected").length);//利用jQuery对象的length属性获取下拉框选中的个数
DOM的测试代码：
1. 内容操作
* html(): 获取/设置元素的标签体内容 <a><font>内容</font></a> --> <font>内容</font>
var html = $("#mydiv").html(); // 获取mydiv的标签体内容
$("#mydiv").html("<p>aaaa</p>"); //设置mydiv的标签体内容
* text(): 获取/设置元素的标签体纯文本内容 <a><font>内容</font></a> --> 内容
var text = $("#mydiv").text(); // 获取mydiv文本内容
$("#mydiv").text("bbb"); //设置mydiv的标签体内容
* val()： 获取/设置元素的value属性值
var value = $("#myinput").val(); // 获取myinput 的value值
$("#myinput").val("李四"); // 设置myinput 的value值
2. 属性操作
* 通用属性操作
1. attr(): 获取/设置元素的固有属性
var name = $("#bj").attr("name"); //获取id值为bj的元素的name属性值
$("#bj").attr("name","beijing"); //设置id值为bj的元素的name属性的值为beijing
$("#bj").attr("discription","didu"); //为id值为bj的元素新增discription的属性，属性值为didu
2. removeAttr():删除属性
$("#bj").removeAttr("name"); //删除id值为bj的元素的name属性并检验name属性是否存在
3. prop():获取/设置元素的自定义属性
var checked = $("#hobby").prop("checked"); //获得id为hobby的元素的选中状态
var checked = $("#hobby").attr("checked"); //获取不到，弹出undefined
$("#one").prop("class","second"); //将id值为one的元素的class属性值改为second
4. removeProp():删除属性
* 对class属性操作
1. addClass():添加class属性值
$("#one").addClass("second"); //id值为one的元素新增一个值为“second”的属性
2. removeClass():删除class属性值
$("#one").removeClass("second");
3. toggleClass():切换class属性
$("#one").toggleClass("second"); //判断如果元素对象上存在class="one"，则将属性值one删除掉。 如果元素对象上不存在class="one"，则添加
4. css():
var backgroundColor = $("#one").css("backgroundColor");//通过css()获得id为one背景颜色
$("#one").css("backgroundColor","green");通过css()设置id为one背景颜色为绿色
3. CRUD操作:
1. append():父元素将子元素追加到末尾,对象1.append(对象2): 将对象2添加到对象1元素内部，并且在末尾
$("#id1").append($("#id2")); //将id值为id2的元素添加到id值id1的元素内部的末尾
2. prepend():父元素将子元素追加到开头,对象1.prepend(对象2):将对象2添加到对象1元素内部，并且在开头
$("#id1").prepend($("#id2"));将id值为id2的元素添加到id值为id1元素内部的开头
3. appendTo():对象1.appendTo(对象2):将对象1添加到对象2内部，并且在末尾
$("#id2").appendTo($("#id1")); //将id值为id2的元素添加到id值id1的元素内部
4. prependTo()：对象1.prependTo(对象2):将对象1添加到对象2内部，并且在开头
$("#id2").prependTo($("#id1")); //将id值为id2的元素添加到id值id1元素内部的开头
5. after():添加元素到元素后，对象1.after(对象2)： 将对象2添加到对象1后边。对象1和对象2是兄弟关系
$("#id1").after($("#id2"));
6. before():添加元素到元素前边,对象1.before(对象2)： 将对象2添加到对象1前边。对象1和对象2是兄弟关系
$("#id1").before($("#id2"));
7. insertAfter(),对象1.insertAfter(对象2)：将对象2添加到对象1后边。对象1和对象2是兄弟关系
$("#id1").insertAfter($("#id2"));
8. insertBefore()，对象1.insertBefore(对象2)： 将对象2添加到对象1前边。对象1和对象2是兄弟关系
$("#id1").insertBefore($("#id2"));
9. remove():移除元素,对象.remove():将对象删除掉
$("#id").remove();
10. empty():清空元素的所有后代元素,对象.empty():将对象的后代元素全部清空，但是保留当前对象以及其属性节点
$("#id").empty();
|