目录
看不懂就跟着敲一遍，一遍不行就敲两遍（基本用法都在注释里）
JQuery :是js的封装
jQuery 是一个 JavaScript 库。
jQuery 极大地简化了 JavaScript 编程。
jQuery 很容易学习
JQuery如何使用
(1)将.js类库引入（jquery包必须要添加进去才可以使用jquery里）
(2)jq代码需要写在一个script标签里
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--导入jquery包-->
<script src="js/jquery-1.9.1.js"></script>
<script>
$(document).ready(function(){
alert("jquery第一种声明方式");
});
jQuery(function(){
alert("jquery第二种声明方式");
})
$(function(){
alert("jquery第三种声明方式");
})
</script>
</head>
<body>
</body>
</html>
jQuery的基本选择器：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-1.9.1.js"></script>
<script>
//这句话的意思是加载完整个页面的时候再调用jq的代码
$(function(){
//选中id 让背景色为红色 #id名称
$("#bt1").css("backgroundColor","red");
//选中元素为li的 将前面的样式取消 直接是 元素名称
$("li").css("list-style","none");
// 先提取出li类型的数组，eq是根据索引求元素0就是第一个li 设置背景为blue
$("li").eq(0).css("backgroundColor","blue");;
//class选择器 .class名称
$(".p1").css("text-decoration","underline");
//获得页面的所有元素
$("*");
//多重选择器 引号里的 就是可以选择的元素用，号分割开
$("h1,p").css("backgroundColor","pink");
})
</script>
</head>
<body>
<input type="button" id="bt1"value="可以选中id" />
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
<p class="p1">P段落</p>
<h1>H1标题</h1>
</body>
</html>
(2)层次选择器：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-1.9.1.js"></script>
<script>
$(function(){
//div中的所有li ("元素1 元素2")就是元素1内的所有元素2
// $("div li").css("backgroundColor","blue");
//div的直接子元素li ("元素1>元素2")直接父类是元素1的所有元素2
// $("div>li").css("backgroundColor","red");
// /div下的ul的元素 ("元素1+元素2")元素1下的元素2
// $("div+ul").css("backgroundColor","green");
// div之后的所有ul元素 ("元素1~元素2")元素一之后的所有元素2
// $("div~ul").css("backgroundColor","yellow");
})
</script>
</head>
<body>
<ul>
<li>a</li>
<li>b</li>
</ul>
<div id="div1">
<li>老子直接是div的</li>
<ul>
<li>li1</li>
<li>
<ul>
<li>内1</li>
<li>内内2</li>
</ul>
</li>
<li>li3</li>
</ul>
<li>老子直接是div的</li>
<ul>
<li>li11</li>
<li>li22</li>
<li>li33</li>
</ul>
</div>
<ul>
<li>div外的li1</li>
<li>div外的li2</li>
<li>div外的li3</li>
</ul>
<ul>
<li>div外的li11</li>
<li>div外的li22</li>
<li>div外的li33</li>
</ul>
</body>
</html>
位置选择器：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-1.9.1.js"></script>
<script>
$(function(){
//所有li中的第一个 元素1:first 所有元素1的第一个
// $("li:first").css("backgroundColor","red");
//所有li的最后一个 元素1:last 所有元素1的最后一个
// $("li:last").css("backgroundColor","blue");
//ul下的元素 不是li的 not取反
// $("ul :not(li)").css("backgroundColor","yellow");
//偶数索引的li元素 元素A：even 偶数索引的元素A
// $("li:even").css("backgroundColor","green");
//奇数索引的li元素 元素A:odd 元素A的奇数索引的元素A
// $("li:odd").css("backgroundColor","red");
//索引大于3的li元素 元素A:gt(数字) 数组A的索引大于数字的元素A
// $("li:gt(3)").css("backgroundColor","pink")
//索引小于2的li元素 元素B：lt（数字） 数组B的所有小于数字的元素b
// $("li:lt(2)").css("backgroundColor","blue");
//所有元素中包含 h标签的元素
$("*:header").css("backgroundColor","red")
})
</script>
</head>
<body>
<ul>
<li>第一个ul第一个li
<p>abc</p>
</li>
<li>第一个ul第2个li</li>
<li>第一个ul第3个li</li>
<li>第一个ul第4个li</li>
<h2>h2</h2>
<li>第一个ul第5个li</li>
<li>第一个ul第6个li</li>
</ul>
<ul>
<li>第2个ul第一个li</li>
<li>第2个ul第2个li</li>
<li>第2个ul第3个li</li>
</ul>
<input type="text" value="123" id="tx" />
<input type="text" value="" id="tx1" />
<h1>标题1</h1>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-1.9.1.js"></script>
<script>
$(function(){
//:empty 为空的元素 :not 非的意思、不是的意思 li中内容不为空的li元素
// $("li:not(:empty)").css("backgroundColor","red");
//有h1的div元素
// $("div:has(h1)").css("backgroundColor","pink");
})
</script>
</head>
<body>
<ul>
<li></li>
<li>123</li>
</ul>
<div>
<h1>h1</h1>
</div>
<div></div>
</body>
</html>
属性选择器：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-1.9.1.js"></script>
<script>
$(function(){
//所有有type的input元素
// $("input[type]").css("backgroundColor","red");
//所有type为text的input元素
// $("input[type=text]").css("backgroundColor","blue");
//所有type不为text的input元素
// $("input[type!=text]").css("backgroundColor","green")
//所有id以b开头的input元素
// $("input[id^=b]").css("backgroundColor","pink");
//所有id以t结尾的input元素
// $("input[id$=t]").css("backgroundColor","black");
//所有id包含t的input元素
// $("input[id*=t]").css("backgroundColor","red");
})
</script>
</head>
<body>
<input type="text" id="tx"value="text1" />
<input type="button" value="bt1" id="bt" />
<input type="button" value="bt2"id="bt2" />
</body>
</html>
父子元素选择器：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-1.9.1.js"></script>
<script>
$(function(){
//第一个ul中的li元素
// $("ul li:first").css("backgroundColor","red")
//ul中的li元素 索引为1的 child的索引从1开始，每一个ul
// $("ul li:nth-child(1)").css("backgroundColor","green")
//索引为2的所有li元素 child索引为1
// $("ul li:nth-child(even)").css("backgroundColor","brown");
//作用与ul li:nth-child(1)相同,每一个ul下的第一个li
//$("ul li:first-child").css("background-color","yellow");
//$("ul li:last-child").css("background-color","yellow");
//ul中只含有一个li
$("ul li:only-child").css("background-color","yellow");
})
</script>
</head>
<body>
<div id="div1" >
<ul>
<li>list item1</li>
<li>list item2</li>
<li>list item3</li>
<li>list itme4</li>
<li>list itme5</li>
</ul>
<ul>
<li>list item1</li>
<li >list item2</li>
</ul>
<ul>
<li>list item1</li>
</ul>
</div>
</body>
</html>
表单选择器：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
//(1)表单选择器
var x= $(":input");//13 input和select ,textarea
var y=$("input"); //11只是 inpu
y=$(":text"); //得到的结果相同 文本框
y=$("input[type=text]");
y= $(":checkbox"); //得到是面页上所有的checkbox
//只要想得爱好
y=$("input[name=hobby]"); //只有爱好=
y=$(":button"); //表单选择器
y=$("input[type=button]");//属性选择器
y=$(":enabled"); //input,select,option,textarea
/*for(var i=0;i<y.length;i++){
console.log(y[i]);
}*/
y=$(":disabled"); //只有提交按钮
y=$(":checked"); //radio ,checkbox,option
/*for(var i=0;i<y.length;i++){
console.log(y[i]);
}*/
y=$(":selected");//只包含selected
alert(y.length);
})
</script>
</head>
<body>
<h1>注册页面</h1>
<table>
<tr>
<td>用户名</td>
<td><input type="text" id="" value="" /></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="" /></td>
</tr>
<tr>
<td> 性别</td>
<td>
<input type="radio" name="sex" id="sex" value="" checked="checked" />男
<input type="radio" name="sex" id="sex" value="" />女
</td>
</tr>
<tr>
<td>爱好:</td>
<td>
<input type="checkbox" name="hobby" id="sex" value="" checked="checked" />吃
<input type="checkbox" name="hobby" id="sex" value="" />喝
<input type="checkbox" name="hobby" id="sex" value="" />玩儿
<input type="checkbox" name="hobby" id="sex" value="" />乐
</td>
</tr>
<tr>
<td>所在城市 :</td>
<td>
<select name="">
<option value="">北京</option>
<option value="">上海</option>
<option value="">长沙</option>
<option value="">青岛</option>
<option value="" selected="selected">威海</option>
</select>
</td>
</tr>
<tr>
<td>
</td>
<td>
<textarea name="" rows="6" cols="50">
我已认真阅读
</textarea><br />
<input type="checkbox" name="" id="" value="" />
同意本站协议
</td>
</tr>
<tr>
<td>
<input type="submit" id="" name="提交" disabled="disabled"/>
<input type="reset" value="重置" />
<input type="button" value="其它" />
</td>
<td></td>
</tr>
</table>
</body>
</html>
jQuery操作元素 attr
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-1.9.1.js"></script>
<script>
$(function(){
$("#bt1").click(function(){
$("img").attr("src","/jq1/img/QQ截图20190814162113.png");
})
$("#bt2").click(function(){
$("img").attr("src","/jq1/img/QQ截图20190814162129.png");
})
$("#bt3").click(function(){
$("img").removeAttr("src");
})
})
</script>
</head>
<body>
<input type="button" id="bt1" value="添加图片" />
<input type="button" id="bt2" value="替换图片" />
<input type="button" id="bt3" value="删除图片" />
<img src="" alt="" />
</body>
</html>
添加元素属性：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.clazz{
width:200px;height:200px;
background-color:yellow;
}
</style>
<script src="js/jquery-1.9.1.js"></script>
<script>
$(function(){
$("#bt1").click(function(){
$("div").addClass("clazz");
});
$("#bt2").click(function(){
$("div").removeClass("clazz");
});
$("#bt3").click(function(){
$("div").html("<h1>添加了h1标题哦</h1>");
});
$("#bt4").click(function(){
$("div").text("<h1>纯文本输入什么打什么</h1>");
});
$("#bt5").click(function(){
$("input[type=text]").attr("value","哎哟我被修改了！");
});
$("#bt6").click(function(){
alert($("input[type=text]").eq(0).val());
})
})
</script>
</head>
<body>
<input type="button" id="bt1" value="添加class" />
<input type="button" id="bt2" value="删除class" />
<input type="button" id="bt3" value="添加innerHTML" />
<input type="button" id="bt4" value="添加innerText" />
<input type="button" id="bt5" value="点击这个可以修改文本框的值哦" />
<input type="button" id="bt6" value="点我我弹出来文本框的值哦" />
<input type="text" id="text" value="" />
<div></div>
</body>
</html>
追加元素：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#div1{
width:200px;height:200px;
background-color:pink;
}
</style>
<script src="js/jquery-1.9.1.js"></script>
<script>
$(function(){
$("#bt1").click(function(){
var pp=$("<p>P元素</p>");
var div1=$("#div1");
// div1.append(pp); //div1中添加pp元素
// pp.appendTo(div1);//pp元素添加到div1中
// div1.prepend(pp);//div1中追加元素pp
// div1.before(pp);//div前加pp
div1.after(pp);//div1后加pp
})
})
</script>
</head>
<body>
<div id="div1"></div>
<input type="button" id="bt1"value="点一下可以加个P哈哈哈" />
</body>
</html>
1478
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
