基础知识
一个JavaScript的框架，简化JS的开发
js对象与JQuery对象相互转换
JQuery对象在操作时更加方便，但js对象和JQuery对象方法不通用
故，两者之间相互转换
-
jq --> js：
jq对象[索引] jq对象.get(索引) -
js --> jq
$(js对象)
事件绑定
<body>
<input type="button" value="按钮" id="b1">
<script>
//获取id为b1的元素，给b1按钮添加事件
$("#b1").click(function () {
alert("dianji");
});
</script>
</body>
JQuery入口函数
dom文档加载完成后执行该函数中的代码
当script标签在元素标签之前时，函数不能正常执行，如下
<head>
<script>
//获取id为b1的元素，给b1按钮添加事件
$("#b1").click(function () {
alert("dianji");
});
</script>
</head>
<body>
<input type="button" value="按钮" id="b1">
</body>
在js中，利用window.onload，在页面加载完成后，执行function中的代码
window.onload = function () {
}
在JQuery中
<head>
<script>
$(function () {
//获取id为b1的元素，给b1按钮添加事件
$("#b1").click(function () {
alert("dianji");
});
});
</script>
</head>
<body>
<input type="button" value="按钮" id="b1">
</body>
window.onload 与 $() 的区别：
- window.onload只能定义一次，多次的话，后面的函数会覆盖前面的；$()可以多次定义
样式控制
<script>
//样式控制
$(function () {
$("#div1").css("backgroundColor","pink");
});
</script>
选择器
用来获取元素对象
1. 基本选择器
//标签选择器（元素选择器）
$("html标签名")
//id选择器
$("#id属性值")
//类选择器
$(".class属性值")
//并集选择器
$("选择器1,选择器2,...")
2. 层级选择器
//子选择器，选择A元素内的所有子元素B
$("A > B")
//后代选择器，选择A元素中的所有B元素
$("A B")
3. 属性选择器
//属性名称选择器，A标签下，包含指定属性的选择器
$("A[属性名]")
//属性值选择器，A标签下，指定属性等于指定值的选择器
$("A[属性名 = '值']")
$("A[属性名 != '值']")//不等于指定值
$("A[属性名 ^= '值']")//以...开始的A元素属性值
$("A[属性名 $= '值']")//以...结束的A元素属性值
$("A[属性名 *= '值']")//包含...的A元素属性值
//复合选择器,包含多个属性条件的选择器
$("A[属性名 = '值'][属性名 = '值']...")
4. 过滤选择器
//首元素选择器，获取第一个div元素
$("div:first")
//尾元素选择器，获取最后一个div元素
$("div:last")
//非尾元素选择器，选择不包含class为one的div元素
$("div:not(.one)")
//偶数选择器，选择第偶数个div元素，索引从0开始
$("div:even")
//奇数选择器，选择第奇数个div元素，索引从0开始
$("div:odd")
//等于索引选择器，选择第index个div元素，索引从0开始
$(div:eq(index))
//大于索引选择器，选择索引大于第index的div元素，索引从0开始
$(div:gt(index))
//小于索引选择器，选择索引小于第index的div元素，索引从0开始
$(div:lt(index))
//标题选择器，选择<h1>到<h6>的元素
$(":header")
5. 表单过滤选择器
//可用元素选择器
$("input[type = 'text']:enabled")
//不可用元素选择器
$("input[type = 'text']:disabled")
//选中选择器
$("input[type='checkbox']:checked")
$("多选下拉框 > option:selected")
DOM操作
1. 内容操作
- html()：获取/设置元素的标签体内容（包含标签）
- text()： 获取/设置元素的标签体纯文本内容
- val()： 获取/设置元素的value值
2. 属性操作
-
通用属性操作
- attr()：获取/设置元素的属性
- removeAttr()：删除属性
- prop()：获取/设置元素的属性
- removeProp()：删除属性
attr和prop的区别：
- 操作元素自定义属性，建议使用attr
- 操作元素固有属性，建议使用prop
-
class属性操作
-
addClass()：添加class属性
-
removeClass()：删除class属性
-
toggleClass()：切换class属性
toggleClass("one") //判断如果元素对象上存在class="one"，则将属性值one删除；如果不存在，则添加
-
3. CRUD操作
增删改查操作
