常用方法
兄弟前后----多元素，父、子元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/1.12.3/jquery.js"></script>
<script >
// .next() 获取节点之后的挨着得第一同辈元素
// .next("div") 紧邻的第一个div标签
// .nextAll() 获取节点之后的所有同辈元素
//.prev()、 .prevAll()兄弟中之前的元素
// .siblings() 获取所有同辈的兄弟节点
// .children() 找子元素 所有子元素中查找，只从孩子元素中查找，不在孙子及以后查找
// .parent() 找父元素
// .end() 返回最近一次"破坏性"操作之前的对象
$(function () {
$("#d3").next().css("background","red");//等价于下面
// $("#d3+p").css("background", "red");
// $("#d3").next("div").css("background", "red");//这样找不到
// $("#d3").nextAll().css("background", "yellow");
// $("#d3").nextAll("div").css("background", "yellow");
// $("#d3").siblings().css("background", "blue");
// $("#d3").children().text(666666666666);
// $("#d3").children().css("background", "pink");
// $("#d4").parent().css("background", "blue");
//d3及之前的所有元素
// $("#d3").prevAll().css("background", "blue").end().css("background", "blue");//等价于下面
$("#d3").prevAll().andSelf().css("background", "blue");
})
</script>
</head>
<body>
<div>1111111
<p>pp111111</p></div>
<div>3333333</div>
<div>5555555</div>
<div id="d3">
<div>dddddddddddd
<div id="d4">aaaaaaaaa</div>
</div>
<div>qqqqqqqqqqqq</div>
<p>pqpqpqpqpqpq</p>
</div>
<p>ppppp</p>
<div>11111
<div>aaaaaaaaaa</div></div>
<div>22222</div>
<div>33333</div>
<div>44444</div>
</body>
</html>
样式操作、光标、定时器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.b1{
background-color:Yellow;
}
.bg{
background-color: red;
}
.w{
400px;
}
.color{
color: blue;
}
.dark{
background-color: black;
}
</style>
<!-- <script src="jquery3.x.js"></script> -->
<script src="https://cdn.bootcss.com/jquery/1.12.3/jquery.js"></script>
<script>
// 样式操作
// 1. css(<style 设置行内样式)
// 2. 类样式(设置标签的class属性)
// 获取样式attr("class") 设置样式attr("class","myclass") 追加样式addClass("myclss")(不影响其他形式)
// 移除样式removeClass("myclss") 切除样式.toggleClass("myclss") (如果存在样式则去掉样式，如果没有则添加样式)
// 判断是否存在样式hasClass("myclss")
// focus获得光标
// blur失去光标
// setInterval()定时器
// clearInterval()停止定时器
//过滤：filter 实现很多对图片操作的效果(透明度) IE才支持
// 例如 给class属性重新赋值 $("txt").attr("class","bg")
// 聚焦控件:
// .b1{
// background-color:Yellow
// }
$(function () {
// $("input").focus(function () {
// $(this).addClass("b1").siblings().removeClass("b1");
// })
$("#btn").click(function () {
//给class属性重新赋值
// $("#txt").attr("class","bg");
//追加样式
$("#txt").addClass("bg").addClass("color");
})
$("#cx").click(function () {
// $("#txt").removeClass("bg");
//全部移除
$("#txt").removeClass();
})
$("#toggle").click(function () {
$("#txt").toggleClass("bg");
})
//网页开关灯
$("#d1").click(function(){
$("body").toggleClass("dark");
//判断是否存在样式hasClass()
if($("body").hasClass("dark")){
$("#d1").val("开灯")
}
else{
$("#d1").val("关灯")
}
})
})
</script>
</head>
<body>
<input class="b1" type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="button" value="dianji" id="btn">
<input type="button" id="cx" value="remove">
<input type="button" id="toggle" value="toggle">
<input type="text" id="txt" class="w"><br>
<input type="button" id="d1" value="关灯">
</body>
</html>
css()、val()、text()、html()、attr()区别
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/1.12.3/jquery.js"></script>
<script>
//.css() .val()表单元素使用，如：<input> <option> { .text() .html()} 获取或设置两个标签之间的内容
//.attr() 读取或设置元素的属性 .removeAttr() 删除、移除
$("#div1").css("background", "red");//修改样式;： 行内样式 改变style属性
$("#div1").css("background");//获得样式 前面得设置才能获取到
$("#un").val(1111);//修改value
$("#un").val();//获得value
//以上两个方法封装了标签的两个属性 style和value
$(function () {
$("#d1").click(function () {
// $("#link").attr("href", "http://www.baidu.com");
//可以自定义属性
$("#link").attr("a1", 1111);
})
$("#d2").click(function () {
// $("#link").removeAttr("href");
alert($("#link").attr("a1"));
})
})
</script>
</head>
<body>
<input type="button" value="click" id="d1">
<input type="button" value="remove" id="d2">
<a id="link">百度</a>
</body>
</html>
动态创建节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- <script src="jquery3.x.js"></script> -->
<script src="https://cdn.bootcss.com/jquery/1.12.3/jquery.js"></script>
<script>
// 1.动态创建节点
// append() $("#d1").append($link);把后面对象的添加到前面的容器
// appendTo() $link.appendTo($("#d1")); 把前面的对象，添加到后面的容器
// prepend() $("#d1").prepend($link);把后面的对象添加到前面容器(作用：内容之前或开始标签之后)
// prependTo() $link.prependTo($("#d1"));把前面的对象，添加到后面的容器(作用：内容之前或开始标签之后)
// after() $("#d1").after($link); 把标签添加到结束标签之后（兄弟节点）
// before() 把标签添加到开始标签之前（兄弟节点）
//
// 2.删除节点
// remove() $("#d3 li:last").remove();找到对象，并把这个对象删除，可以返回
// empty() $("#d3 li:last").empty(); 清空标签之间的内容，节点还在
$(function () {
$("#btn").click(function () {
//动态创建a标签，在内存中
var $link = $("<a href='http://www.baidu.com'>百度</a>");
// 给动态生成的控件注册事件(直接拿到对象.click)
// $link.click(function () {
// alert("abc") ;
// return false;
// })
//想在页面上显示出来，调用append方法
//把a标签放到div中,div的结束标签之前
$("#d1").append($link);
debugger
$("#d1").prepend('111111')
//append方法用来在元素的末尾追加元素
$("#d1").after($link);
// $("#d1").before($link);
})
$("#d2").click(function(){
// $("#d3 li:last").remove();
$("#d3 li:last").empty();
})
})
</script>
</head>
<body>
<input type="button" name="name" value="create" id="btn" />
<div id="d1"></div>
<input id="d2" type="button" value="remove">
<ul id="d3">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
选择器
基本选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- <script src="jquery3.x.js"></script> -->
<script src="https://cdn.bootcss.com/jquery/1.12.3/jquery.js"></script>
<script>
//规则：$(who).when({what})
$(function () {
//id选择器
//$("#d1").css("background","red");
//类选择器
//$(".c1").css("background","green");
//标签选择器
//$("p").css("background","yellow");
//jQuery中事件监听的写法：click()、leave()、focus()、blur()........
//当输入域失去焦点 (blur) 时
$("input").blur(function () {
$("input").css("background-color", "pink");
});
$(".c1").focus(function () {
$("p").text("zzzzzzz")
})
$("#d3").click(function () {
$("p").text("你们都是。。。。");
})
$("#d4").click(function () {
alert(111111111);
//取消后续内容的执行
//return false;
})
//复合选择器中间用(,)隔开
$("#d1,.bg,p").css("background", "pink");
})
</script>
</head>
<body>
<div id="d1">11111</div>
<div id="d2">2222</div>
<p id="p1">ppppp</p>
<div class="c1">3333333</div>
<div class="c1">44444</div>
<div>
<p class="c1">pppppp</p>
</div>
<div>55555</div>
<input class="c1" type="text"><br>
<input id="d3" type="button" value="anniu"><br>
<a id="d4" href="http://www.baidu.com">百度</a>
</body>
</html>
层次选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- <script src="jquery3.x.js"></script> -->
<script src="https://cdn.bootcss.com/jquery/1.12.3/jquery.js"></script>
<script>
//层次选择器
//后代（空格 >）和兄弟（+ ~）
//(1)$("div li")获取div下的所有li元素（后代，子、子的子。。。。）
//(2)$("div>li")获取div下的直接li子元素.只在后代中找符合第二个选择器的元素,不能在子子后代..中找
//(3)$("menuitem+div")获取样式名为menuitem之后的第一个div元素。+之后的紧挨的第一个元素，如果紧挨的第一个元素 不符合选择器，就不会找到
//(4)$("menuitem~div")获取样式名为menuitem之后的所有div元素。~之后的所有符合选择器的元素 从后面兄弟节点中找，后面兄弟节点子节点的元素即使符合，也选不中
$(function () {
$("#d1 p").css("background", "red");
$("#d1>p").css("background", "pink");
//#d1之后的近邻的div
$("#d1+div").css("background", "yellow");//这样就会找不到 紧挨着的符合选择器
$("#d1+p").css("background", "yellow");
$("#d1~p").css("background", "green");
})
</script>
</head>
<body>
<div id="d1">d1d1ddd11
<div>111111
<p>ppppp</p>
</div>
<p>cccccccc</p>
</div>
<p>p1pp1p1p1p1p1</p>
<div class="bg">222222</div>
<p>p2p2p2pp2p2p2p2</p>
<div>333333
<p>666666</p>
</div>
<div>444444</div>
<div>555555</div>
</body>
</html>
基本过滤器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- <script src="jquery3.x.js"></script> -->
<script src="https://cdn.bootcss.com/jquery/1.12.3/jquery.js"></script>
<script>
//$("tr:first") 选择所有tr元素的第一个
//$("tr:last") 选择所有tr元素的最后一个
//$("tr:even") 选择所有的tr元素的第0，2，4... ...个元素（注意：因为所选择的多个元素时为数组，所以序号是从0开始）
//$("tr:odd") 选择所有的tr元素的第1，3，5... ...个元素
//$("td:eq(2)") 选择所有的td元素中序号为2的那个td元素
//$("td:gt(4)") 选择td元素中序号大于4的所有td元素
//$("td:lt(4)") 选择td元素中序号小于4的所有的td元素
//$(":header") 选择所有的h1.....h6元素
//$("div:animated") 选择正在执行动画的<div>元素
$(function () {
$("input:first").css("background","red");
$("input:last").css("background","yellow");
$("input:even").css("background","pink" );
//第4个
$("input:eq(3)").css("width","90px");
//前3个
$("input:lt(3)").css("height","50px");
$("input:not(:last)").val(111);
$("input:gt(4)").css("background","gray");
$(":header").css("font-size","30px");
$("div:not(:first)").css("background","red");
//倒数第3项的索引
var index=$("input").length-3;
//后两项
$("input:gt("+index+")").css("background","aqua");//取变量的值("+index+") gt("+index+")相当于gt(3)
})
</script>
</head>
<body>
<h1>hhhhhh</h1><br>
<input type="text"value=""><br>
<input class="bg" type="text" value=""><br>
<input type="text" value=""><br>
<input id="d1" type="text" value=""><br>
<input type="text" value=""><br>
<input type="text" value=""><br>
<input type="text" value=""><br>
<input type="text" value=""><br>
<input type="text" value=""><br>
<div>33333
<div>55555</div>
</div>
<div>4444</div>
<h2>2222222</h2>
</body>
</html>
属性过滤器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/1.12.3/jquery.js"></script>
<!-- <script src="jquery3.x.js"></script> -->
<script>
//属性过滤选择器([]) 用[]表示 多属性[][] 开始^= 结尾$= 不等!= 含有*=
//$(div[id])选取有id属性的<div>
//$(div[title=test]) 选取title属性为“test”的 <div> $(div[title!=test])
//$(div[id*=div])选取给定属性是以包含某些值的元素
$(function () {
$("input[id]").css("background-color", "red");
$("input[type=text]").css("background-color", "pink");
$("input[type=text][name=n1]").val(11111);
$("input[id*=d]").val("dddddd");//含有这个字母的都选中
$("input[class^=c]").css("background-color", "blue");
$("input[name$=1]").val(22222);
$("input[type!=text]").css("background-color", "green");
})
</script>
</head>
<body>
<input id="d1" type="text"><br>
<input id="d2" type="text"><br>
<input class="c1" type="text"><br>
<input class="c2" type="text"><br>
<input type="button" value="button"><br>
<input class="c3" type="button" value="click"><br>
<input class="c3" type="button" value="click"><br>
<input type="text" name="m1"><br>
<input type="text" name="name"><br>
<input type="text" name="name1"><br>
<input id="d3" type="checkbox" /><br>
<input class="c4" type="radio"><br>
<input type="radio">
<br/>
<span>sss</span>
</body>
</html>
表单过滤器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- <script src="jquery3.x.js"></script> -->
<script src="https://cdn.bootcss.com/jquery/1.12.3/jquery.js"></script>
<script>
//表单对象选择器（过滤器）
//$("#form1：enabled")选取id为form1的表单内所有启用的元素 $("#form1：disabled")禁用
//$("input:checked")选取所有选中的元素（Radio、CheckBox）
//$(select option:selected)选取所有选中的选项元素（下拉列表）
//表单选择器(:) 用：表示
// $(":input")选取所有<input>、<textarea>、<select>和<button>元素，$("input")只选取<input>标签
// $(":text")选取所有单行文本框，等价于属性选择器$("input[type=text]")
// $(":password")选取所有密码框。同理:radio、 :checkbox、:submit、:image、:reset、:button、:file、:hidden
// :diabled :checked :selected 表单可以和限制条件一块使用。
$(function () {
$("input[type=text]:disabled").css("background-color", "red");
$("input[type=text]:enabled").css("background-color", "pink");
// $("input[type=checkbox]:checked").css("background-color", "blue");
$("select option:selected").css("background", "red");
$(":text:disabled").css("background-color", "blue");
$(":text:disabled[id!=d1]").css("background", "black");
$(":password[name=123]:checked").val(2222);
// $(":button[id!=btn]").val(11);
// $("input[type=checkbox]:checked").removeAttr("checked");
$(":radio:eq(3)").attr("checked", "true");
$(":radio:eq(3)").attr("checked", "checked"); //checked true都可以，一般用true，比如没选中 就fasle了对应的
$(".bg").click(function () {
alert($(":radio:checked").val());
})
//单选 多选框包装集 需要each（function(){ this是这个包装集中每个DOM对象 }） $对象.each this表示DOM
$("#btn").click(function () {
var i = "";
//实例的each，封装了$.each
$(":checkbox:checked").each(function () {
i += $(this).val() + ",";
})
alert(i);
})
})
</script>
</head>
<body>
<input id="d1" type="text" disabled="disabled"><br>
<input id="d2" type="text" disabled="disabled"><br>
<input class="c1" type="text"><br>
<input class="c2" type="text"><br>
<input id="btn" type="button" value="click"><br>
<input class="bg" type="button" value="cl"><br>
<input type="button" value="cli"><br>
<!--<input type="checkbox" checked="checked"><br>-->
爱好：<br>
<input type="checkbox" name="c" value="w" > 玩
<input type="checkbox" name="c" value="cf" >吃饭
<input type="checkbox" name="c" value="sj">睡觉
<input type="checkbox" name="c" value="ddd " >打豆豆
<input type="checkbox" name="c" value="kds">看电视 <br>
性别：<br>
<input type="radio" name="sex" value="nan">男<br>
<input type="radio" name="sex" value="nv">女<br>
<input type="radio"><br>
<input type="radio"><br>
<input id="d4" type="text"><br>
<select name="name" id="d3">
<option selected="selected" value="">下拉1</option>
<option value="">下拉2</option>
</select><br>
密码：<input type="password" name="123" value="111" checked="checked"><br>
密码：<input type="password" name="234" value="111"><br>
密码：<input type="password" name="123" value="111"><br>
</body>
</html>