JS和jQuer引用方式
<!--引入jQuery文件-->
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<!--平时插入JS -->
<script type="text/javascript" ></script>
JS对象和jQuery对象互相转换
/* JS对象和jQuery对象
使用getElementsByXX得到的对象都是JS对象,只能用JS方法
使用$()得到的对象是jQuery对象,只能使用jQuery方法 */
$(function () {
/* JS对象 */
var h1 = document.getElementById("h2")
alert(h1.innerHTML);
/* jQuery对象 */
var h1 = $("#h2")
alert(h1.innerHTML);
alert(h1.html())
/* JS对象->jQuery对象 */
var h1 = document.getElementById("h2")
alert($(h1).html());
/* jQuery对象->JS对象
jQuery对象是一个数组,取出数组元素就是JS对象*/
var h1 = $("#h2")
alert(h1[0].innerHTML)
})
修改li列表里的样式
<ul>
<li>123456</li>
<li>123456</li>
<li>123456</li>
</ul>
通过两种方式修改鼠标放到 li标签 上时的样式
<!-- js方式 -->
<script type="text/javascript">
window.onload = function () {
var lis = document.getElementsByTagName("li");
for (var i = 0; i < lis.length; i++) {
lis[i].onmouseover = function () {
this.style.color = "skyblue";
};
lis[i].onmouseout = function () {
this.style.color = "black";
};
}
};
</script>
<!-- jQurey方式 -->
<style>
.bg {
color: blueviolet;
}
</style>
<script>
$(function () {
// 如果当前标签有class="bg",就去掉class属性
// 如果没有就加上class="bg"
$("li").mouseover(setcolor).mouseout(setcolor);
function setcolor() {
$(this).toggleClass("bg");
}
})
</script>