导读
1.初识
2.jQuery选择器
3.jQuery常用方法
4.jQuery节点操作
初识
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--这里引入JQuery一定要是成对的script结束-->
<script src="ww/jquery-3.1.1.js" type="text/javascript"></script>
<!--要重新写一个script标签写代码，上边的只是用来引入库文件-->
<script type="text/javascript">
</script>
</head>
<body>
</body>
</html>
<script type="text/javascript">
jQuery(document).ready(function(){
alert("test");
});
//简写一：
$(document).ready(function(){
alert("test");
});
//简写二：所有代码写在这个匿名函数中，不会因为加载顺序问题而找不到元素
$(function () {
alert("test");
});
</script>
jQuery选择器
<script type="text/javascript">
$(function () {
//jQuery与js中对象转化
//jQuery获取元素
var s=$("#fruit");
alert(s.html());
//js中写法
/*var ul = document.getElementById("fruit");
alert(ul.innerHTML);*/
var s1=$("li");//得到jQuery对象,是一个数组型对象
alert(s1.text());//只显示<li>标签里的内容，而不显示标签
//js中写法
//var liArray = document.getElementsByTagName("li");//得到JS对象数组
//通过循环遍历输出
//================================================================
//jQuery对象和JS对象是可以相互转换的
//jQuery对象-->JS对象
//jQuery对象[index] 或者 jQuery对象.get(index)
var s11=s1[0];//s11是一个js对象
alert(s11.innerHTML);
//JS对象-->jQuery对象 通过 $(js对象)
// var $li1 = $(liArray[0]);
// alert($li1.html());
});
</script>
常用基本选择器
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>常用基本选择器</title>
<script src="../scripts/jquery-3.1.1.js"></script>
<script type="text/javascript">
$(function(){
//jQuery选择器继承了css的风格,支持css1~css3
var $username = $("#username");
//jQuery对象中包含的元素的个数
//alert($username.length);//1
var $sex = $(".sex");
//alert($sex.length);//2
var $input = $("input");
//alert($input.length);//6
var temp = $("form,input");
alert(temp.length);//7
});
</script>
</head>
<body>
<form>
用户名:<input id="username" type="text" name="username"/><br/>
密码:<input id="password" type="password" name="password"/><br/>
性别:<input class="sex" type="radio" name="sex" value="male">男
<input class="sex" type="radio" name="sex" value="female">女<br/>
<input type="submit" value="提交"/>
<input type="reset" value="取消"/>
</form>
</body>
</html>
常用层次选择器
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="../scripts/jquery-3.1.1.js"></script>
<script type="text/javascript">
$(function(){
//只要在第一个选择器对应的元素中即可
var h3 = $("body h3");
//alert(h3.length);//2
//第一个选择器对应的元素的直接的孩子
var h3_1 = $("body>h3");
//alert(h3_1.length);//0
//#id后边紧接着一个<li>标签
var li = $("#huawei+li");
//alert(li.text());//苹果
var li1 = $("li+li");
//alert(li1.text());//有6个li 苹果vivo小米苹果vivo小米
//h3后边所有的ul
var li2 = $("h3~ul");
alert(li2.length);//2
});
</script>
</head>
<body>
<div>
<div>
<h3>常用手机品牌</h3>
<ul>
<li id="huawei">华为</li>
<li>苹果</li>
<li>vivo</li>
<li>小米</li>
</ul>
<ul>
<li>华为</li>
<li>苹果</li>
<li>vivo</li>
<li>小米</li>
</ul>
<h3>销量榜</h3>
<ol>
<li>vivo</li>
<li>华为</li>
<li>苹果</li>
<li>小米</li>
</ol>
</div>
</div>
</body>
</html>
常用的基本过滤选择器
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="../scripts/jquery-3.1.1.js"></script>
<script type="text/javascript">
$(function(){
//过滤选择器:针对选择的结果做筛选
//所有li中过滤出奇数下标的部分,下标从0开始
var li = $("li:odd");
//alert(li.text());
//not:去掉一部分
var li2 = $("li:not(li:first)");
//alert(li2.length);//11
//lt:下标小于某个值的, eq:下标等于 gt:下标大于
var li3 = $("li:lt(5)");
alert(li3.text());
});
</script>
</head>
<body>
<div>
<div>
<h3>常用手机品牌</h3>
<ul>
<li id="huawei">华为</li>
<li>苹果</li>
<li>vivo</li>
<li>小米</li>
</ul>
<ul>
<li>华为</li>
<li>苹果</li>
<li>vivo</li>
<li>小米</li>
</ul>
<h3>销量榜</h3>
<ol>
<li>vivo</li>
<li>华为</li>
<li>苹果</li>
<li>小米</li>
</ol>
</div>
</div>
</body>
</html>
常用内容过滤选择器
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="../scripts/jquery-3.1.1.js"></script>
<script type="text/javascript">
$(function(){
//根据内容来过滤
//内容是否包含指定文本
var li1 = $("li:contains('为')");
//alert(li1.length);//3
//里面没有任何文本,子元素
var li2 = $("li:empty");
//alert(li2.length);//1
//有文本或者子元素,和 :empty相反
var li3 = $("li:parent");
//alert(li3.length);//13
var div = $("div:has(ol)");
//alert(div.length);//2
//根据可见性过滤
//:hidden 隐藏 :visible 可见
var li4 = $("li:hidden");
alert(li4.length);//1
});
</script>
</head>
<body>
<div>
<div>
<h3>常用手机品牌</h3>
<ul>
<li id="huawei">华为</li>
<li>苹果</li>
<li>vivo</li>
<li hidden="true">小米</li>
<li></li>
<li>
</li>
</ul>
<ul>
<li>华为</li>
<li>苹果</li>
<li>vivo</li>
<li>小米</li>
</ul>
<h3>销量榜</h3>
<ol>
<li>vivo</li>
<li>华为</li>
<li>苹果</li>
<li>小米</li>
</ol>
<div></div>
</div>
</div>
</body>
</html>
常用属性过滤选择器
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>常用属性过滤选择器</title>
<script src="../scripts/jquery-3.1.1.js"></script>
<script type="text/javascript">
$(function(){
//根据属性来过滤元素
//包含name属性的
var input1 = $("input[name]");
//alert(input1.length);//4
//[attribute=value] [attribute!=value]
var input2 = $("input[name=sex]");
//alert(input2.length);//2
//[attribute^=value]:以..开始
//[attribute$=value]:以..结束
//[attribute*=value]:包含..
//[attribute~=value]:包含,必须是独立的单词,以空格隔开
var input3 = $("input[value$=le]");
//alert(input3.length);
var input4 = $("input[value~='消']");
//alert(input4.length);
//属性过滤选择器组合
var input5 = $("input[id][type]");
alert(input5.length);
});
</script>
</head>
<body>
<form>
用户名:<input id="username" type="text" name="username"/><br/>
密码:<input id="password" type="password" name="password"/><br/>
性别:<input class="sex" type="radio" name="sex" value="male">男
<input class="sex" type="radio" name="sex" value="female">女<br/>
<input type="submit" value="提交"/>
<input type="reset" value="取消"/>
<input type="reset" value="取 消"/>
</form>
</body>
</html>
常用子元素过滤选择器
忽略了空白以及文本的
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>常用子元素过滤选择器</title>
<script src="../scripts/jquery-3.1.1.js"></script>
<script type="text/javascript">
$(function(){
//看这个元素相对它的父亲的位置
//:first-child 是父亲下的第一个子元素
//:last-child 是父亲夏的最后一个子元素
var li = $("li:first-child");
//alert(li.text());
//:first-of-type 是父亲下这个类型的第一个
//:last-of-type 是父亲下这个类型的最后一个
var h3 = $("h3:last-of-type");
//alert(h3.text());
//only-child 是父元素下的唯一子元素
var div = $("div:only-child");
//alert(div.length);//2
//only-of-type
var ol = $("ol:only-of-type");
//alert(ol.length);
//:nth-child(index|odd|even) 是父亲下的第几个,奇数个,偶数个子元素
//:nth-last-child(index|odd|even) 从后往前数, 从1开始
//注意:此时是从1开始
var li2 = $("#ul1 li:nth-child(odd)");
alert(li2.text());
});
</script>
</head>
<body>
<div>
<div>
<h3>常用手机品牌</h3>
<ul id="ul1">
<li id="huawei">华为</li>
<li>苹果</li>
<li>vivo</li>
<li>小米</li>
</ul>
<ul>
<li>华为</li>
<li>苹果</li>
<li>vivo</li>
<li>小米</li>
</ul>
<h3>销量榜</h3>
<ol>
<li>vivo</li>
<li>华为</li>
<li>苹果</li>
<li>小米</li>
</ol>
<div></div>
</div>
</div>
</body>
</html>
常用表单选择器
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>常用基本选择器</title>
<script src="../scripts/jquery-3.1.1.js"></script>
<script type="text/javascript">
$(function(){
//:input 所有表单元素
//:text 所有单行文本框
//:password
//:image
//:file
//:radio
//:checkbox
//:submit
//:reset
//:button 普通按钮
var btn = $(":button");
//alert(btn.length);
//:disabled 不可用
//:enabled 可用
//:checked 单选框或多选框选中
//:selected 下拉框或列表框 选中项
//找性别选中项
alert($("input[name=sex]:checked").val());//val():jQuery获取属性值
//js-->jQuery
//value-->val()
//innerHTML-->html()
//innerText 兼容性有问题-->text(),通用的
//空格的问题:有空格,是层级选择器, 没有空格,多个同时修饰一个元素
//form[id]:form元素,并且包含id属性
//form [id]:form下的并且包含id属性的元素
});
</script>
</head>
<body>
<form>
用户名:<input id="username" type="text" name="username" disabled/><br/>
密码:<input id="password" type="password" name="password"/><br/>
性别:<input class="sex" type="radio" name="sex" value="male" checked>男
<input class="sex" type="radio" name="sex" value="female">女<br/>
<input type="submit" value="提交"/>
<input type="reset" value="取消"/>
<input type="button" value="按钮1"/>
<input type="button" value="按钮2"/>
</form>
</body>
</html>
jQuery常用方法
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>管理选择器得到的结果</title>
<script src="scripts/jquery-3.1.1.js"></script>
<script type="text/javascript">
$(function(){
var li1 = $("li");
//查看包含元素的个数:length属性
// alert(li1.length);//4
var li2 = $("li:eq(2)");
//index():
//用法1:查找指定元素在多个查找到的元素集合中的位置
var i = li1.index(li2);
//alert(i);//2
//用法2:查找指定元素在其父亲下的子元素的索引
//alert($("li:eq(2)").index());//3
//add()-->返回一个新的集合,包含所有,原来的集合不变
var temp = li1.add("span");
//alert(temp.length);//5
//alert(li1.length);//4
//not()-->去除一部分 ,返回一个新集合,原来的集合不变
temp = li1.not(":odd");
//alert(temp.length);
//filter()-->筛选出一部分,返回一个新集合,原来的集合不变
temp = li1.filter(":odd");
//alert(temp.text());
//find(),找指定元素下的符合选择器的子元素,基于指定的往下找
temp = $("ul").find("li");
//alert(temp.length);
//each(),对选择器中的元素遍历(循环) 重要,掌握
//index:元素索引
$("ul li").each(function(index){
//this:当前对象, js对象, 转换成jQuery对象:$(this)
alert(index+","+$(this).text());
if(index==2){
//想要提前结束循环,返回false
return false;
}
});
});
</script>
</head>
<body>
<h3>常用手机品牌</h3>
<ul>
<span>test</span>
<li>华为</li>
<li>苹果</li>
<li>vivo</li>
<li>小米</li>
</ul>
<li>testtest</li>
</body>
</html>
jQuery节点操作
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>jQuery节点操作</title>
<style type="text/css">
.li{
background-color: yellow;
}
#div1{
background-color: yellow;
width: 200px;
height: 100px;
}
#div2{
position: absolute;
left: 50px;
top: 100px;
background-color: cyan;
}
</style>
<script src="scripts/jquery-3.1.1.js"></script>
<script type="text/javascript">
$(function(){
//创建元素, 属性,内容一步到位------------------------
var li = $("<li id='meizu'>魅族</li>");
//添加元素------------------------------------------
//追加:append() 追加到指定元素的内部
//$("ul").append(li);
//appendTo() 作用和append()一样,但是反过来
//li.appendTo("ul");
//prepend() prependTo() 前置到指定元素的内部
//$("ul").prepend(li);
//after() insertAfter() 添加到指定元素之后
//$("li:eq(0)").after(li);
//before() insertBefore() 添加到指定元素之前
//$("li:eq(0)").before(li);
//删除元素------------------------------------------
//给每一个li添加点击事件
$("li").click(function(){
//切换class属性,如果没有,则添加,如果有则删除 class=li
$(this).toggleClass("li");
});
//remove() 删除元素,不会保留事件和附加数据,适合删除后不再利用
/*var li1 = $("li:eq(0)").remove();
$("ul").append(li1);*/
//detach() 删除元素,保留事件和附加数据,适合删除后再利用
/* var li1 = $("li:eq(0)").detach();
$("ul").append(li1);*/
//empty():清空,清空文本和子元素
//$("li:last").empty();
//复制元素-------------------------------------------
//clone() true:同时复制事件
//$("li:eq(2)").clone(true).appendTo("ul");
//替换元素-------------------------------------------
//replaceWith()
//$("li:eq(3)").replaceWith("<li>红米</li>");
//replaceAll() 作用一样,语法相反
//$("<li>红米</li>").replaceAll("li:eq(3)");
//包裹元素-------------------------------------------
//wrap() 每一个选择的li都包裹一个i
//$("li:lt(2)").wrap("<i></i>");
//wrapAll() 所有li之外包裹一个i
//$("li").wrapAll("<i></i>");
//wrapInner() 包裹在里层
//$("li").wrapInner("<i></i>");
//属性操作-------------------------------------------
//attr(),获取属性的值,设置属性的值
//获取
//alert($("li:eq(0)").attr("id"));
//设置一个值
//$("li:eq(0)").attr("id","hh");
//设置多个值,使用json格式
$("li:eq(0)").attr({"id":"hh","name":"hw"});
//removeAttr(),删除属性
$("li:eq(0)").removeAttr("id");
//prop(),针对单选框复选框选择,checked,下拉框,列表框选择,selected,
$("option:eq(1)").prop("selected",true);
//针对class属性直接提供了对应的方法,
//addClass(),加class属性
//removeClass(),移除class
//toggleClass(),切换样式,如果有,则移除,如果没有,则添加
//hasClass() 是否有对应的样式
//is() 等价于hasClass()
//在加载后,奇数索引的li背景色都是黄色
//$("li:odd").addClass("li");
//html() text() val(),重点-------------------------------
//html()---->等价于js:innerHTML
//alert($("ul").html());//返回内部所有的部分
//text()--->等价于js:innerText
//alert($("ul").text());//只获取内部的文本,标签不返回
//$("#info").html("<span>test</span>");
//$("#info").text("<span>test</span>");//把<span>当成普通文本
//val()--->等价于js:value
//alert($("select").val());//获取select选中的值
//$("select").val("dalian");//设置一个值
$("select").val(["dalian","tianjin"]);//设置多个值,使用数组
//遍历节点-----------------------------------------------
//children():所有的子元素
//parent():父元素
//next()后一个兄弟 prev()前一个兄弟
//slibings() 所有的兄弟
//closest() 最近的,从它自己开始查找,如果不匹配,逐级向上
//alert($("#span1").closest("div").html());
//设置css样式--------------------------------------------
//$("#span1").css("color","red");//一个样式属性
$("#span1").css({"color":"red","background-color":"green"});
//alert($("#span1").css("color"));
//height():元素高度
//alert($("#div1").height());
//$("#div1").height(50);
//width():元素宽度
//定位--------------------------------------------------
//scrollTop() scrollLeft() 设置滚动条的滚动位置
//alert($("select").scrollTop());
//$("select").scrollTop(100);
//offset() 相对当前窗口的偏移 返回的对象,两个属性,left,top
//获取偏移量
//alert($("#div2").offset().left+","+$("#div2").offset().top);
//设置偏移量
//$("#div2").offset({"left":200,"top":300});
});
</script>
</head>
<body>
<ul>
<li id="huawei">华为</li>
<li>苹果</li>
<!--<span>test</span>-->
<li>vivo</li>
<li>小米</li>
</ul>
<select name="city" size="4" multiple>
<option value="beijing" selected>北京</option>
<option value="nanjing">南京</option>
<option value="tianjin">天津</option>
<option value="shijiazhuang">石家庄</option>
<option value="dalian">大连</option>
<option value="nanchang">南昌</option>
<option value="zhengzhou">郑州</option>
</select>
<div id="info"></div>
<div id="div1">
<div><span id="span1">test</span></div>
</div>
<div id="div2">我是一个div</div>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
