JQuery快速入门小结

最新推荐文章于 2024-08-09 02:16:38 发布

嘎啦给给

最新推荐文章于 2024-08-09 02:16:38 发布

阅读量221

点赞数

分类专栏：笔记文章标签： jquery

本文链接：https://blog.csdn.net/drug1910951117/article/details/106992390

版权

笔记专栏收录该内容

19 篇文章 0 订阅

订阅专栏

入门demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>快速入门demo</title>
</head>
<body>

    <!--1.编写html-->
    <span>我是一个span</span>
    <div id="div">我是一个div</div>
</body>

    <!--2.引入jquery文件-->
<script src="js/jquery-3.3.1.min.js"></script>
<script>

    //  3.使用jquery获取元素
    //获取元素
    let div = $("#div");
    //控制台打印内容
    console.log(div);
</script>
</html>

核心语法: $();

JQuery基本语法

JS 对象和 jQuery 对象转换

JS 的 DOM 对象转换成 jQuery 对象

$(JS 的 DOM 对象);
jQuery 对象转换成 JS 对象

jQuery 对象[索引];
jQuery 对象.get(索引);

事件的使用

在 jQuery 中将事件封装成了对应的方法。去掉了 JS 中的 .on 语法。
事件的绑定和解绑
- 绑定事件
  方式一: jQuery 对象.on(事件名称,执行的功能);
  方式二: jQuery 对象.事件名(function(){逻辑代码});
- 解绑事件
  jQuery 对象.off(事件名称);
  如果不指定解绑事件名称.则会把该对象绑定的所有事件都解绑

遍历

方式一：传统方式

for(let i = 0; i < 容器对象长度; i++){
执行功能; }
方式二：对象.each() 方法

容器对象.each(function(index,ele){
执行功能;
});
方式三：$.each() 方法

$.each(容器对象,function(index,ele){
执行功能;
});
for of 语句

for(ele of 容器对象){
执行功能; }

jQuery选择器

基本选择器
过滤器选择器
选择器小结
- 在jQuery 中选择器的语法：$();
- 基本选择器
  $(“元素的名称”);
  $("#id的属性值");
  $(".class的属性值");
- 层级选择器
  $(“A B”);
  $(“A > B”);
- 属性选择器
  $(“A[属性名]”);
  $(“A[属性名=属性值]”);
- 过滤器选择器
  $(“A:even”);
  $(“A:odd”);
- 表单属性选择器
  $(“A:disabled”);
  $(“A:checked”);
  $(“A:selected”);

jQuery DOM

操作文本
操作对象
操作样式
操作属性
操作属性常用方法

综合案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复选框</title>
</head>
<body>
    <table id="tab1" border="1" width="800" align="center">
        <tr>
            <th style="text-align: left">
                <input style="background:lightgreen" id="selectAll" type="button" value="全选">
                <input style="background:lightgreen" id="selectNone" type="button" value="全不选">
                <input style="background:lightgreen" id="reverse" type="button" value="反选">
            </th>
    
            <th>分类ID</th>
            <th>分类名称</th>
            <th>分类描述</th>
            <th>操作</th>
        </tr>
        <tr>
            <td><input type="checkbox" class="item"></td>
            <td>1</td>
            <td>手机数码</td>
            <td>手机数码类商品</td>
            <td><a href="">修改</a>|<a href="">删除</a></td>
        </tr>
        <tr>
            <td><input type="checkbox" class="item"></td>
            <td>2</td>
            <td>电脑办公</td>
            <td>电脑办公类商品</td>
            <td><a href="">修改</a>|<a href="">删除</a></td>
        </tr>
        <tr>
            <td><input type="checkbox" class="item"></td>
            <td>3</td>
            <td>鞋靴箱包</td>
            <td>鞋靴箱包类商品</td>
            <td><a href="">修改</a>|<a href="">删除</a></td>
        </tr>
        <tr>
            <td><input type="checkbox" class="item"></td>
            <td>4</td>
            <td>家居饰品</td>
            <td>家居饰品类商品</td>
            <td><a href="">修改</a>|<a href="">删除</a></td>
        </tr>
    </table>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    //全选
    $("#selectAll").click(function(){
        $(".item").prop("checked",true);
        //$(".item").attr("checked",true);
    });
    //全不选
    $("#selectNone").click(function(){
        $(".item").prop("checked",false);
    });
    //反选
    $("#reverse").click(function(){
        let items = $(".item");
        items.each(function(){
            $(this).prop("checked",!$(this).prop("checked"));
        });
    });
</script>
</html>