JavaScript和Jqurery的关系及使用详解

简单介绍

   JavaScript是NetScape公司为Navigator浏览器开发的，是写在HTML文件中的一种**脚本语言**，能实现**网页**内容的交互显示。当用户在客户端显示该网页时，浏览器就会执行JavaScript程序，用户通过交互的操作来改变网页的内容，来实现HTML语言无法实现的效果。Jqurery是对JavaScript的封装，使用更加简便。

dom回顾

1. document object model 文档对象模型

1. 程序运行 浏览器 会html代码 装载成一个树 document树

2. 节点

1. dom树:document

2. 元素:elements 比如：<a> <input> <p>等

3. 属性:attribute 比如：name id align 等

4. 文本节点:textNode

功能

1. document 对象:

1. 找元素->dom对象 (四种方式)

2. 动态创建元素,属性,文本节点

2. element

1. 获取自己的属性

1. dom.value

2. 改变自己的样式  

1. dom.style.xx

3. 添加孩子

1. 元素

2. 文本节点

4. 内部html源码

1. innerHTML

document找元素

1. var eDom =  document.getElementById("id值");

当前界面唯一

2. var eDomS =  document.getElementsByClassName("classname属性的值");

返回数组 ,可以通过角标去获取元素

3. var eDomS =  document.getElementsByName("name属性的值");

返回数组 ,可以通过角标去获取元素

4. var eDomS =  document.getElementByTagName("标签名");

5. 三大属性

1. id js

2. name 服务器

3. class css

创建元素

1. document.createElement("元素标签名");

document.createElement("a");

2. document.createAttribute("属性名");

3. document.createTextNode("字符串");

 var aElement = document.createTextNode('中国');

element

1. element.appendChid(节点);

2. element.removeChid(节点);

3. element.setAttribute("属性名","值");

JavaScript和jQuery的区别

1、转换 (有的人喜欢js,jq)

1. js转成jquery

通过js找到dom

转成jq对象

方式  $(dom);

2. jquery转成 js

通过jquery找jquery对象

转成js

get(0);

2、事件

1. js: onxxx

1. 内联   onclick(add());

2. 事件分配

* dom.onclick=fn;

2. jquery:所有的on去除

1. $jqObj.click(fn);

1. dom.onclick = fn;

3、加载DOM

JavaScript： window.onload 

function first(){ 

alert('first'); 

} 

function second(){ 

alert('second'); 

} 

window.onload = first; 

window.onload = second; 

只会执行第二个window.onload；不过可以通过以下方法来进行改进： 

window.onload = function(){ 

first(); 

second(); 

} 

Jquery： $(document).ready() 

$(document).ready(){ 

function first(){ 

alert('first'); 

} 

function second(){ 

alert('second'); 

} 

$(document).ready(function(){ 

first(); 

} 

$(document).ready(function(){ 

second(); 

} 

//两条均会执行 

} 

4、创建元素

JavaScript：

1. document.createElement("元素标签名");

2. document.createAttribute("属性名");

3. document.createTextNode("字符串");

JQuery：

$("<a></a>");

1.元素属性

JavaScript：

element.属性名

element.setAttribute("属性名","值");

element.removeAttribute("属性名","值");

JQuery：

  获取: $("").attr("属性名");

  设置: $("").attr("属性名","属性值");

$("").attr('属性名':'属性值','属性名':'属性值');

移除: $("").remove("属性名");

2. 为属性赋值 

JavaScript：

属性名.value = "属性值"; 

jQuery:

属性名.val("属性值");

3 .改变元素的内容 

JavaScript：

dom.innerHTML = ""; 

jQuery :

$jq.html();

$jq.text();

text : 获取普通文本 设置普通文本

html : 代码

5、获取元素

1.id

JavaScript： document.getElementById('idName') 

JQuery： $('#idName')

2. class

JavaScript： document.getElementsByClassName("className");

JQuery： $('.className') 

3.标签tag

JavaScript： document.getElementsByTagName('tagName') 

JQuery： $('tagName')

注意：

jQuery可以同时获取多个元素，同时操作多个元素

$("#id,.className，'tagName'");

6、删除节点 

JavaScript： 

element.removeChild(node) 

removeChild()方法将一个给定元素里删除一个子节点 

JQuery： 

remove(); 

remove()方法作用就是从DOM中删除所有匹配的元素，remove()方法还可以与其他的过滤选择器结合使用，非常方便。 

eg，将ul li下的title不是"Hello"的li移除： 

$('ul li').remove(li[title!='Hello']); 

empty();方法作用是清空节点。 

7、替换节点 

JavaScript： 

 element.replaceChild(newChild,oldChild) 

该方法是将一个给定父元素里的一个子节点替换为另外一个节点。 

JQuery： 

replaceWith()、replaceAll() 

8、CSS操作 

JavaScript： 

dom.style.backgroundColor="red";

JQuery： 

1. 获取: $().css("background-color");

2. 设置: $().css("background-color","red");

 显示/隐藏元素 

JS 

abc.style.display = "none"; 

abc.style.display = "block";

jQuery 

abc.hide(); 

abc.show();

abc.toggle();

滑动

1. slideUp

2. slideDown

3. slideToggle

淡入淡出

1. fadeIn

2. fadeOut

3. fadeToggle