jQuery入门基本语法

白未

已于 2022-03-17 22:29:13 修改

阅读量929

点赞数

文章标签： jquery 前端 javascript

于 2022-03-16 18:15:56 首次发布

本文链接：https://blog.csdn.net/yzq102873/article/details/123526828

版权

1.什么是jQuery？

jQuery是—>javaScript类库——封装了很多js代码

JavaScript库：jQuery(90%)、ExtJS

官方地址：http://jquery.com/

2.为什么要学习jQuery

为了简化JavaScript开发：选择器、CSS、HTML事件处理、JS动画、浏览器兼容、丰富插件

3.使用jQuery的步骤

1.下载jQuery库

2.引入：将js文件复制到项目中

<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>

3.使用

4.jQuery的简单案例

案例1：拿到文本框的值

          window.onload=function(){
				//拿到按钮
				var btn=document.getElementById("btna");
				//给按钮添加点击事件
				btn.onclick=function(){//匿名函数
					//拿到文本框的值
					var a=document.getElementById("aa").value;
					alert(a);
				}
		  }
        
         //身体部分
        <body>
		<input id="btna" type="button" value="点击[js方式]" />
		</body>

5.jQuery的选择器

1.基本选择器
   常用选择器：
   ID选择器：#ID
   类选择器：.class
   元素选择器:element
   通配符：*
   多个选择器(并集)：selector1,selector2
   多个选择器(交集)：selector1 selector2

案例2：分别使用基本选择器，改变元素的背景颜色和字体颜色（div、p、span）

<head>
<script type="text/javascript">
			//页面载入函数加载DOM
			$(function(){//相当于window.onload
				//基本选择器
				$("#xx").css("background","yellow");//id选择器
				$(".yy").css({"background":"yellow","color":"red"});//类选择器
				$("div").css("background","yellow");//标签选择器=元素选择器
				$("*").css("background","yellow");//通配符:全部
            }）
</head>
<body>
<div id="xx">
			<p>这是第一个div中的段落&nbsp;<span>单身xx羡慕</span></p>
			<span>xxx和xxx的内部爱情故事</span>
		</div>
		<div class="yy">
			这是第二个div
		</div>
		<p>这是第一个外面的段落</p>
		<span>麻拐和蛤蟆的外部爱情故事</span>
</body>

2.层次选择器
查找所有元素，查询子元素
案例3：使用层次选择器，选择某个元素下面的所有元素和子元素

<head>
<script type="text/javascript">
			//页面载入函数加载DOM
			$(function(){//相当于window.onload
				//层次选择器
				$("p,span").css("background","yellow");//并集
				$("div span").css("background","yellow");//交集 后代标签span
				$("div>span").css("background","yellow");//父子关系
				$("p+span").css("background","yellow");//兄弟关系p紧跟的span
            }）
</head>
<body>
<div id="xx">
			<p>这是第一个div中的段落&nbsp;<span>单身xx羡慕</span></p>
			<span>xxx和xxx的内部爱情故事</span>
		</div>
		<div class="yy">
			这是第二个div
		</div>
		<p>这是第一个外面的段落</p>
		<span>麻拐和蛤蟆的外部爱情故事</span>
</body>

3.过滤选择器
   参考jQuery文档
   获取第一个元素:first
   最后一个元素:last
   获取偶数下标的元素:even
   获取奇数下标的元素:odd
   获取某一范围元素
       :gt大于
       :lt小于
案例4：使用过滤选择器，选择li中的元素

<head>
<script type="text/javascript">
			//页面载入函数加载DOM
			$(function(){//相当于window.onload
				//过滤选择器
				  $("ul>li:first").css("background","yellow");//第一个
				  $("ul>li:last").css("background","yellow");//最后一个
				  $("ul>li:even").css("background","yellow");//偶数下标
				  $("ul>li:odd").css("background","yellow");//奇数下标
				  $("ul>li:gt(0)").css("background","yellow");//大于0
				  $("ul>li:lt(4)").css("background","yellow");//小于4;
				 //0>x>4先小于后大于
				  $("ul>li:lt(4):gt(0)").css("background","yellow");//大于0小于4
           }）
</head>
<body>
    <ul>
			<li>0-单身xx</li>
			<li>1-单身xx</li>
			<li>2-单身xx</li>
			<li>3-单身xx</li>
			<li>4-单身xx</li>
	</ul>
</body>

案例5：表格隔行换色

<head>
<script type="text/javascript">
			//页面载入函数加载DOM
			$(function(){//相当于window.onload
                 $("table tr:even").css("background","pink");
				 $("table tr:odd").css("background","blue");
			}）
</head>
<body>
           <table border="1px" width="50%">
			<tr>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			</tr>
		</table>
</body>

4.表单选择器
   参考jQuery文档
   获取选择单选框的值
   获取选择多选框的值
   获取选择下拉值
   案例6：获取表单中的单选、多选、下拉值

<head>
<script type="text/javascript">
			//页面载入函数加载DOM
			$(function(){//相当于window.onload
                $("#ok").click(function(){
					//拿性别
					var sex=$("#myForm input:radio:checked").val();
					console.info(sex);

					//拿爱好
					$("#myForm input:checkbox:checked").each(function(){
						console.info($(this).val());
					})

					//拿地址
					var address=$("#myForm select option:selected").val();
					console.info(address);
				})
			}）
</head>
<body>
          <form action="" id="myForm">
			性别：<input type="radio" name="sex" value="男" />男
			<input type="radio" name="sex" value="女" />女
			<input type="radio" name="sex" value="妖" />妖<br />
			爱好：<input type="checkbox" value="看美女" />看美女
			<input type="checkbox" value="看帅哥" />看帅哥
			<input type="checkbox" value="敲代码" />敲代码
			<input type="checkbox" value="装清高" />装清高<br>
			地址：
			<select>
				<option value ="湖南省">湖南省</option>
				<option value ="湖北省">湖北省</option>
				<option value ="浙江省">浙江省</option>
				<option value ="广东省">广东省</option>
			</select><br>
			<input type="button" value="提交" id="ok"/>
		</form>
</body>

5.思维导图解析

白未

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery入门基本语法

1.什么是jQuery？jQuery是—>javaScript类库——封装了很多js代码JavaScript库：jQuery(90%)、ExtJS官方地址：http://jquery.com/ 2.为什么要学习jQuery为了简化JavaScript开发：选择器、CSS、HTML事件处理、JS动画、浏览器兼...
复制链接

扫一扫