一、js
1、js全名JavaScript 是一种弱类型的脚本语言，不需要编译直接在浏览器中运行。
2、js的简单使用 - 获取节点
常用的有下列方法：
- getElementById() 通过标签的Id属性来获取，得到一个具体的节点。
- getElementsByClassName() 通过标签的class属性来获取，返回所有匹配的节点，得到一个节点的数组，要按下标取出。
- getElementByTagName() 通过标签名来获取，返回所有匹配的节点，得到的也是一个所有匹配节点的数组。
var divNode = document.getElementsByTagName("div")[0];//根据标签名获取节点 var h1Node = divNode.childNodes[0]; //获取孩子节点，默认获得是一个text节点。默认空白地方是text节点的。 var h1Node = divNode.childNodes[1]; //这个才是h1节点。 console.log(typeof(h1Node111))//调用浏览器的控制台，可以输出信息
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<div id="div1">
<h1 onclick="changeColor(this)">标题1h1>
<p class="pClass" onclick="changeColor(this)">
段落
p>
div>
<script type="text/javascript">
var divNode = document.getElementsByTagName("div")[0];
var h1Node = divNode.childNodes[0]; //获得是一个text节点。默认空白地方是text节点的。
var h1Node = divNode.childNodes[1]; //这个才是h1节点。
console.log(typeof(h1Node111))//调用浏览器的控制台，可以输出信息
var i = 0;
/*声明一个数组*/
var color = [
"red",
"yellow",
"pink"
];
/*往数组中添加一个元素*/
color.push("orange");
/*定义一个方法 动态改变节点文字的颜色*/
function changeColor(node) {
if(i >= color.length) {
i = 0;
}
node.style.color = color[i++];
}
script>
body>
html>
上述代码可以实现一个点击事件，改变字体颜色的效果。
二、JQuery
（1）jQuery 是对js的一个轻量级的封装的库，给原生的js封装好了，更加简便，写的代码更少。
（2）JQuery格式：
- 在head中使用： $( function() { 代码 } ) ，这其实就是等待页面加载完毕后，再来运行这个代码（因为Html代码是从上往下加载的）。
- 获取节点 ：$( " 选择器 " ) 比如 $( " #div1 ") 就获取到了id为div1的那个节点，跟css中的选择器的写法一致，三种常见的选择器写法都ok。
（3）操作元素
通过jQuery获取到节点后，就可以操作节点了，一些写法比原生js更加简单。
- 比如获取节点中的文本内容，直接获取节点后，使用html( )方法，不传参数获取原来的值，传递参数修改原来的值
$("#div1").html() ---->获取到了div1中的文本内容
$("#div1").html("Hello") ---->修改了div1中的文本内容为Hello
- 更改节点的css属性 直接获取节点后，使用css( ) 方法，可以更改一个属性的值，也可以一次更改多个属性的值。
$(".class1").css("color","red") ----->传递俩参数，一个属性名，一个属性值。
$(".class1").css({"color":"red","height":"20px"}) ----->传递任意参数，以键值对的形式写入，键值之间冒号连接，每对之间逗号隔开。一次可以修改多个属性的值
- 绑定事件。常用click事件的绑定
写法一：直接点对应的事件名称。-----> $("selector").click( function() { 方法体 } )
$("span").click(function(){
//要执行的代码
$("span").css("color","red"); //表示点击后颜色改变红色
})
写法二：通用写法，可以作可变的参数传递等 ----> $(" selector").on( " 事件名称 ",function() { 方法体 }) 事件名称可以改变的，可做动态传入等
$("span").on("click",function(){
// 设置span为块级标签
$("span").css("display","block");
//修改css属性值
$("span").css("color","red");
// 设置块级标签后就可操作了 定义宽高等等
$("span").css({"height":"50px","width":"300px","background-color":"pink"})
})
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuerytitle>
<script src="js/jquery-1.7.1.min.js" type="text/javascript" charset="utf-8">script>
<script type="text/javascript">
$(function() {
/*匹配元素 写法跟css 选择器类似 id选择器 类选择器 标签选择器*/
$("#h1Id").css({
"font-size": "80px"
});
$(".h1Class").css("color", "red")
})
$(function() {
$(".h1Class").click(function() {
alert($("h1.h1Class").html("Hello"));
})
})
$(function() {
$("#div1 #pid").click(function() {
// $("#div1 #pid").css("font-size","20px");
$("#div1 #pid").css({"font-size":"50px","color":"red"})
})
})
$(function(){
$("span").on("click",function(){
// 设置span为块级标签
$("span").css("display","block");
$("span").css("color","red");
// 设置块级标签后就可操作了 定义宽高等等
$("span").css({"height":"50px","width":"300px","background-color":"pink"})
})
})
script>
head>
<body>
<h1 id="h1Id" class="h1Class">标题1h1>
<div id="div1">
<p id="pid">段落p>
<span>
我是文字
span>
div>
body>
html>
三、js - jQuery 之间转换
1、通过jQuery获得的是一个jQuery对象 要想获得每一个元素并且操作它，就要将jQuery对象转成Dom对象（jsd对象）
2、jQuery -----> js ：jQuery对象[0] 对获得的jQuery对象 取下标为0，就获得了Dom对象
3、js ------> jQuery ： var node = $(Dom对象);
四、jQuery操作元素的方法
html( ) ----> innerHtml
val() -----> value
attr("xxx") --> 取某个xxx属性的值
attr（"xxx","yyy"）---> 修改xxx属性的值为yyy
show：将元素显示，第一个参数为经历的时间(毫秒)，第二个参数为回调函数(即结束后执行的方法)
toggle：可以实现在自定义的两个方法间切换，不指定函数直接使用时可用于切换显隐操作，参数为经历的时间(毫秒)
$(".btn,.s_close").click(function() {
$(".screen").toggle("slow");
});
动画函数：对于同一个元素：动画以队列的方式执行，可以控制立即结束一个动画，或者等待当前动画执行完毕后再执行下一个动画
-
animate:第一个参数为最终要达到的效果(js对象表示)，第二个参数为经过的时间(毫秒)，第三个参数为回调函数(即动画结束后执行的方法)
$(this).animate({left:"-"+_left+"px"},2000,function(){
// 方法体
});
五、元素的添加
在jQuery中也可以使用字符串拼接的方式生成一个具有标签的元素
append() 和 appendTo()
append：要新添加的元素放在后面，要添加到的目标放在前面
$(".s_show").append("
" + value + "");
appendTo：要新添加的元素放在前面，要添加到的目标放在后面
$("
" + value + "").appendTo(".s_show");