jQuery学习笔记——基础
程序员文章站
2022-04-29 14:05:29
...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>jQuery</title>
</head>
<style>
.current{/* 需要添加的类 */
font-size:30px;
color:green;
}
</style>
<body>
<script src="http://code.jquery.com/jquery-1.12.4.js"></script><!-- 引用CDN的jQuery库 -->
<script src="js/jQuery-1.12.4.js"></script><!-- 引用本地的jQuery库 -->
<button onclick="Yellow()">黄色</button>
<button onclick="Blue()">蓝色</button>
<button onclick="Green()">绿色</button>
<button onclick="Pink()">粉色</button>
<h1 id = "id"></h1>
<p id = "p"></p>
<table border="1px" width="600" height="200">
<tbody>
<tr>
<td>姓名</td>
<td>入职企业</td>
<td>技术方向</td>
<td>试用期</td>
<td>转正</td>
</tr>
<tr>
<td>张三</td>
<td>公司A</td>
<td>java</td>
<td>5000</td>
<td>6000</td>
</tr>
<tr>
<td>李四</td>
<td>公司B</td>
<td>ui</td>
<td>6000</td>
<td>7000</td>
</tr>
<tr>
<td>王五</td>
<td>公司C</td>
<td>ui</td>
<td>4000</td>
<td>5000</td>
</tr>
<tr>
<td>赵六</td>
<td>公司D</td>
<td>ui</td>
<td>4000</td>
<td>5000</td>
</tr>
</tbody>
</table>
<ul>
<li>
<a href="">水果</a>
<div>
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>梨子</li>
<li>西瓜</li>
</ul>
</div>
</li>
<li>
<a href="">蔬菜</a>
<div>
<ul>
<li>西红柿</li>
<li>土豆</li>
<li>白菜</li>
<li>花椰菜</li>
</ul>
</div>
</li>
</ul>
<script>
$(document).ready($("tr:even").css("background-color","red"))//利用jQuery实现偶数行变色
//$(selector).action();
//$():工厂函数,将DOM对象转化为jQuery对象;
//selector:选择器,获取需要操作的DOM元素;
//.action:jQuery中提供的方法
var arr = document.getElementsByTagName("tr");//使用js实现奇数行变色
for(var i=0;i<arr.length;i++){
if(i%2 != 0){
arr[i].style.backgroundColor="yellow";
}
}
$(document).ready($("#id").html("hello jQuery"));//使用jQuery插入一条语句
document.getElementById("p").innerHTML = "hello javascript";//使用js插入一条语句
$(document).ready(function(){
$("tr").click(function(){//选中所有的tr元素,添加一个点击事件
$("td").addClass("current");//选中所有的td元素,再通过addClass向td元素添加一个类
});
})
function Yellow(){//修改html背景颜色
document.body.style.backgroundColor= "yellow";
}
function Blue(){
document.body.style.backgroundColor = "blue";
}
function Green(){
document.body.style.backgroundColor = "green";
}
function Pink(){
document.body.style.backgroundColor = "pink";
}
$(document).ready(function(){
$("#id").mouseover(function(){
//mouseover:鼠标触碰产生效果
$(this).css({"color":"red","font-size":"30px"});
}).mouseout(function(){
//mouseout:鼠标离开产生效果
$(this).css({"color":"black","font-size":"20px"});
})
});
$(document).ready(function(){
$("ul li").mouseover(function(){
$(this).children('div').show();//显示
}).mouseout(function(){
$(this).children('div').hide();//隐藏
})
});
</script>
</body>
</html>
下一篇： 什么东西那么可怕