JQUERY
JQUERY
JS库
开发中会引入很多库
JQuery.js
React.js
Angular.js
Vue.js
文档就绪函数
当页面的文档部分加载完毕后，要执行的函数
//文档就绪函数
$(document).ready(function{
alert("213");
});
//简写
$(function(){
alert("124");
});过滤器选择器：
:first---获取第一个元素
: last---获取最后一个元素
:eq(index)---给定位置的元素
:gt(index)---大于给定位置
:lt(index)---小于给定位置
:not(selector)---除了selector以外的所有选择器
内容选择器
：emtoy:匹配不包含子元素的选择器
：paernt:含有子元素的父元素
事件
JQery追加
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="JQjs/jquery-1.9.1.js"></script>
<script src="JQjs/jquery-3.0.0.min.js"></script>
</head>
<body>
<div id="con">
</div>
<script>
/**
* appendTo():参数是一个JQuery
* prepareTo():在之前追加
* insertAfter():在div外部追加
* insertBeFore():在div之前追加
* replaceWith():替换
*/
$(()=>{
$("<p>456</p>").appendTo($("#con"));
})
//在内部的后面追加
$("#con").append($("<p>100</p>"));
$("#con").prepend($("<p>100</p>"));
$("#con").after($("<p>100</p>"));
$("#con").before($("<p>100</p>"));
//删除，清空标签内
$("#con").empty();
$("p").remove();
// eq等于lt小于gt大于
$("p:eq(1)").remove();
</script>
</body>获取更改属性
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="JQjs/jquery-1.9.1.js"></script>
<script src="JQjs/jquery-3.0.0.min.js"></script>
</head>
<body>
<div id="div1">
</div>
<input type="text " id=""user>
<input type="checkbox" id="c1" value="swim">1
<button id="check">全选</button>
<select name="" id="select">
<option value="1">1</option>
<option value="2">2</option>
</select>
<script>
$(()=>{
$("#div1").html("<p>123</p>");
// $("#div1").text("<p>123</p>");
$("user").val("666");
$("#check").click(()=>{
//$("input[type=checkbox]").val("swim");
//setAttribute和getAttribute
$("input[type=checkbox]").attr("value","sss");
//获取属性/更改属性
$("input[type=checkbox]").prop("checked","true");
$("input[type=checkbox]").val("swim","sss");
$("#select").prop("selected");
});
})
</script>
</body>
jquery操作css
<script>
$(()=>{
$("#id").click(()=>{
$("ids").addClass("css1 css2");
});
$("#id").click(()=>{
$("ids").removeClass("css css2");
});
// 添加或删除
$("#ids").click(()=>{
$("idd").toggleClass("css1 css2");
});
});
</script>
jquery动画
<script>
$(()=>{
// 隐藏
$("#tbn1").click(()=>{
$("#div1").hide(5000,()=>{
alert("123");
});
});
//显示
$("#tbn1").click(()=>{
$("#div1").show(5000,()=>{
alert("123");
});
});
//隐藏或显示
$("#tbn1").click(()=>{
$("#div1").toggle(5000,()=>{
alert("123");
});
});
});
</script>$(()=>{
//
$("#tbn1").click(()=>{
$("#div1").fadeOut(5000,()=>{
alert("123");
});
});
//
$("#tbn1").click(()=>{
$("#div1").fadeIn(5000,()=>{
alert("123");
});
});
//淡入淡出
$("#tbn1").click(()=>{
$("#div1").fadeToggle(5000,()=>{
alert("123");
});
});
// 透明度
$("#tbn1").click(()=>{
$("#div1").fadeTo(1000,0.2);
});
});$(()=>{
//
$("#tbn1").click(()=>{
$("#div1").slideUp(5000);
});
//
$("#tbn1").click(()=>{
$("#div1").slideDown(5000,);
});
//上拉下拉
$("#tbn1").click(()=>{
$("#div1").slideToggle(5000,()=>{
alert("123");
});
});
});
案例：
歌曲选择
查看代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="JQjs/jquery-1.9.1.js"></script>
<script src="JQjs/jquery-3.0.0.min.js"></script>
<script>
$(function(){
$("#checkAll").click(function(){
//$("input[type=checkbox]").attr("checked",true);
$("input[type=checkbox]").prop("checked",true);
})
$("#unCheckAll").click(function(){
//$("input[type=checkbox]").removeAttr("checked");
$("input[type=checkbox]").prop("checked",false);
})
$("#revBtn").click(function(){
$("input[type=checkbox]").each(function(){
this.checked = !this.checked;
});
})
$("#subBtn").click(function(){
var msg = "你选择的歌曲是：\r\n";
$("input[type=checkbox]:checked").each(function(){
msg+=$(this).val()+"\r\n";
});
alert(msg);
})
})
</script>
<style type="text/css">
.ss{
padding-left:40%;}
.s{
padding-left:30%;}
input{
width: 50px;
height: 50px;
border-radius: 20px;
}
</style>
</head>
<body>
<table border="2" width="600" style="border-collapse:collapse" align="center" bgcolor="#66FFCC">
<td>
<form>
<h2 align="center">歌曲选择</h2>
___________________________________________________________________________
<div align="left" class="ss"><input type="checkbox" name="hobby" value="海阔天空">1.海阔天空<br/><br/>
<input type="checkbox" name="hobby" value="起风了">2.起风了<br/><br/>
<input type="checkbox" name="hobby" value="蒲公英的约定">3.蒲公英的约定<br/><br/>
<input type="checkbox" name="hobby" value="星星失眠">4.星星失眠<br/><br/>
<input type="checkbox" name="hobby" value="夏天的风">5.夏天的风<br/><br/>
<input type="checkbox" name="hobby" value="青丝">6.青丝<br/><br/></div>
<div class="s">
<input type="button" id="checkAll" value="全选">
<input type="button" id="unCheckAll" value="全不选">
<input type="button" id="revBtn" value="反选">
<input type="button" id="subBtn" value="提交">
</div>
</form>
</td>
</table>
</body>
</html>
浙公网安备 33010602011771号