js的描述

 jq的调用：

    在script中使用$符号获取对象

<script>

    var box1=document.getElementById("box");

    var box=$("box");

</script>

获取jq包装选择器：

    $("选择器")

如果元素不存在，不会返回null，会返回空的query对象，根据length==0来判断是否获取成功

获取jsDom对象

    document,gerElement.....

    如果元素不存在，返回null，根据==null判断是否获取到DOM对象

jsDOM对象转为jq对象  ：$(js对象)

jq对象转为jsDOM对象

jq对象[索引]

jq对象.get()

注意：

    1.jsDOM对象与jq对象不能互相调用其方法

    2.jq的函数只能jq对象能够调用

调用jq的包：在script中使用src调用src="../jquery-3.6.0.min.js"

//DOM

var js_obj=document.getElementById("box");

console.log(js_obj);

//jq

var jq_obj=$("#box");

console.log($(js_obj.length));

//jq->js

console.log(jq_obj[0]);

console.log(jq_obj.get(0));

//js-->jq

console.log($(js_obj));

jq选择器：选中某个|组元素

分类：基础选择器：

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子元素

相邻选择器：parent  + next $(".blue+img")选择css类为blue的下一个img元素

同辈选择器：prev~sibling $(".blue~img")选择css类为blue的之后的img元素

表单选择器

过滤选择器

属性选择器

  <script>

        /*基础选择器*/

        /*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"));

    </script>

表单选择器;

表单选择器 :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")

    属性选择器:

        [属性名]包含这个属性的被选中

        [属性名="属性值"] 包含指定属性=指定值的元素被选中

    过滤选择器:

<script>

//表单选择器

console.log($(":input"));

//单选框

console.log($(":radio"));

//属性选择器

console.log($("[abc]"));

console.log($("input[abc]"));

console.log($("input[abc=123]"));

</script>

操作属性：

分类：固有属性：标签提供的属性

          固有属性：src，href.....

          共有属性：id,class,name.....

自定义属性：abc  jianmo

区别：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')

操作样式：

attr("class")获取class属性的值，即样式名称

attr("class","样式名")修改class属性的值，修改样式

addClass("样式名")添加样式名称

css()添加具体的样式

removeClass(class)移除样式名称

<script>

console.log($("#id名").attr("class"));

//addClass

$("#id名").addClass("weight");

//添加指定属性，如果原标签中已经存在，覆盖原有的值列表

//$("#ci=onBlue").attr("class","weight");

$("#conBlue").removeClass("larger");

$("#conBlue").css("font-style","italic");

</script>

操作元素内容：

html()获取元素的html内容

text()获取元素的文本内容，不包括html

html("html,内容") 设定元素的html内容

text("text 内容")设置元素的文本内容，不包括html

val()获取元素value值

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

html与text之间的区别：

html可以识别纯文本，以及html标签结构

text只能识别纯文本

<script>

//操作纯文本

$("#id名").html("你好html");

$("#id名").text("你好text");

//带有html标签结构

$("#id名").html("<h3 style='background:salmon'>你好你好你好：html</h3>");

$("#id名").text("<h3 style='background:salmon'>你好你好你好：text</h3>");

comsole.log($("#title").html());

console.log($("#title").text());

$("[type='text']").val("你看啥？？");

console.log($("[type='text']"));

</script>

创建与添加

创建于添加

            创建元素

                $('创建内容')

            添加元素

                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>

        //创建元素

        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(){

                触发函数

            })

<button id="btn" type="button">按钮</button>

<img src="图片地址" alt="">

<!--在head里面-->

<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>