JQuery的学习
一.JQuery的安装与使用
1.我们可以到该地址https://jquery.com/去下载JQuery，最新版本是3.4.1。
2.JQuery的版本分为两种：jquery.min.js和jquery-3.4.1.js
.min版本是压缩版，方便，容量小，加载更快，但都在一行显示，观看麻烦。
.js版本有缩进格式，方便程序员观看，但相对的容量大，加载相对.min更慢。
3.JQuery的核心
"可以获取到JQuery对象，或调用JQuery的方法等…
二.JQuery包装集对象与Dom对象
1.Dom对象：通过元素的js方式获取的dom对象
2.JQuery包装集对象：通过JQuery方式获取的JQuery包装集对象
3.Jquery包装集对象与Dom对象
1.DOM对象 ——> Jquery对象
方式： $(dom对象)
2.Jquery对象 ——> DOM对象
方式： 取下标：Jquery对象[下标]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Jquery包装集对象与Dom对象</title>
</head>
<body>
<div id="mydiv">Hello</div>
</body>
<script type="text/javascript" src="js/jquery-3.4.1.js" ></script>
<script type="text/javascript">
// 通过原生JS方式获取dom对象 通过id属性值获取dom对象
var divDom = document.getElementById("mydiv");
console.log(divDom);
var divDomtoJquery = $(divDom);
console.log(divDomtoJquery);
console.log("==========================");
// 通过Jqueru方式获取Jquery包装集对象 通过id选择器获取
var divJquery = $("#mydiv");
console.log(divJquery);
var divJqueryToDom = $("#mydiv")[0];
console.log(divJqueryToDom);
</script>
</html>三.JQuery选择器
1.基础选择器
1.ID选择器：#id属性值 重要
2.元素选择器：标签名 重要
3.类选择器：.class属性值 重要
4.组合选择器：选择器1，选择器2，选择器3…
5.选择所有元素：*
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基础选择器</title>
</head>
<body>
<div id="mydiv1">id选择器1<span>span中的内容</span></div>
<div id="mydiv1" class="blue">元素选择器</div>
<span class="blue">样式选择器</span>
</body>
<script type="text/javascript" src="js/jquery-3.4.1.js" ></script>
<script type="text/javascript">
// id选择器 #id属性值
var mydiv = $("#mydiv1");
console.log(mydiv);
// 元素名称选择器 标签名/标签名
var spans = $("span");
console.log(spans);
// 类选择器 .class属性值
var blues = $(".blue");
console.log(blues);
// 选择所有元素 *
var all = $("*");
console.log(all);
// 组合选择器
var group = $("#mydiv1,.blue,div");
console.log(group);
</script>
</html>2.属性选择器
1.$([属性名])：选择设置过指定属性名的元素
2.$([属性名=属性值]):选择设置过指定属性名为指定属性值的元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
</head>
<body>
<div id="mydiv1" class="red">id选择器1<span>span中的内容</span></div>
<div id="mydiv1" class="blue">元素选择器</div>
<span class="blue">样式选择器</span>
</body>
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 选择设置过指定属性名的元素
var ids = $("[id]");
console.log(ids);
// 选择设置过指定属性名为指定属性值的元素
var cls = $("[class='blue']");
console.log(cls);
</script>
</html>3.层次选择器
1.后代选择器: ancestor descendant (空格) 重要
2.子代选择器: parent > child （大于号）
3.相邻选择器: prev + next （加号）
4.同辈选择器: prev ~ sibling （波浪号）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>层次选择器</title>
</head>
<body>
<ul id="parent">
<li>大伯
<ol>
<li>大儿子</li>
<li>小女儿</li>
</ol>
</li>
<li>二伯</li>
<li>爸爸
<ol>
<li>大女儿</li>
<li>小儿子</li>
</ol>
</li>
<li>叔叔</li>
<li>姑姑</li>
</ul>
<ul>
<li>大伯伯</li>
</ul>
<ol>
<li>小伯伯</li>
</ol>
<ul>
<li>三伯伯</li>
</ul>
</body>
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 后代选择器 ancestor descendant （空格）
var houdai = $("#parent li");
console.log(houdai);
// 子代选择器 parent > child （大于号）
var zidai = $("#parent > li");
console.log(zidai);
// 相邻选择器 prev + next （加号）
var xl = $("#parent + ul");
console.log(xl);
// 同辈选择器 prev ~ sibling （波浪号）
var tb = $("#parent ~ ul");
console.log(tb);
</script>
</html>4.表单选择器与过滤选择器
1.表单选择器
1. ：input ，选择所有的表单元素，包括input标签、select标签、textarea标签及button标签
2. : checked，选择所有复选框
3. : radio , 选择所有单选框2.过滤选择器
- checked，选择所有被选中的元素(复选框，单选框，下拉框)
- selected，选择所有被选中的元素（下拉框）
- eq(index),匹配该下标为指定值的元素
- get(index),匹配该下标大于指定值的元素
- even，匹配下标为偶数的元素
- odd，匹配下标为奇数的元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单选择器</title>
</head>
<body>
<form id='myform' name="myform" method="post">
<input type="hidden" name="uno" value="9999" disabled="disabled"/>
姓名:<input type="text" id="uname" name="uname" /><br />
密码:<input type="password" id="upwd" name="upwd" value="123456" /><br />
年龄:<input type="radio" name="uage" value="0" checked="checked"/>小屁孩
<input type="radio" name="uage" value="1"/>你懂得 <br />
爱好:<input type="checkbox" name="ufav" value="篮球"/>篮球
<input type="checkbox" name="ufav" value="爬床" checked="checked"/>爬床
<input type="checkbox" name="ufav" value="代码"/>代码<br />
来自:<select id="ufrom" name="ufrom">
<option value="-1" selected="selected">请选择</option>
<option value="0">北京</option>
<option value="1">上海</option>
</select><br />
简介:<textarea rows="10" cols="30" name="uintro"></textarea><br />
头像:<input type="file" /><br />
<input type="image" src="http://www.baidu.com/img/bd_logo1.png" width="20" height="20"/>
<button type="submit" onclick="return checkForm();">提交</button>
<button type="reset" >重置</button>
</form>
</body>
<script type="text/javascript" src="js/jquery-3.4.1.js" ></script>
<script type="text/javascript">
// :input 选择所有的表单元素，包括input标签、select标签、textarea标签及button标签
var inputs = $(":input");
console.log(inputs);
// 元素选择器
var ipts = $("input");
console.log(ipts);
// :checkbox 选择所有的复选框
var cks = $(":checkbox");
console.log(cks);
// 选择被选中的复选框
var ckeds = $(":checkbox:checked");
console.log(ckeds);
// 获取所有被选中项（单选框和复选框、下拉框）
var checkeds = $(":checked");
console.log(checkeds);
//获取被选中的下拉框
var selected = $(":selected");
console.log(selected);
// 匹配下标为1 的复选框
var ck = $(":checkbox:eq(1)");
console.log(ck);
// :gt(index) 匹配下标大于指定值的元素
var gts = $("[name='ufav']:gt(0)");
console.log(gts);
</script>
</html>四.JQuery的DOM操作
1.操作元素的属性
1.attr(属性名称) ：获取指定得属性值，操作checkbox，没值会返回一个undefined
2.prop(属性名称): 该返回的属性值只有两个true和false
attr和prop的区分：一般用于条件判断我们选择prop，有true和false更好判断，一般正常获取属性值使用attr
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.4.1.js"></script>
</head>
<body>
<input type="checkbox" id="c1" value="man" checked="checked"/>男
<input type="checkbox" id="c2" value="woman" />女
</body>
<script>
//prop方法
var Cprop = $("#c1").prop('checked');
console.log(Cprop);
//attr方法
var Cattr = $("#c1").attr('checked');
console.log(Cattr);
</script>
</html>2.操作元素的样式
- attr(“class”)
attr(“class”,“样式名”)
addClass(“样式名”)
css(“具体样式名”,“样式值”) 重要
css({“具体样式名”:“样式值”,“具体样式名”:“样式值”…})
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.4.1.js"></script>
<style>
div{
width: 180px;
padding: 8px;
}
.blue{
background: blue;
}
.larger{
font-size: 30px;
}
.green{
background: green;
}
.red{
background: red;
}
</style>
</head>
<body>
<div id="conBule" class="blue larger">天蓝色</div>
<div id="conRed" >大红色</div>
<div id="remove" class="blue larger">天蓝色</div>
</body>
<script>
//获取样式名
var ClassName = $("#conBule").attr("class");
console.log(ClassName);
//设置样式名
$("#conRed").attr("class",ClassName);
$("#conRed").attr("class","red");
//添加样式名
$("#conRed").addClass("larger green");
//添加具体的样式
$("#remove").css("font-size","10px");
//添加多个具体的样式
$("#remove").css({"font-size":"20px","color":"green"},);
</script>
</html>3.操作元素的值
1.html() : 获取非表单元素的内容(包含元素中的html标签)
2.text() : 获取非表单元素的内容(不包含元素中的html标签)
3.val() : 获取表单元素的值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.4.1.js"></script>
</head>
<body>
<div id="html">孤独的我</div>
<div id="text"></div>
<input type="radio" value="孤独的我"/>
</body>
<script>
$("#html").html("<span>你今天很漂亮<span>");
$("#text").text("<span>你今天很漂亮<span>");
var val = $("input[type=radio]").val();
console.log(val);
</script>
</html>4.添加元素：
prepend：在被选元素内部的开头插入元素或内容，被追加的content 参 数，可以是字符、HTML 元素标记。
prependTo：把 content 元素或内容加入 selector 元素开头
append：在被选元素内部的结尾插入元素或内容，被追加的 content 参 数，可以是字符、HTML 元素标记。
appendTo：把 content 元素或内容插入 selector 元素内，默认是在尾部
before：在元素前插入指定的元素
after：在元素后插入指定的元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.4.1.js"></script>
<style>
.green{
background: green;
}
.yellow{
background: yellow;
}
.red{
background: red;
}
.blue{
background-color: blue;
}
</style>
</head>
<body>
<span class="yellow">男神</span>
<span class="red">高富帅</span>
<span class="green">奥特曼</span>
</body>
<script>
//后追加
$(".green").append("<span>名侦探柯南</span>");
$("<h1>迪迦</h1>").appendTo($(".red"));
//前追加
$(".red").prepend("<span>海王</span>");
//before
$(".green").before('<span class="blue">鸡你太美</span>');
$(".red").after('<span class="yellow">鸡你不美</span>')
</script>
</html>5.删除元素：
remove：删除所选元素或指定的子元素，包括整个标签和内容一起删。
<!DOCTYPE html> <html>
<head>
<meta charset="utf-8">
<title>遍历元素</title>
<script src="../js/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<h3>删除元素</h3>
<span class="green">jquery<a>删除</a></span> <span class="blue">javase</span> <span class="green">http 协议</span> <span class="blue">servlet</span>
</body> </html> <script type="text/javascript">
//删除所选元素 或指定的子元素
//$("span").remove();
//删除样式为 blue 的 span
//$("span.blue").remove();
//清空元素
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
