初识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)

初识JQuery框架的基本使用相关推荐

5JS库-前端框架（库）-初识jQuery
前端框架(库) #初识jQuery jQuery由美国人John Resig于2006年创建 jQuery是目前最流行的JavaScript程序库,它是对JavaScript对象和函数的封装它的设计 ...
JavaScript交互式网页设计 • 【第6章初识jQuery】
全部章节 >>>> 本章目录 6.1 jQuery概述 6.1.1 初识 jQuery 6.1.2 jQuery 基本功能 6.1.3 搭建 jQuery 开发环境 6.1 ...
jQuery框架学习第二天：jQuery中万能的选择器
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQu ...
jQuery：收集一些基于jQuery框架开发的控件/jquery插件2
Horizontal accordion: jQuery 基于jQuery开发,非常简单的水平方向折叠控件. 主页:http://letmehaveblog.blogspot.com/2007/10/ ...
web前端学习day_04:jQuery框架
jQuery框架作用:给页面添加动态效果(和js一样),目的是为了提高原生JavaScript代码的开发效率 jQuery就是一个通过js语言所以写的框架由于jQuery框架就是js语言所写,引入 ...
jQuery框架学习第一天：开始认识jQuery
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQu ...
[转载]浅析jQuery框架与构造对象
浅析jQuery框架与构造对象这是一些分析jQuery框架的文字针对jQuery 1.3.2版本面向的读者应具备以下要求 1.非常熟悉HTML 2.非常熟悉javascript语法知识 3.熟悉 ...
Java程序员从笨鸟到菜鸟之（八十八）跟我学jquery（四）JQuery框架操作元素的属性与样式
在前面几篇博客中,我们初步了解了一下jQuery的好处,基本语法,还有一些基本函数,这是学习jquery的基础,在这篇博客中,我们一起来学习一下JQuery框架操作元素的属性与样式,在web开发中,修 ...
jQuery框架的简单使用（H5）
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>作业& ...

初识JQuery框架的基本使用

初识JQuery框架的基本使用

本文内容大纲

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

How怎么用？

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

使用

基本选择

层次选择器

过滤选择器

:gt大于

:lt小于

表单选择器

创建单选框多选框下拉框

初识JQuery框架的基本使用相关推荐

最新文章

热门文章

初识JQuery框架的基本使用

初识JQuery框架的基本使用

本文内容大纲

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

How怎么用？

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

使用

基本选择

层次选择器

过滤选择器

:gt大于

:lt小于

表单选择器

创建 单选框 多选框 下拉框

初识JQuery框架的基本使用相关推荐

最新文章

热门文章

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

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

创建单选框多选框下拉框