初识JQuery框架的基本使用

最新推荐文章于 2024-11-02 23:58:20 发布

冷亿！

最新推荐文章于 2024-11-02 23:58:20 发布

阅读量1.1k

点赞数 1

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/qq_63130170/article/details/123508429

版权

初识JQuery框架的基本使用

本文内容大纲

在这里插入图片描述

//jquery不是语言是js的框架（方便简化javaScript开发：选择器、Css、Html、js动画、浏览器兼容、丰富插件）

How怎么用？

使用jQuery步骤
1.下载jQuery库
在这里插入图片描述

在这里插入图片描述

第一个不带min的体积较大但源码可修改
第二个带min的体积较小但源码不可修改

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

在这里插入图片描述

注：再写jquery之前先把jquery架包粘贴给js文件

使用

//引用Jquery

<script src="js/jquery-3.5.1/js"></script>
</body>
</html>

基本选择

ID选择器：#ID

$("#myDiv");

类选择器：.class

$(".myClass");

元素选择器:element

$("div");

通配符：* 选择全部

$("*")

层次选择器

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

//先定义一个div
<div>
	<p>爱到底</p>
	<p>胖嘟嘟</p>
</div>
//设置他的长宽
div{
	width: 100px;
	height: 100px;
	background-color: aquamarine;
}
//引用jquery
<script src="js/jquery-3.5.1.js"></script>
//然后就可以
//选择div下所有p元素的子元素
	<script type="text/javascript">
		$(".P").CSS("color","white")
	</script>

过滤选择器

获取第一个元素:first

$('li:first');

最后一个元素:last

$('li').last()

获取偶数下标的元素:even

$("tr:even")

获取奇数下标的元素:odd

$("tr:odd")

获取某一范围元素

:gt大于

$("tr:gt(0)")

:lt小于

$("tr:lt(2)")

表单选择器

创建单选框多选框下拉框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
		<form action="" id="form">
			性别：<input type="radio" name="sex" value="男" />
			<input type="radio" name="sex" value="女"/>
			爱好：<input type="checkbox" name="bobby" value="吃饭" />
			<input type="checkbox" name="bobby" value="睡觉" />
			<input type="checkbox" name="bobby" value="打豆豆" />
            地址:<select name="address">
            	<option value="湖南省">湖南省</option>
				<option value="湖北省">湖北省</option>
				<option value="河南省">河南省</option>
            </select>
			<input type="button" value="提交" id="btn"/>
		</form>
	</body>
</html>

获取选择单选框的值

var sex=$("#form input:radio:chacked").val();
console.info(sex)

获取选择多选框的值

$("#form input:checkbox:checked").each(function(){
    console.info($(this).val)
})

获取选择下拉框的值

var address=$("#form select option:selected").val();
console.info(address)

冷亿！

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

初识JQuery框架的基本使用

初识JQuery框架的基本使用

本文内容大纲

//jquery不是语言 是js的框架 （方便简化javaScript开发：选择器、Css、Html、js动画、浏览器兼容、丰富插件）

How怎么用？

注：再写jquery之前 先把jquery架包 粘贴给js文件

使用

基本选择

层次选择器

过滤选择器

:gt大于

:lt小于

表单选择器

创建 单选框 多选框 下拉框

//jquery不是语言是js的框架（方便简化javaScript开发：选择器、Css、Html、js动画、浏览器兼容、丰富插件）

注：再写jquery之前先把jquery架包粘贴给js文件

创建单选框多选框下拉框