jquery的元素操作

jQuery的属性操作

1. element.prop("属性名") 获取元素固有的属性值

element.prop("属性名","属性值") 设置元素固有属性值

2. 元素的自定义属性 我们通过 attr()

3. 数据缓存 data() 这个里面的数据是存放在元素的内存里面

<a href="http://ww.hao123.com"></a>
    <input type="checkbox" name="" id="" checked>
    <div index="1" data-index="2">我是div</div>
    <span>234</span>
    <script>
        
       console.log($('a').prop("href"));
       console.log($('a').prop("href","http://www.baidu.com"));
       $("input").change(function(){
        console.log($(this).prop("checked"));
       })
       console.log($("div").attr("index"));
       console.log($("div").attr("data-index"));
       $("span").data("name","lht")
       console.log($("span").data("name"));

内容文本值

1. 获取设置元素内容 html() 相当于原生的innerHTML

2. 获取设置元素文本内容 text() 相当于原生的innerText

3. 获取设置表单值 val() 相当于原生的value

<div>
        <span>内容</span>
    </div>
    <input type="text" value="请输入内容">
    <script>
        console.log($("div").text());
        console.log($("div").text("abc"));

        console.log($("input").val());
        console.log($("input").val("123"));

返回祖先元素

<div class="one">
        <div class="two">
            <div class="three">
                <div class="four">学好jquery</div>
            </div>
        </div>
    </div>
    <script>
        console.log($(".four").parent().parent().parent());
        console.log($(".four").parents());
        console.log($(".four").parents(".one"));
    </script>

遍历元素

jquery隐式迭代时对同一类元素进行相同的操作，如果要对同一类元素做不同的操作就需要进行遍历

.each() 方法遍历元素

$.each() 方法遍历元素 主要用于遍历数据，处理数据

遍历对象

 <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <script>
        $("li").each(function (i, domEle) {
            // 回调函数的锶一个参数 一定是索引号  名字自定义的
            console.log(i);
            // 第二个参数 一定是dom元素  名字也是自定义的  你注意：dom元素不能使用jq的方法
            console.log(domEle);
        })
        $.each($("li"), function (index, ele) {
            console.log(index);
            console.log(ele);
        })

        var obj = {
            name:"tom",
            age:18
        }
        $.each(obj, function(i,ele){
            console.log(i);//获取的是对象的属性名
            console.log(ele);//获取的是对象的属性值
        })
    </script>

创建添加删除元素

ul>
        <li>原先的li</li>
    </ul>
    <div class="test">我是原先的div</div>
    <script>
        //1、创建元素
        var li = $("<li>我是后来的li</li>");

        //2、添加元素
        //（1）内部添加  形成父子关系
        $("ul").append(li)//内部添加并且放到元素的最后面
        $("ul").prepend(li);//内部添加并且放到元素的最前面

        //（2）外部添加  形成兄弟关系
        var div = $("<div>我是后来的div</div>")
        // $(".test").before(div);
        $(".test").after(div);


        //3、删除元素
        // $("ul").remove()  //删除所有匹配的元素及内部元素  自杀
        $("ul").empty(); //删除匹配元素的子元素   孩子
        $("ul").html(""); //删除匹配元素的子元素   孩子

    </script>

元素大小

 // 1. width() / height() 获取设置元素 width和height大小 
        // console.log($("div").width());
        // console.log($("div").width(300));

        // 2. innerWidth() / innerHeight()  获取设置元素 width和height + padding 大小
        console.log($("div").innerWidth());

        // 3. outerWidth()  / outerHeight()  获取设置元素 width和height + padding + border 大小 
        console.log($("div").outerWidth());

        // 4. outerWidth(true) / outerHeight(true) 获取设置 width和height + padding + border + margin
        console.log($("div").outerWidth(true));

元素位置

 // 1、获取设置距离文档的位置（偏移）offset
        // 注意：父亲有没有定位不影响我的偏移值
        // $(".son").offset({
        //     left: 200,
        //     top: 200
        // })

        //2. 获取距离带有定位父级位置（偏移） position 
        //如果没有带有定位的父级，则以文档为准
        console.log($(".son").position());

事件处理

// 1. 单个事件注册
        // $("div").click(function () {
        //     $(this).css("backgroundColor", "blue")
        // })
        // $("div").mouseover(function () {
        //     $(this).css("backgroundColor", "purple")
        // })

        //2、on
        //on方法绑定一个或者多个事件处理程序
        // $("div").on({
        //     click: function () {
        //         $(this).css("backgroundColor", "blue")
        //     },
        //     mouseover: function () {
        //         $(this).css("backgroundColor", "purple")
        //     }
        // })

        $("div").on("mouseover mouseout", function () {
            $(this).toggleClass("current")
        })


        //实现事件委派（委托）
        // click 是绑定在ul 身上的，但是 触发的对象是 ul 里面的小li
        $("ul").on("click", "li", function () {
            console.log(11);
        })
        
        //给未来创建的元素绑定事件
        // $("ol li").click(function () {
        //     console.log(11);
        // })

        $("ol").on("click", "li", function () {
            console.log(11);
        })

        var li = $("<li>我是未来的元素</li>");
        $("ol").append(li)

事件解绑

 <script>
        $(function () {
            $("div").on({
                click: function () {
                    console.log("我点击了");
                },
                mouseover: function () {
                    console.log('我鼠标经过了');
                }
            });
            // $("div").off();//括号里没有参数 就是全部解绑
            $("div").off("click");//指定解绑某一个事件类型



            $("ul").on("click", "li", function () {
                alert(1)
            })

            // 解绑事件委托
            $("ul").off("click", "li")



            //one() 只能触发一次
            $("p").one("click", function () {
                console.log($("p").html());
            })


        })
    </script>
    <div></div>
    <ul>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
    </ul>
    <p>我是好人 </p>

自动触发事件

<div></div>
    <input type="text" value="111">
    <script>
        $("div").click(function () {
            console.log(11);
        }) 
        //1、元素.事件()
        $("div").click();

        //2. 元素.trigger("事件")  会触发元素的默认行为
        $("input").trigger("focus")

        //3. 元素.triggerHandler("事件") 就是不会触发元素的默认行为
        $("input").on("focus", function () {
            $("input").val("222")
        })

        // $("input").triggerHandler("focus")


    </script>