概述：这一个月一直忙于社交项目的开发，也没时间写文章，今天刚好把JQuery的基础相关的知识看了下，为了记录巩固下学习的知识。做下记录。
首先我们要了解什么是JQuery,对于学习任何的开发语言或者框架我们都应该了解它的原理以及它能够做些什么事情，以及运用在开发中能够得到什么。
作为前端开发的工程师以及了解前端开发，对于JQuery应该不是很陌生
JQuery是非常优秀的JavaScript框架，它能够简化很多的javascript操作,今天我们就从JQuery基础的选择器开始
下载并导入jar包教程
1.按照惯例，讲解选择器之前我们应该先下载JQuery的jar包导入到项目中
JQuery各个版本下载链接
然后新建一个包文件名字命名为js 并导入jar包
image.png
2.导入jar包并使用
image.png
首先我们把JQuery选择器分为基本选择器，层级选择器，属性选择器，过滤选择器以及表单选择器
接下来我会对每个选择器使用代码的方式方便大家能够非常直观的了解各个选择器的功能以及作用
基本选择器
1.标签选择器(元素选择器)
*语法：$(“html标签名”)获得所有匹配标签名称的元素
$(function () {
//$(“html标签名”)获得所有匹配标签名称的元素
alert( $("input").val())
})
2.id选择器
*语法：$(“#id的属性名”)获取所有匹配id属性值匹配的元素
$(function () {
//$(“html标签名”)获得所有匹配标签名称的元素
alert( $("#username").val())
})
3.类选择器
*语法：$(“.class的属性值”)获得与指定的class属性值匹配的元素
$(function () {
//$(“.class的属性值”)获得与指定的class属性值匹配的元素
alert( $(".name").val())
})
层级选择器
1.后代选择器
*语法：$(“A B”)选择A元素内部的所有B元素
$(function () {
$("#b1").click(function () {
//*语法：$(“A B”)选择A元素内部的所有B元素
$("body div").css("backgroundColor","red")
})
})
2.子选择器
*语法：$(“A > B”)选择A元素内部的所有B子元素
$(function () {
$("#b1").click(function () {
//*语法：$(“A B”)选择A元素内部的所有B元素
$("body>div").css("backgroundColor","red")
})
})
属性选择器
1.属性名称选择器 A指定的是元素
*语法：$(“A[属性名]”)包含指定属性的选择器
$(function () {
$("#b1").click(function () {
*语法：$(“A[属性名]”)包含指定属性的选择器
$("div[title]").css("backgroundColor","red")
})
})
2.属性选择器
*语法：$(“A[属性名=‘值’]”)包含指定属性等于指定值的选择器
$(function () {
$("#b1").click(function () {
//*语法：$(“A B”)选择A元素内部的所有B元素
$("div[title=zhangsan]").css("backgroundColor","red")
})
})
3..复合属性选择器
*语法：$(“A[属性名=‘值’][]…”)包含多个属性条件的选择器
$(function () {
$("#b1").click(function () {
//*语法：$(“A B”)选择A元素内部的所有B元素
$("div[title=zhangsan][gender=男][age=十八]").css("backgroundColor","red")
})
})
过滤选择器
1.首元素选择器
*语法 :first获得选择的元素中的第一个元素
$(function () {
$("#b1").click(function () {
//*语法：$(“A B”)选择A元素内部的所有B元素
$("div:first").css("backgroundColor","red")
})
})
2.尾元素选择器
*语法. :last获得选择的元素中的最后一个元素
$("#b1").click(function () {
//*语法：$(“A B”)选择A元素内部的所有B元素
$("div:last").css("backgroundColor","red")
})
})
3.非元素选择器
*语法：not(selecter)不包含指定内容的元素
$(function () {
$("#b1").click(function () {
//*语法：$(“A B”)选择A元素内部的所有B元素
$("div:not([id=span])").css("backgroundColor","red")
})
})
4.偶数选择器
*语法：even偶数，从0开始计数
<script type="text/javascript">
$(function () {
$("#b1").click(function () {
$("div:even").css("backgroundColor","Red")
})
})
</script>
5.奇数选择器
*语法：odd奇数，从0开始计数
<script type="text/javascript">
$(function () {
$("#b1").click(function () {
$("div:odd").css("backgroundColor","Red")
})
})
</script>
6.等于索引选择器
*语法：eq(index)指定索引元素
<script type="text/javascript">
$(function () {
$("#b1").click(function () {
$("div:eq(4)").css("backgroundColor","Red")
})
})
</script>
7.大于索引选择器
*语法：gt(index)大于指定索引元素
<script type="text/javascript">
$(function () {
$("#b1").click(function () {
$("div:gt(4)").css("backgroundColor","Red")
})
})
</script>
8.小于索引选择器
*语法：lt(index)小于指定索引元素
<script type="text/javascript">
$(function () {
$("#b1").click(function () {
$("div:lt(4)").css("backgroundColor","Red")
})
})
</script>
9.标题选择器
*语法：header获得标题元素，固定写法
<script type="text/javascript">
$(function () {
$("#b1").click(function () {
$("div:header").css("backgroundColor","Red")
})
})
</script>
5.表单过滤选择器
1.可用元素选择器
*语法：enable获得可用元素
<script type="text/javascript">
$(function () {
$("#b1").click(function () {
$("div:enabled").css("backgroundColor","Red")
})
})
</script>
2.不可用元素选择器
*语法：disable获得不可用元素
<script type="text/javascript">
$(function () {
$("#b1").click(function () {
$("div:disabled").css("backgroundColor","Red")
})
})
</script>
3.选中元素选择器
*语法：checked获得单选/复选框选中的元素
<script type="text/javascript">
$(function () {
$("#b1").click(function () {
$("input[id=checkId]:checked").css("backgroundColor","Red")
})
})
</script>
4.选中选择器
*语法：selected获得下拉框选中的元素
<script type="text/javascript">
$(function () {
$("#b1").click(function () {
$("input[id=checkId]:selected").css("backgroundColor","Red")
})
})
</script>
DOM操作
1.内容操作
html():获取/设置元素的标签体内容
<script type="text/javascript">
$(function () {
$("#b1").click(function () {
alert( $("#checkId").html())
})
})
</script>
text():获取/设置元素的标签体纯文本内容
<script type="text/javascript">
$(function () {
$("#b1").click(function () {
alert( $("#helloworld").text())
})
})
</script>
val ：获取/设置元素value值
<script type="text/javascript">
$(function () {
$("#b1").click(function () {
alert( $("#helloworld").val())
})
})
</script>
2.属性操作
通用的属性操作
1.attr:获取/设置元素的属性
<script type="text/javascript">
$(function () {
$("#b1").click(function () {
alert( $("#helloworld").attr("id","index"))
})
})
</script>
2.removeattr：删除属性
<script type="text/javascript">
$(function () {
$("#b1").click(function () {
alert( $("#helloworld").removeAttr("id"))
})
})
</script>
3.prop获取/设置元素的属性
<script type="text/javascript">
$(function () {
$("#b1").click(function () {
alert( $("#helloworld").prop("id","name"))
})
})
</script>
4.removeprop删除属性
<script type="text/javascript">
$(function () {
$("#b1").click(function () {
alert( $("#helloworld").removeProp("id","name"))
})
})
</script>
attr和prop的区别：
如果操作的是元素的固定属性，则建议使用prop
如果操作的是元素的自定义属性，则建议使用attr
3.对class属性的操作
addClass();添加Class的属性值
<script type="text/javascript">
$(function () {
$("#b1").click(function () {
alert( $("#helloworld").addClass("id","name"))
})
})
</script>
removeClass():删除Class的属性值’
<script type="text/javascript">
$(function () {
$("#b1").click(function () {
alert( $("#helloworld").removeClass("id"))
})
})
</script>
toggleClass():切换Class
<script type="text/javascript">
$(function () {
$("#b1").click(function () {
alert( $("#helloworld").toggleClass("id","helloword"))
})
})
</script>
CRUD操作
append()：父元素将子元素追加到末尾
*对象1.append(对象2)：将对象2添加到对象1元素内，并且在末尾
prepend():父元素将子元素追加到开头
*对象1.prepend(对象2)：将对象2添加到对象1元素内，并且在开头
appendTo()
*对象1.appendTo(对象2)将对象1添加到对象2的内部，并且在末尾
prependTo
*对象1.prependTo(对象2)：将对象1添加到对象2的内部，并且在开头
after：添加元素到元素的后面
*对象1.after(对象2)将对象2添加到对象1的后面 平级
before：添加元素到元素的前面
*对象1.before(对象2)将对象2添加到对象1的前面
innerAfter()
*对象1.innerAfter(对象2)将对象2添加到对象1的后面 平级
innerBefore()
*对象1.innerBefore(对象2)将对象2添加到对象1的前面 平级
remove()移除元素
empty()清空元素的所有后代元素
网友评论