JQuery简介
- Jquery是一个js的框架(JSd1类库），对传统的js进行封装。
- 使用JQuery可以兼容各种游览器，方便的处理HTML、Events、动画效果等，方便的为网站提供AjAX交互。
- JQuery写法的简单性，易用性大大提升了人民对它的使用。
- 使用JQuery可以做到，html页面代码和控制的分离，彻底将控制代码放入一个单独的js文件。
- 使用JQuery需要引入JQuery的js文件，可以从https://jquery.com/下载
Jquery选择器
基本选择器
- 使用JQuery进行定位时注意语法的特点，“$”符号接小括号
- id 选择器：$("#id")
- 类选择器:$(.class)
- 元素选择器:$("元素名")
- 通配符选择器:$("*")
- 并列选择器:$("选择器，选择器，选择器")
层次选择器
后代选择器：使用空格，所有后代包含孙子以下的元素
子元素选择器：使用> 第一层的元素（儿子）
下一个元素： 使用+ 下一个同辈元素
兄弟元素：使用~ 后面所有的同辈元素
过滤选择器（过滤选择器以":" 或"[]"开始）
基本过滤选择器
内容过滤选择器
可见性过滤选择器
属性过滤选择器
表单选择器
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JQuery选择器</title>
<script src="Jquery.js"></script>
<script>
//初始化加载
window.onload=function(){
//基本选择器
var $div1 = $("#div1");//ID选择器
alert($div1.text());
var $div = $(".div");//class选择器
//alert($div.length);
var $div1 = $("div");//标签选择器
// alert($div.text());
//console.info($("*"));//所有选择器
$("#div1,.span").css("background-color","red");//并列选择器
//层次选择器
//console.info($("#div3 span"));//后代选择器
console.info($("#span2>span"));//直接子元素
console.info($("#span2+span"));//下一个兄弟元素
console.info($("#spa1~span"));//后面所有的兄弟元素
//过滤选择器
//1--基本过滤选择器
console.info($(":first"));
//2---将selected排除在外
console.info($("div:not('#div3')"));
//3---eq(i)/gt(i)/lt(i) 下标大于小于等于i
console.info($("div:eq(0)"));
console.info($("div:gt(0)"));
console.info($("div:lt(0)"));
//四，内容过滤选择器
//1---包含给定文本内容
console.info($(":contains('内联span2')"));
//2--匹配所有不包含子元素或文本的元素
console.info($(":empty"));
//3--匹配包含资源或文本的元素
console.info($(":parent"));
//<五、可见性过滤选择器
console.info($(":hidden"));//不可见元素
console.info(("visible"));//可见元素，
//属性过滤选择器
console.info($("div[class!=div]"));
//六】表单选择器
console.info($("input"));
console.info($(":text"));
console.info($(":submit"));
}
</script>
</head>
<body>
<div id="div1" class="div">我是div1</div>
<div id="div2" class="div">我是div2</div>
<span class="span">我是span1111</span>
<div id="div3">
<div>
<span id="span1" class="span">我是内联span1</span>
</div>
<span id="span2" class="span">我是内联span2</span>
<span id="span3" class="span">我是内联span3</span>
</div>
<div style="display: none" id="div4">111</div>
<form action="">
<input type="text" value="aaa"/>
<input type="password" value="123456"/>
<input type="submit" value="提交">
</form>
</body>
</html>
jQuery实现复选框全选全不选
<!doctype html>
<html lang=>
<head>
<meta charset="utf-8">
<title>复选框练习</title>
<script src="jQuery.js" ></script>
<script>
window.onload=function(){
//获得表格节点
var tab = document.getElementById("tab1");
//获得行
var l = tab.rows.length;
for(var i = 0;i < l;i++){
if(i % 2 == 0)
{
tab.rows[i].style.backgroundColor = "yellow";
}
else{
tab.rows[i].style.backgroundColor = "pink";
}
}
}
function checkAll(){
//获得表头行的复选框
var selectAll = $("#selectAll");
//获得表格体中的所有复选框
var ids = $("[name='ids']");
//判断总复选框是否被选中
if(selectAll.prop("checked")){
//获得表格体集合，全选
ids.prop("checked", true);
}else{
ids.prop("checked", false);
}
}
</script>
</head>
<body>
<center>
<h1>Js实现隔行换色</h1>
</center>
<table id="tab1" border="1" align="center" width="700px" height="200px">
<thead>
<tr>
<th><input type="checkbox" id="selectAll" onclick="checkAll()"></th>
<th>序号</th>
<th>学科</th>
<th>描述</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="ids"/></td>
<td>1</td>
<td>java</td>
<td>万物皆对象</td>
<td><a href="#">修改</a>|<a href="#">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" name="ids" /></td>
<td>2</td>
<td>php</td>
<td>php是最好的语言</td>
<td><a href="#">修改</a>|<a href="#">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" name="ids" /></td>
<td>3</td>
<td>Golang</td>
<td>Golang发展前景巨大</td>
<td><a href="#">修改</a>|<a href="#">删除</a></td>
</tr>
</tbody>
</table>
</body>
</html>
练习:使用jQuery实现表格隔行换色
表格隔行换背景颜色：tbody tr:odd 奇数行 tbody tr:even 偶数行
Js实现初始化加载:window.onload = function(){}
JQuery实现 : $(function()}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="jQuery.js"></script>
<script>
$(function(){
$("tr:odd").css("background-color", "pink");
$("tr:even").css("background-color","yellow");
});
</script>
</head>
<body>
<center>
<h1>js实现隔行换色</h1>
</center>
<table id="tab1" border="2px" align="center" height="200px" width="600px">
<tr style="background-color: yellow">
<th>序号</th>
<th>学科</th>
<th>描述</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>java</td>
<td>万事接对象</td>
<td><a href="#">修改</a>|<a href="#">删除</a></td>
</tr>
<tr>
<td>2</td>
<td>php</td>
<td>php是最好的语言</td>
<td><a href="#">修改</a>|<a href="#">删除</a></td>
</tr>
<tr>
<td>3</td>
<td>Golang</td>
<td>Golang发展前景巨大</td>
<td><a href="#">修改</a>|<a href="#">删除</a></td>
</tr>
</table>
</body>
</html>
jQuery事件和效果
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Jquery事件</title>
<script src="jQuery.js"></script>
<script>
//都属于编程事件，之前学习的属于标签事件<br>
$(function(){
//click 单击事件
$("#bt").click(function(){
alert("按钮被点击");
})
//hover 鼠标移入 /移出
$("#tx").hover(function(){
alert("鼠标移入");
},function(){
alert("鼠标移出");
})
//console 元素发生改变事件
$("#sel").change(function(){
console.info($(this).val());//this代表当前对象，当前是dom对象，所以需要转换为Jquery对象
})
//鼠标其他事件 $("#xx").事件名(function(){})
// $("input, select:visible").hide();// hide 隐藏
// $("span:hidden").show();//hidden 显示
//
//toggle 单击切换.jQ1.9以后就移除
/*$("#bt").toggle(function(){
alert("点击第一次");
},function(){
alert("点击第二次");
},function(){
alert("点击第三次");
} );*/
});
</script>
</head>
<body>
<input type="button" id="bt" value="按钮" />
<input type="text" id="tx" value="mary"/>
<select id="sel">
<option>选项一</option>
<option>选项二</option>
<option>选项三</option>
</select>
<span style="display: none">这里是span</span>
</body>
</html>