jquery简单学习

Posted 2021-09-02 wangjinju77777

入门：

1.在官网中下载jquery
2.在html页面中引入,使用script标签对引入jquery
3.在html页面中使用jquery

使用:

 通过jquery实现隔行换色
先引入：

<script src="js/jquery-3.6.0.min.js"></script>
<script>
$(function (){
    /*获取所有的奇数行设置背景色*/
    ($("tr:odd").css("background","pink"));
    /*获取所有的偶数行设置背景色*/
    ($("tr:even").css("background","yellow"));
});
</script>

获取jquery包装集对象
     $("选择器")
     如果元素不存在,不会返回null,会返回空的query对象,根据length==0来判断是否获取成功

 获取jsDOM对象
     document.getElement....
     如果元素不存在,返回null,根据==null判断是否获取到DOM对象

 jsDOM对象转为jquery对象
     $(js对象)

 jquery对象转为jsDOM对象
     jq对象[索引]
     jq对象.get()

 注意:
     1.jsDOM对象与jq对象不能互相调用其方法
     2.jq的函数只能jq对象能够调用

<script src="js/jquery-3.6.0.min.js"></script>

<script>
    //DOM
    var js_obj = document.getElementById("box");
    console.log(js_obj);

    //jq
    var jq_obj = $("#box");
    console.log(jq_obj.length);

    //js-->jq
    console.log($(js_obj));

    //jq-->js
    console.log(jq_obj[0]);
    console.log(jq_obj.get(0));
</script>

jquery选择器:
 选中某个|组元素

 分类:
     基础选择器
         id选择器 #id $("#testDiv")选择id为testDiv的元素
         元素名称选择器 element $("div")选择所有div元素
         类选择器 .class $(".blue")选择所有class=blue的元素
         选择所有元素 * $("*")选择⻚⾯所有元素
         组合选择器 selector1,selector2,selectorN $("#testDiv,span,.blue")同时选中多个选择器匹配的元素

     层次选择器
         后代选择器 ancestor descendant $("#parent div")选择id为parent的元素的所有div元素
         ⼦代选择器 parent > child $("#parent>div")选择id为parent的直接div⼦元素
         相邻选择器 prev + next $(".blue + img")选择css类为blue的下⼀个img元素
         同辈选择器 prev ~ sibling $(".blue ~ img")选择css类为blue的之后的img元素

     表单选择器
        表单选择器 :input
        查找所有的input元素：$(":input")；
        注意：会匹配所有的input、textarea、select和button元素。
        ⽂本框选择器 :text 查找所有⽂本框：$(":text")
        密码框选择器 :password 查找所有密码框：$(":password")
        单选按钮选择器 :radio 查找所有单选按钮：$(":radio")
        复选框选择器 :checkbox 查找所有复选框：$(":checkbox")
        提交按钮选择器 :submit 查找所有提交按钮：$(":submit")
        图像域选择器 :image 查找所有图像域：$(":image")
        重置按钮选择器 :reset 查找所有重置按钮：$(":reset")
        按钮选择器 :button 查找所有按钮：$(":button")
        ⽂件域选择器 :file 查找所有⽂件域：$(":file")

     过滤选择器
     属性选择器:
        [属性名]包含这个属性的被选中
        [属性名="属性值"] 包含指定属性=指定值的元素被选中

/*基础选择器*/
/*id选择器*/
console.log($("#box"));
//元素名称选择器
console.log($("div"));
/*类选择器*/
console.log($(".red"));
/*通配符选择器*/
console.log($("*"));
//组合选择器
console.log($("#box,.red"));

//层次选择器
//后代选择器 : 所有满足条件的子元素
console.log($("body div"));
//⼦代选择器  : 满足条件的直接子元素
console.log($("body>div"));
//相邻选择器
console.log($(".item1+div"));
//同辈选择器
console.log($(".item1~div"));

/*表单选择器*/
console.log($(":input"));
//单选框
console.log($(":radio"));

//属性选择器
console.log($("[abc]"));
console.log($("input[abc]"));
console.log($("input[abc=123]"));

操作属性:
    分类:
        固有属性 : 标签提供的属性
            固有属性 : src,href...
            共有属性 : id,class,name...
        自定义属性 : abc  haha
        boolean属性 : checked selected  disabled

    区别: attr 与 prop
        1.attr可以操作固有属性,自定义属性
          prop只能操作固有属性
        2.attr 操作布尔属性(checked),得到的属性值为属性设置的值 checked = 'checked'
          prop 操作布尔属性(checked),得到的结果为true|false

    获取属性值
        attr(属性名称) 获取指定的属性值，操作 checkbox 时，选中返回 checked，没有选中返回 undefined。attr('checked')attr('name')
        prop(属性名称) 获取具有true和false两个属性的属性值 prop('checked')

    设置属性值
        attr(属性名称，属性值)设置指定的属性值，
            操作 checkbox 时，
            选中返回 checked，
            没有选中返回 undefined。
            attr('checked',’checked’)
            attr('name',’zs’)
    prop(属性名称，属性值) 设置具有true和false的属性值 prop('checked',’true

    移出属性
    removeAttr(属性名) 移除指定的属性 removeAttr('checked')

<script>
    //获取属性值
    //操作布尔属性
    console.log($("input[type='checkbox']:even").attr("checked"));  //checked
    console.log($("input[type='checkbox']:odd").attr("checked"));  //undefined
    console.log($("input[type='checkbox']:even").prop("checked"));  //true
    console.log($("input[type='checkbox']:odd").prop("checked"));  //false

    //固有属性
    console.log($("input[type='checkbox']:even").attr("value"));  //aaaa
    console.log($("input[type='checkbox']:odd").attr("value"));  //bbbb
    console.log($("input[type='checkbox']:even").prop("value"));  //aaaa
    console.log($("input[type='checkbox']:odd").prop("value"));  //bbbb

    //自定义属性
    console.log($("input[type='checkbox']:even").attr("haha"));  //hahahaha
    console.log($("input[type='checkbox']:odd").attr("haha"));  //hahahaha
    console.log($("input[type='checkbox']:even").prop("haha"));  //undefined
    console.log($("input[type='checkbox']:odd").prop("haha"));  //undefined

    //设置属性
    //设置默认选中
    //$("input[type='checkbox']:even").attr("checked","checked");
    //$("input[type='checkbox']:odd").prop("checked",true);

    //取消被选中状态
    //$("input[type='checkbox']:odd").prop("checked",false);
    //$("input[type='checkbox']:odd").prop("checked",null);

    $("input[type='checkbox']:odd").removeAttr("checked");
    $("input[type='checkbox']:odd").removeAttr("haha");
    $("input[type='checkbox']:odd").removeAttr("name");
</script>

操作元素样式

attr("class") 获取class属性的值，即样式名称
attr("class","样式名") 修改class属性的值，修改样式
addClass("样式名") 添加样式名称
css() 添加具体的样式
removeClass(class) 移除样式名称

操作元素内容：

html() 获取元素的html内容
text() 获取元素的⽂本内容，不包含html

html("html, 内容") 设定元素的html内容
text("text 内容") 设置元素的⽂本内容，不包含html

val() 获取元素value值
val("值") 设定元素的value值

html 与 text之间的区别:
  html可以识别纯文本,以及html标签结构
  text只能识别存储本

创建于添加
    创建元素
        $('创建内容')

    添加元素
        prepend(content) 在被选元素内部的开头插⼊元素或内容，被追加的 content 参数，可以是字符、HTML 元素标记。
        $(content).prependTo(selector) 把 content 元素或内容加⼊ selector 元素开头
        append(content) 在被选元素内部的结尾插⼊元素或内容，被追加的 content 参数，可以是字符、HTML 元素标记。
        $(content).appendTo(selector) 把 content元素或内容插⼊selector 元素内，默认是在尾部
        before() 在元素前插⼊指定的元素或内容:$(selector).before(content)
        after() 在元素后插⼊指定的元素或内容:$(selector).after(content)

    删除元素
        remove() 删除所选元素或指定的⼦元素，包括整个标签和内容⼀起删。
        empty() 清空所选元素的内容

    遍历元素
        $(selector).each(function(index,element)) :遍历元素
        参数 function 为遍历时的回调函数，
        index 为遍历元素的序列号，从 0 开始。
        element是当前的元素，此时是dom元素。

<script src="js/jquery-3.6.0.min.js"></script>
<style>
    #box{
        border : 3px saddlebrown dashed;
    }
</style>

<div id="box">
    <div class="item1">内容1</div>
    <div class="item2">内容2</div>
</div>

<script>
    //创建元素
    var ele = $('<p id="p1"><span>你好span</span>你好p1</p>');

    //添加元素
    //$("#box").prepend(ele);
    $("#box").prepend("<p>p2</p>");

    ele.prependTo($("#box"));

    $("#box").before("<div>box前面</div>");

    //删除元素
    //$("#box").empty();
    //$("#box").remove();

    //遍历所有div
    $("div").each(function (index,element) {
        console.log(index+'---->'+element);
        console.log($(element));
    });

</script>

1.ready 加载事件-> window.onload
    $(function(){})
    $(document).ready(function(){})

  window.onload : 待DOM结构,与资源全部加载完成之后触发
  ready  : 待DOM结构载完成之后触发
2.bind 绑定事件
    bind("事件名称",function(){
        触发函数
    })

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.6.0.min.js"></script>
    <script>
        /*js*/
        window.onload = function(){
            document.getElementById("btn").style.background = "red";
        }
        /*jq*/
        //1)
        $(function(){
            $("#btn").css("background","green");

            //bind
            /*$("#btn").bind("click",function(){
                alert("hahaha");
            })*/

            //链式绑定
            $("#btn").bind("click",function(){
                alert("hahaha");
            }).bind("mouseover",function(){
                console.log("移入");
            });

            $("#btn").bind({
                "click":function(){
                    console.log("点击事件");
                },
                "mousemove":function(){
                    console.log("移动了");
                }
            })
        })

    </script>
</head>
<body>
        <button id="btn" type="button">按钮</button>
        <img src="images/11.jpeg" alt="">

</body>
</html>

ajax 异步请求  *****

    $.ajax({ -> 配置请求的参数设置
        type : 请求方式 "GET|POST",
        url : "请求服务器的位置",
        data : 请求数据,
        dataType : 预期的服务器响应数据的类型 json,text,html,
        success : function(data){
            请求成功后的回调函数
            参数data: 服务器响应的数据
        },
        error : function(){
            请求失败后的回调函数
        }
    });

<button id="btn" type="button">按钮</button>
 <form action="">
     <input type="text" name="uname" value="zhangsan"> 用户名
     <input type="password" name="upwd" value="1234"> 用户密码
 </form>
<script>
     $("#btn").bind("click",function(){
         console.log($("form").serialize());
         $.ajax({
             type : "GET",
             url : "js/data.json",
             /*data : {
                 "name" : "zhangsan",
                 age : 18
             },*/
             data :$("form").serialize() , /*表单提交*/
             dataType : "JSON",
             success : function (data) {
                 console.log(data);
                 console.log(data.code);
                 console.log(data.message);
                 console.log(data.result);
             },
             error : function () {
                 console.log("请求失败!!!!");
             }
         });
         /*
         //GET : 请求json⽂件,传递参数,拿到返回值
         $.get('js/data.json',{name:"tom",age:100},function(data){
             console.log(data);
         });

         //POST : 请求json⽂件,传递参数,拿到返回值
         $.post('js/data.json',{name:"tom",age:100},function(data){
             console.log(data);
         });*/

         //响应结果固定为json
         /*$.getJSON('js/data.json',{name:"tom",age:100},function(data){
         console.log(data); // 要求返回的数据格式是JSON格式
         })*/
     });

</script>