原生JS和jQuery操作DOM的区别 元素获取值 动画:

.e.target.value获取的就是你选择接受事件的元素输入的或者选择的值。

元素获取值 

 $("p").html()

 $("p").text()      $("p").val()   

设置样式

\

 $("p").css()  这种方法不能移除样式

 $("p").addClass()   $("p").removeClass()     hasClass  判断有没有这个样式

动画: 

 

$("p").show() /hide() 

slidedown()  slideup()      slideToggle()      滑进   

fadeIn()    fadeOut()   fadeToggle()   谈入

fadeTo(0.9,0.2)    控制透明度  fadeTo(1000,0.2) 第一个参数是时间

时间可以用单词表示   slow   比较慢   fast较快      normal正常

 第一个参数是时间  第二个参数是回调函数  动画结束后才执行

$("p").click(function(){

$("#div").hiden(5000,function(){}
)

})

animate函数

 

最后一个元素  img:last /first

元素会跑到左上角得

解决方法

链式编程

断链

解决方法

获取当前点击的索引值

获取下一个兄弟 元素$(this).next()        获取某个元素前一个元素prev()   获取某个元素后面所有兄弟元素nextAll()

所有兄弟元素  siblings()

dom中是nextSibling()

 

 

创建元素

append()  appendTo()    innerHtml()     prepend()   before   after()

以对象的方式创建

自定义属性

移除元素

html("")    empty()   remove()

 

判断是否存在

解决剪切问题

\

循环

对象

 

多库共存 (同一个页面引入多个jq文件,,或者

解决方法

dom对象和jQuery对象区别   

//1.dom对象.

//a.元生js的方法获取到的对象,就是dom对象.

//b.特点:只能调用dom的方法,不能调用jQuery的方法.

// var one = document.getElementById("one"); //dom对象.

// console.log(one);

// //one.style.backgroundColor = 'green';//调用dom的方法或者属性.可以的.

// //one.css('backgroundColor','green');//报错了,dom对象不能调用jQuery的方法. one.css is not a function
 

//2.jQuery对象.

//a.利用jQuery的选择器获取到的对象,就是jQuery对象.

//b.特点.只能调用jQuery的方法,不能调用dom方法.

// var $one = $('#one'); //jQuery对象. 规范:保存jQuery对象的变量用$符号开头.

// //$one.style.backgroundColor = 'green'; //报错了,因为jQuery对象不能调用dom的方法. Cannot set property 'backgroundColor' of undefined

// $one.css('backgroundColor','green'); //jQuery对象调用jQuery的方法.

 

//3.看看jQuery对象

//是一个伪数组.他里面的元素是一个个的dom对象.

//jQuery对象是dom对象的包装集.

// var $one = $('#one');

// console.log($one);

//

// var $divs = $('div');

// console.log($divs);

 

// $one.push();//没有报错,因为jQuery对象的原型自己定义了push()方法.

// $one.split();//报错了,因为伪数组没有split方法. $one.split is not a function

//console.log($one.__proto__ === Array.prototype);//false

 

//4.dom对象和jQuery对象之间的相互转换.

//4.1 dom对象如何转换成jQuery对象. "用钱转"

// var one = document.getElementById("one"); //dom对象.

// var $one = $(one);//把dom对象转换成jQuery对象

// console.log($one);

 

//4.2 jQuery对象如何转换成dom对象呢?

//a.使用下标取出.

/注意区分eq(index)是jQuery实例对象;

直接下标访问, $(DOM对象)[index];

// var $one = $('div');

// console.log($one);

// var one = $one[0]; //jQuery对象转换成dom对象

// console.log(one);

 

//b.使用jQuery对象的get()方法.

//本质上还是取下标.

var $one = $('div');

var one = $one.get(0); //jQuery对象转换成dom对象

console.log(one);

 

 

一.两者操作DOM的对比

一、创建元素节点

1.1 原生JS创建元素/文本节点

1 document.createElement("p");

1.2 jQuery创建元素/文本节点

1 $('<p></p>');

 

 

二、创建并添加文本节点

2.1 原生JS创建文本节点

1 `document.createTextNode("Text Content");

通常创建文本节点和创建元素节点配合使用，比如：

1 var textEl = document.createTextNode("Hello World.");
2 var pEl = document.createElement("p");
3 pEl.appendChild(textEl);

2.2 jQuery创建并添加文本节点：

1 var $p = $('<p>Hello World.</p>');

三、复制节点

3.1 原生JS复制节点:

1 var newEl = pEl.cloneNode(true); `
2 
3 true和false的区别：
   true ：克隆整个'<p>Hello World.</p>'节点
   false：只克隆'<p></p>' ，不克隆文本Hello World.'

3.2 jQuery复制节点

1 $newEl = $('#pEl').clone(true);

注意：克隆节点要避免`ID重复

 

 

四、插入节点

4.1 原生JS向子节点列表的末尾添加新的子节点

1 El.appendChild(newNode);

原生JS在节点的已有子节点之前插入一个新的子节点：

1 El.insertBefore(newNode, targetNode);

4.2 在jQuery中，插入节点的方法比原生JS多的多

在匹配元素子节点列表结尾添加内容

1 $('#El').append('<p>Hello World.</p>');

把匹配元素添加到目标元素子节点列表结尾

1 $('<p>Hello World.</p>').appendTo('#El');

在匹配元素子节点列表开头添加内容

1 $('#El').prepend('<p>Hello World.</p>');

把匹配元素添加到目标元素子节点列表开头

1 $('<p>Hello World.</p>').prependTo('#El');

在匹配元素之前添加目标内容

1 $('#El').before('<p>Hello World.</p>');

把匹配元素添加到目标元素之前

1 $('<p>Hello World.</p>').insertBefore('#El');

在匹配元素之后添加目标内容

1 $('#El').after('<p>Hello World.</p>');

把匹配元素添加到目标元素之后

1 $('<p>Hello World.</p>').insertAfter('#El');

五、删除节点

5.1 原生JS删除节点

1 El.parentNode.removeChild(El);

5.2 jQuery删除节点

1 $('#El').remove();

 

六、替换节点

6.1 原生JS替换节点

1 El.repalceChild(newNode, oldNode);

注意：oldNode必须是parentEl真实存在的一个子节点

6.2 jQuery替换节点

1 $('p').replaceWith('<p>Hello World.</p>');

 

七、设置属性/获取属性

7.1 原生JS设置属性/获取属性

1 imgEl.setAttribute("title", "logo");
2 imgEl.getAttribute("title");
3 checkboxEl.checked = true;
4 checkboxEl.checked;

7.2 jQuery设置属性/获取属性:

1 $("#logo").attr({"title": "logo"});
2 $("#logo").attr("title");
3 $("#checkbox").prop({"checked": true});
4 $("#checkbox").prop("checked");

注意: 如果原生的JS想利用jQuery操作DOM的方法,必须利用上面模块一列举的,把JS原生对象转成jQuery对象. 反过来也是.