原生js与jquery部分常用方法对比

获取dom元素

原生获取：

	- document.getElementsByName			//name获取
	- document.getElementsByTagName     // 标签名获取
	- document.getElementById,					// id获取
	- document.getElementByClassName		//类名获取
	- document.querySelector							//获取单个万能方法
	- document.querySelectorAll						//获取全部节点万能方法

jQuery获取：

基本选择器

- id选择器：$("#box")；
- class选择器：$(".box")；
- 标签选择器：$("p")
- 群组选择器：$("span,strong")
- 通用* ： $("*")    //选择所有元素

层级选择器

• 后代选择器：$(“body div”)
• 子代选择器：$(“body>div”)
• 相邻选择器：$("#box2+div")
• 兄弟选择器：$("#box2~div")

属性选择器

• 通过属性名选择：$(“div[id]”)
• 通过多属性名选择：$(“div[id][class]”)
• 通过属性值：$(“div[id=box1]”)

伪类选择器

• eq(n):获取n对应的下标元素：$(“div:eq(2)”)
• not除了：$(“div”).not("#box3")
• gt 大于：$(“div:gt(2)”)
• lt 小于：$(“div:lt(2)”)

内容选择器

• contains: 包含字符串
• has：包含dom元素
• empty：空元素

可见性选择器

• hidden：改变不可见元素的样式
• visible： 改变可见元素的样式

节点遍历

原生方法

根据层级关系访问（包含文本和元素）

		parentNode : 返回节点的父节点
		childNodes: 返回所有子节点集合，使用下标访问
		firstChild : 返回节点的第一个子节点
		lastChild：返回最后一个节点
		nextSibling: 下一个节点
		previouSibling: 上一个节点

层级关系访问元素节点

• fistElementChild :返回节点的第一个子节点
• lastElementChild: 返回节点的最后一个子节点
• nextElementSibling: 下一个节点
• previousElementSibling:上一个节点

jQuery方法

1. 兄弟间的遍历
   • next ： 下一个
   • nextAll：后面所有的
   • prev：上一个
   • prevAll：上面所有的
   • siblings([元素名称]):获取所有的兄弟元素
2. 子找父
   • parent：父元素
   • parents：沿着dom树一直向上查找
3. 父找子
   • find(‘子元素的标签名’)
   • chindren([子元素的标签名])

文本的读写

原生方法

输入框：value
dom元素：
	-  innerHTML: 打印当前标签的所有内容
	- innerText：打印当前标签的文本
	- outerHTML : 打印所有的标签和文本，包括自身

jQuery方法

// 函数特点：无参为读，有参为写

输入框内容：val()
dom元素内容：html();

事件

原生js

onclick
onmousemove
onmouseout
ondbclick
onmouseover

jQuery事件

click
mousemove
mouseout
mouseover
dbclick

jQuery属性的读写

// 属性
    attr:属性的读写
   // 读
    console.log($("#box").attr("id"));

    //写
    $("#box").attr("id", "yingyingying");

    //添加单个元素
    $("#box").attr("a", "heihei");

    //添加多个元素
    $("#box").attr({
        a: 1,
        b: 2,
        c: 3
    });

    prop
    if ($("input[type=checkbox]").prop("checked") == true) {
        console.log("跳转");
    } else {
        console.log("你没点对钩");
    }

jquery: css样式的读写

  $("#box").css({
        width: 100,
         height: 100,
         backgroundColor: "red"
     });

    //读
     console.log($("#box").css("width"));
    console.log($("#box").css(["width", "height", "backgroundColor"]));

offset相关属性

  //offset相关属性
    //a.元素的宽高
    // width:代表元素内容content
    //读
    console.log($("#box").width());
    //写
    $("#box").width(200);

    outerWidth:padding+border+content
    //读
     console.log($("#box").outerWidth());

    innerWidth:content+padding
     console.log($("#box").innerWidth());
     console.log($("#box").height());

    //b.left和top
     $("#box").css({
         left: 200
     });

    //offset自带绝对定位
    //写
     $("#box").offset({
         left: 200,
         top: 500
     });

    //读
     console.log($("#box").offset().left);
     console.log($("#box").offset().top);

    //------------------------------------------
    // scrollTop等价于
     document.documentElement.scrollTop || document.body.scrollTop
     window.onscroll = function() {
         console.log($(window).scrollTop());
     }

    // 返回顶端
     $("#btn").offset({
         top: 1000
     }).click(function() {
         $(window).scrollTop(0);
    });

    // index();返回当前元素在父元素的下标
    $("li").click(function() {
        console.log($(this).index());
    });

dom节点的操作

//增
// let oBox = $("

");
// oBox.html(666);
// let oBox = $(“

888

”);
// $(“body”).append(oBox);

//追加
// let oLis = $("<li>嘿嘿嘿</li>");
//尾插
// $("ul").append(oLis);
// oLis.appendTo($("ul"));

//头插
// $("ul").prepend(oLis);
// oLis.prependTo($("ul"));

//插在指定元素之前
// $("li").eq(1).before(oLis);
// oLis.insertBefore($("li").eq(1));

//插在指定元素之后
// $("li").eq(1).after(oLis);
// oLis.insertAfter($("li").eq(1));

//-----------------------------
// 删
// $("li").eq(1).remove();
$("li").eq(1).empty();