简单介绍
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
