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> <div>等

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.οnclick=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