day23-Js-jQuery简单使用
一、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)">标题1</h1> <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>jQuery</title> <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">标题1</h1> <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("<div>" + value + "</div>");
appendTo：要新添加的元素放在前面，要添加到的目标放在后面
$("<div>" + value + "</div>").appendTo(".s_show");
