例如： script src="http://ajax.googleapis.com/ajax/libs/jquery/
标签：
一、素质上的区别 1.JavaScript 是通过<script></script>标签插入到HTML页面，可由所有的现代浏览器执行的一种轻量级的编程语言。 2.JQuery是一个JavaScript函数库。或者说是JavaScript中最风行的一种框架。使用JQuery首先要在 HTML 代码最前面加上对 jQuery 库的引用，好比：
<script src="http://www.mamicode.com/js/jquery.min.js"></script>
库文件既可以放在本地，，也可以直接使用知名公司的 CDN，好处是这些至公司的 CDN 对照风行，用户访谒你网站之前很可能在访谒另外网站时已经缓存在浏览器中了，所以能加快网站的打开速度。此外一个好处是显而易见的，节省了网站的流量带宽。例如：
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> //Google
或者：
<script src="http://code.jquery.com/jquery-1.6.min.js"></script> //jQuery 官方
a.JavaScript使用
getElement系列、query系列
<body>
<ul> <li>哈哈</li> <li name ="na">啦啦</li> <li>呵呵</li> <li name ="na">嘿嘿</li> </ul> <div> <ul> <li>呵呵</li> <li>嘿嘿</li> </ul> </div> </body> <script> document.getElementById("first"); //是一个元素 document.getElementsByClassName("cls"); //是一个数组，即使只有一个元素，使用时需要用[0]取到第一个再使用 document.getElementsByName("na"); //是一个数组，即使只有一个元素，使用时需要用[0]取到第一个再使用document.getElementsByTagName("li"); //是一个数组，即使只有一个元素，使用时需要用[0]取到第一个再使用 document.querySelector("#div"); //是一个元素
document.querySelectorAll("#div li"); //是一个数组，即使只有一个元素，使用时需要用[0]取到第一个再使用
</script>
b.JQuery使用
大量的选择器同时使用$()包裹选择器
<body> <ul> <li>哈哈</li> <li name ="na">啦啦</li> <li>呵呵</li> <li name ="na">嘿嘿</li> </ul> <div> <ul> <li>呵呵</li> <li>嘿嘿</li> </ul> </div> </body> <script src="http://code.jquery.com/jquery-1.6.min.js"></script> <script>
//使用JQuery取到的是jquery东西都是一个数组，即使只有一个元素当选中,但是在使用时候不必然需要使用:eq(0)来拿到这一个在使用可以直接使用 $("#first"); $(".cls"); $("li type[name=‘na‘]"); $("li"); $("#div"); $("#div li"); </script>
2.操纵属性节点
a.JavaScript使用
getAttribute("属性名") 、 setAttribute("属性名","属性值")
<body> <ul> <li>哈哈</li> </ul> </body> <script> document.getElementById("first").getAttribute("id"); document.getElementById("first").setAttribute("name","nafirst");
document.getElementById("first").removeAttribute("name");
</script>
b.JQuery使用
.attr()传入一个参数获取，传入两个参数设置
.prop()
prop和attr一样都可以对文本的属性进行读取和设置；
两者的差别 在读取checked，disabled，等属性名=属性值的属性时
attr返回属性值或者undefined，当读取的checked属性时不会按照是否选中而转变
prop返回true和false 当读取的checked属性时会按照是否选中而转变
也就是说attr要取到的属性必需是在标签上写明的属性，否则不能取到
<body> <ul> <li>哈哈</li> </ul> </body>
<script src="http://www.mamicode.com/js/jquery.js"></script> <script> $("#first").attr("id"); $("#first").attr("name","nafirst");
$("#first").removeAttr("name"); $("#first").prop("id");
$("#first").prop("name","nafirst");
$("#first").removeProp("name"); </script>
3.操纵文本节点
a.JavaScript使用
innerHTML：取到或设置一个节点的HTML代码,可以取到css，以文本的形式返回
innerText：取到或设置一个节点的HTML代码，不能取到css
value:取到input[type=‘text‘]输入的文本
<body> <ul> <li ><span>嘿嘿</span></li> <li ><span>嘿嘿</span> </li> </ul> 姓名：<input type="text"> </body> <script> document.getElementById("serven_times").innerHTML; document.getElementById("serven_times").innerHTML = "<span style=‘color: #ff3a29‘>呵呵</span>"; document.getElementById("eight_times").innerText; document.getElementById("eight_times").innerText = "啦啦"; document.getElementById("input").value; </script>
b.JQuery使用
.html()取到或设置节点中的html代码
.text()取到或设置节点中的文本
.val()取到或设置input的value属性值
温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/31746.html
- 上一篇：php设计模式之单例实例代码
- 下一篇：04 ajax执行php并通报参数
![[转]Node.js中package.json中^和~的区别](/uploads/allimg/200519/054J34453_lit.png "[转]Node.js中package.json中^和~的区别")