JQuery基础知识学习笔记

基础知识

一个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. 属性操作

通用属性操作
1. attr()：获取/设置元素的属性
2. removeAttr()：删除属性
3. prop()：获取/设置元素的属性
4. removeProp()：删除属性
attr和prop的区别：
1. 操作元素自定义属性，建议使用attr
2. 操作元素固有属性，建议使用prop

class属性操作

addClass()：添加class属性
removeClass()：删除class属性

toggleClass()：切换class属性

toggleClass("one")
//判断如果元素对象上存在class="one"，则将属性值one删除；如果不存在，则添加

3. CRUD操作

增删改查操作