jquery——dom元素

一、jquery简介

        Jquery：是一个轻量级的js函数库，是开源的框架库。
1.所需基础知识：HTML和css
2.包括功能：（1）html元素选取
                       （2）html元素操作
                       （3）html事件函数
                       （4）html DOM遍历和修改
                       （5）css操作
                       （6）js特效和动画
                       （7）AJAX
                       （8）大量插件
3.引入方式：和webjs引入方式一致
（其中引入jquery库）
4.注意：（1）js和jquery可以混合使用
               （2）可以写加载事件也可以不写
               （3）$:为顶级变量，类似jquery对象

二、DOM元素

1.获取DOM元素方法

（1）*获取所有对象元素
（2）tagname获取
（3）id获取
（4）class获取
（5）>获取
（6）空格获取
（7）混合使用

代码如下：

按钮
按钮


    
1
    
2
    
3
    
4
    
5
    
6

篮球

注意： jquery选择器：可使用css1、css2、css3选择器来获取元素

选择器：

：focus  获得焦点元素
  first、last:获取第一个或最后一个
：not  除了not的那一项，获取其他的
：even  偶数获取元素
：odd  奇数获取元素
：eq  根据索引获取元素
：lt/:gt  获取索引小于/大于某一个数的元素
：has  获取当前的元素里面必须的谁
：parent  获取的元素必须有子集  元素 或者文本
：nth-child(3)  根据序号获取元素
  checked  匹配checkbox  radio  被选择元素等。

2.动态创建DOM元素

创建的元素显示到界面——appendchild

jquery追加 包裹方法 ：

• 追加方法：

（1）append appendTo 追加到当前元素的内容之后

（2）prepend prependTo 追加到当前元素的内容之前 

（3）after before 追加到当前元素之后或之前

（4）insertafter insertbefore 追加到当前元素之后或之前 

• 包裹的方法 

（1）wrap 包裹当前匹配元素

（2）unwrap * unwrap 移除当前匹配元素的包裹元素 

（3）wrapAll 将所有匹配元素用一个包裹 

（4）wrapInner 用标签包裹匹配元素的内容 * * * replaceWith 用元素替换匹配元素 * replaceAll 写法颠倒

清空当前匹配元素的所有内容 empty
remove() 移除元素

动态创建代码如下：

3.操作DOM元素

jquery操作dom元素的属性和方法：
jquery可以进行隐式迭代
（1）设置元素的文本值innerHTML、innerTEXT
html/text:获取或设置元素的文本或HTML值
代码示例中有
（2）根据索引获取元素eq(index)
（3）获取或设置元素值val()
（4）给元素添加类addClass()
（5）给元素移除类名称removeClass()
（6）类别的切换toggleClass()

• 设置属性的方法：

（1）attr("id","user")//设置属性
id:参数

user:值

           remove(id)/remove(user) // 移除属性

• 一次性设置多个属性：

$("input").attr({
id:
"data-list"：
})
注意：一次性可以设置多个属性，但一次性只能获取一个属性

（2）prop(name|properties|key,value|fn)设置属性
name:属性名称

properties：属性名/值对对象

key,function(index,attr)

• 属性名称
• 返回属性值的函数，第一个参数作为当前元素的索引值，第二个参数为原先的属性值

注意：jquery操作css:可一次性设置多个属性，不可一次性获取多个属性。
对象.style

代码如下：

        //获取或设置元素值   val()
        $("input").val("321");

        //给元素添加类  addClass
        $("input").addClass("txt txt1");
        //给元素移除类名称 removeClass
        $("input").removeClass("txt1");

        //类别的切换 toggleClass  有则删没有则加
        $("input").toggleClass("txt");

        //设置属性的方法 attr 参数1  名称  参数2  值  设置或者获取
        $("input").attr("id", "user");
        console.log($("input").attr("id"));
        $("input").attr("data-user", "maodou");
        console.log($("input").attr("data-user"));

        //移除属性
        $("input").removeAttr("id");
        $("input").removeAttr("data-user");
        $("input").removeAttr("class");

        // 一次性设置多个属性
        $("input").attr({
            id: "username",
            "data-list": "list"
        });

        //prop  设置属性  获取
        console.log($("input[type=checkbox]").prop("checked"));
        //$("input[type=checkbox]").prop("checked", true);
        $("input[type=checkbox]").prop("checked", function (index, value) {
            console.log(index);
            return !value;
        });
        $("input[type=checkbox]").prop("id", "checked");
        $("input[type=checkbox]").removeProp("id");

        //css()  设置或者获取元素的样式  设置一个或者多个
        //$("#block").css("border","1px solid black");
        $("#block").css({
            width: "100px",
            height: "100px",
            border: "1px solid black",
            backgroundColor: "red"
        });
        console.log($("#block").css("backgroundColor"));
        console.log($("#block").css("border"));

        //offest  //获取当前的相对偏移量   返回值是对象  left top
        console.log($("#block").offset());
        console.log($("#block").position());
        //scrollTop  当前元素 相对滚动条到顶部的距离 （谁有滚动条就谁）  y
        //scrollLeft 当前元素 相对滚动条到左边的距离 （谁有滚动条就谁）  x
        console.log($(window).scrollTop());