jQuery

最新推荐文章于 2023-07-07 14:28:52 发布

「已注销」

最新推荐文章于 2023-07-07 14:28:52 发布

阅读量314

点赞数

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

本文链接：https://blog.csdn.net/u014017580/article/details/70936684

版权

jquery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

jQuery基础选择器

层次选择器

索引选择器

内容选择器

可见性选择器

属性选择器

表格列选择器

No.	选择器	描述	返回类型
1	：nth-child(eq\even\odd\index)	选择制定列中的所有元素，可以使用列的索引，全部偶数索引、全部奇数列索引来完成、需要注意的是：这个列的索引是从1开始	元素集合
2	：first-child	取得表格行的首列	元素集合
3	：last-child	取得表格行的尾列	元素集合
4	：only-child	取得只有一个子元素的父元素	元素集合

表单选择器

NO	选择器	描述	返回类型
1	：input	取得所有的输入组件对象。如text、radio	元素组合
2	:text	取得所有的文本输入框元素	元素集合
3	：password	取得所有的密码输入组件	元素集合
4	：radio	取得所有的单选框	元素集合
5	：CheckBox	取得所有的复选框	元素集合
6	：button	取得所有的按钮	元素集合
7	：submit	取得所有的提交按钮	元素集合
8	：reset	取得所有的重置按钮	元素集合
9	：file	取得所有的上传组件	元素组件
10	：image	取得图片按钮	元素集合
11	：hidden	取得所有的隐藏域	元素集合

DOM操作函数

事件选择

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery练习</title>
<script type="text/javascript" src="jquery/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
    $(function() {
        $("button[id^='dept']").each(function(){
            $(this).on("click",function(){
                deptno=this.id.split("-")[1];
                $("#dept-"+deptno).text("新部门-"+deptno);
            });
        });
    })
</script>
</head>
<body>
    <div>
        <span id="dept-1">部门1</span>：
        <button id="dept-1">编辑</button>
        <br> <span id="dept-2">部门2</span>：
        <button id="dept-2">编辑</button>
        <br> <span id="dept-3">部门3</span>：
        <button id="dept-3">编辑</button>
        <br>
    </div>
</body>
</html>

Ajax处理

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery练习</title>
<script type="text/javascript" src="jquery/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
    /*
    $(function() {
        $(sendBut).on("click",function(){
            $.ajax({//这里面需要将所有要发送的数据以JSON的形式发送
                url : "echo",
                method : "post",
                data : {
                    name : "hello",
                    msg : "你好"
                },
                dataType : "text" ,
                success : function(){
                    console.log("操作处理成功，" );
                },
                error : function(){
                    console.log("操作失败");
                },
            });
        });
    })
     */
    $(function() {
        $(sendBut).on("click", function() {
            $.get("echo", {
                name : "hello",
                msg : "你好"
            }, function(data) {
                console.log(data);
            }, "text");
        });
    })
</script>
</head>
<body>
    <div id="myDiv"></div>
    <button id="sendBut">回应</button>
</body>
</html>