jQuery_01入门

最新推荐文章于 2024-09-25 23:01:10 发布
最新推荐文章于 2024-09-25 23:01:10 发布
阅读量1.6k 收藏 2
点赞数 3
文章标签： jquery javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_67768699/article/details/123387397
版权

jQuery_01入门

一、了解什么是jQuery

  

1.解释：  j:javascript   Query: 查询

2.jQuery是JavaScript的类库：封装了很多JS代码

3.官方地址：jQuery

4.查看官方jQueryLOGO：write less，do more（写得少，做得多）

二、jQuery的作用

  1. 为了简化JavaScript开发
  2. 提供了大量的选择器，更加方便地获取元素
  3. CSS、HTML事件处理、JS动画、浏览器兼容、丰富插件

三、使用jQuery的步骤   

      1.下载jQuery库

                 开发版本：jquery-3.3.1.js（所占内存较大，电脑负荷大）

                 生产版本：jquery-3.3.1.min.js（所占内存较小，电脑负荷比较小）

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

      3.使用

       通过script标签的src属性引用

           注：如果一个script标签中有src属性并且有值，那么该标签中不能再次编写代码

      4.CDN远程服务的导入

        减轻当前程序服务器的压力

          (1).在主页搜素jQuery

          (2).选择版本复制<script>标签

          (3).通过script标签的src属性引用

四、js与jQuery的对比

  1. Js获取输入框的值（代码使用过多）

 

     2 . jQuery获取输入框的值（减少代码的使用）

 

五、基本选择器

     1.ID选择器：#ID

        // id选择器的使用设置单个对象

            例：$("#odiv").css("background","red");

       //为多个对象设置css样式

            例：$("#odiv").css({"background":"yellow","width":"100px","height":"80px"})

     2.类选择器：.class

       // 类选择器的使用

            例：$(".oli").css("background","orange");

     3.元素选择器:element

       // 标签选择器的使用

           例： $("p").css("background","blue");

     4.通配符：*

       // 通配符选择器

           例：$("*").css("background","green");

      5.多个选择器(并集)：selector1,selector2

        //并集选择器中的选择器可以是多样的（分组选择器）
            例： $(".obox1,.obox2,p").css("background","green");


      6.多个选择器(交集)：selector1 selector2

         // 交集选择器（后代选择器）
            例： $(".obox1 p").css("background","red");


      7.  结合使用
            例：$(".obox1 span,obox2").css("background","yellow");

六、层次选择器

   1.层次选择器的使用（层次后代选择器）
                例： $("#mydemo li").css("background","pink");
    2. 层次选择器的使用（层次子代选择器）
                例： $("#mydemo>li").css("background","pink");

七、过滤选择器

     1.获取第一个子节点
                例： $("#mydemo>li:first").css("background","blue");

8
     2. 获取最后个子节点
                例：$("#mydemo>li:last").css("background","red");


     3.获取所有个子节点
                例：$("#mydemo:last").css("background","red");


     4.根据下标获取指定的子元素eq()
                例：$("#mydemo>li:eq(1)").css("background","red");


     5. even匹配首页索引值为偶数的元素，元素位置为奇数
                例： $("#mydemo>li:even").css("background","yellow");


     6.odd匹配首页索引值为奇数的元素，元素位置为偶数
                例： $("#mydemo>li:odd").css("background","pink");

     7. &gt大于 &lt小于
                // 设置tr下标大于2的所有tr设置背景颜色
                    例： $("table tr:gt(2)").css("background","pink");
                // 设置tr下标小于4的所有tr设置背景颜色
                    例： $("table tr:lt(4)").css("background","green");

8.表格隔行换颜色
                   $("table tr:even").css("background","yellow");
                   $("table tr:odd").css("background","pink");

            (1.)// 设置tr下标小于4的所有tr设置背景颜色
                // $("table tr:lt(4)").css("background","green");


            (2.)  // 设置tr下标大于2小于4的所有tr设置背景颜色
                // $("table tr:lt(4):gt(2)").css("background", "green");


             (3.) 注：如果是区间先大于的情况下会再次排布下标
                 $("table tr:gt(2):lt(4)").css("background", "green");

完整代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 导入jQuery库 -->
		<script src="js/jquery-3.3.1.min.js" type="text/javascript">
		</script>
		<script type="text/javascript">
			// jQuery中提供了很多选择器为了更加方便的获取元素
			// 加载函数
			$(function() {
				// id选择器的使用
				// $("#odiv").css("background","red");
				//为多个对象设置css样式
				// $("#odiv").css({"background":"yellow","width":"100px","height":"80px"})
				// 类选择器的使用
				// $(".oli").css("background","orange");
				// 标签选择器的使用
				// $("p").css("background","blue");
				// 通配符选择器
				// $("*").css("background","green");
				//并集选择器中的选择器可以是多样的（分组选择器）
				// $(".obox1,.obox2,p").css("background","green");
				// 交集选择器（后代选择器）
				// $(".obox1 p").css("background","red");
				// 结合使用
				// $(".obox1 span,obox2").css("background","yellow");
				// 层次选择器的使用（层次后代选择器）
				// $("#mydemo li").css("background","pink");
				// 层次选择器的使用（层次子代选择器）
				// $("#mydemo>li").css("background","pink");
				// jQuery中的过滤选择器
				// 获取第一个子节点
				// $("#mydemo>li:first").css("background","blue");
				// 获取最后个子节点
				// $("#mydemo>li:last").css("background","red");
				// 获取所有个子节点
				// $("#mydemo:last").css("background","red");
				// 根据下标获取指定的子元素eq()
				// $("#mydemo>li:eq(1)").css("background","red");
				// even匹配首页索引值为偶数的元素，元素位置为奇数
				// $("#mydemo>li:even").css("background","yellow");
				// odd匹配首页索引值为奇数的元素，元素位置为偶数
				// $("#mydemo>li:odd").css("background","pink");
				// 表格隔行换颜色
				// $("table tr:even").css("background","yellow");
				// $("table tr:odd").css("background","pink");
				// &gt大于 &lt小于
				// 设置tr下标大于2的所有tr设置背景颜色
				// $("table tr:gt(2)").css("background","pink");
				// 设置tr下标小于4的所有tr设置背景颜色
				// $("table tr:lt(4)").css("background","green");
				// 设置tr下标大于2小于4的所有tr设置背景颜色
				// $("table tr:lt(4):gt(2)").css("background", "green");
				// 注：如果是区间先大于的情况下会再次排布下标
				$("table tr:gt(2):lt(4)").css("background", "green");
				
			})
		</script>
	</head>
	<body>
		<div id="odiv">
			我是div内容
		</div>
		<p>
			p段落标签
		</p>
		<br>
		<ul>
			<li>item1</li>
			<li class="oli">item2</li>
			<li>item3</li>
			<li class="oli">item4</li>
			<li class="oli">item5</li>
		</ul>
		<hr>
		<div class="obox1">
			1
			<p>0<span>span内容</span></p>
			<span>9</span>
			<p>8</p>
		</div>
		<hr>
		<div class="obox2">
			2
		</div>
		<hr>
		<ul id="mydemo">
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<span>4</span>
			<p>5</p>
			<ol>
				<li>item1</li>
				<li>item2</li>
				<li>item3</li>
				<li>item4</li>
			</ol>
		</ul>
		<hr>
		<table border="1" width="100%" height="300px">
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
		</table>
	</body>
</html>


                

八、表单选择器

          1. 表单的使用
                例 ：$("form input:input").css("background","red");
                例： $(":text").css("background","yellow");


          2.获取单选按钮设置value属性
                例：$(":radio").val("女");


          3./获取选中的单选val
                例：console.log($("#odiv input:checked").val());


          4.获取所有复选框的vaule属性值
                例： var cks = $(".obox input:checkbox").val();


          5.jQuery中遍历方式
                例：$.each(cks,function(){
                    console.log($(this).val())
                 })
                $.each(cks,function(){
                     if($(this).prop('checked'==true)){
                         console.log($(this).val())
                     }
                })

           6.获取下拉框的值选中的值
                例：$(".obox2 select option").each(function(){
                        if($(this).prop('selected')==true){
                                console.log($(this).val());
                            }
                });

完整代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
		// 在一个语句中不能同时存在js和jquery的语法
		// 加载函数
			$(document).ready(function(){
				// 表单的使用
				// $("form input:input").css("background","red");
				// $(":text").css("background","yellow");
				// 获取单选按钮设置value属性
				// $(":radio").val("女");
				//获取选中的单选val
				// console.log($("#odiv input:checked").val());
				// 获取所有复选框的vaule属性值
				// var cks = $(".obox input:checkbox").val();
				//jQuery中遍历方式
				// $.each(cks,function(){
				// 	console.log($(this).val())
				// })
				// $.each(cks,function(){
				// 	if($(this).prop('checked'==true)){
				// 		console.log($(this).val())
				// 	}
				// })
				// var ckss = $(".obox input:checkbox:checked");
				// $.each(ckss,function(){
				// 	if($(this).prop('checked')==true){
				// 		console.log($(this).val())
				// 	}
				// });
				// 获取复选框选中的值
				// $(".obox2 select option").each(function(){
				// 		console.log($(this).val())
				// });
				
				// console.log($(".obox2 select option:selected").val());
				// 获取下拉框的值选中的值
				$(".obox2 select option").each(function(){
						if($(this).prop('selected')==true){
								console.log($(this).val());
							}
				});
				
			});
		</script>
	</head>
	<body>
		<form action="" method="post">
			<input type="text" />
			<input type="text" />
			<input type="password" />
			<input type="radio" value="男"/>男
			<input type="checkbox" />
			<input type="file" />
			<input type="image" />
			<input type="submit" />
			</form>
			<div id="" style="width: 100px; height: 50px; border:1px  solid aqua;">
			</div>
			<div id="odiv">
				<input checked="checked" type="radio" name="sex"  />男
				<input type="radio" name="sex"  />女
			</div>
			<div class="obox">
				<input type="checkbox" value="1" />1
				<input checked="checked" type="checkbox" value="2" />2
				<input type="checkbox" value="3" />3
				<input checked="checked" type="checkbox" value="4" />4
				<input type="checkbox" value="5" />5
			</div>
			<div class="obox2">
				<select name="">
					<option value="1">1</option>
					<option value="2">2</option>
					<option selected="selected" value="3">3</option>
					<option value="4">4</option>
				</select>
			</div>
		</body>
</html>

ning_ning_03
关注
jquery-3.3.1.js和 jquery-3.3.1.min.js
02-08
jquery-3.3.1.js最新版本，纯净正版。 JQuery是一个快速简洁的JavaScript框架，使用户能更方便快捷得处理HTML文档、事件、实现动画效果，且方便地为网站提供AJAX交互。
jquery-3.3.1.js和jquery-3.3.1.min.js.zip
04-18
JQuery是一个快速简洁的JavaScript框架，jquery-3.3.1.js和jquery-3.3.1.min.js，需要的朋友可以下载。
jQuery基础入门
qq_68180489的博客
04-20 488
一：jQuery简介 1JQuery是什么？ 1.1JavaScript库：封装了很多JS代码 1.2JavaScript库：jQuery(90%)、Ext JS 1.3官方地址：http://jquery.com 2.为什么要学习jQuery? 为了简化JavaScript开发：选择器、CSS、HTML事件处理、JS动画、浏览器兼容、丰富插件 3.JQuery如何使用？ 3.1.工具：HBuilder 3.2.使用jQuery步骤 1.下载jQuery库 下载版本： 开发版本：jqu
jQuery国内大厂CDN加速链接
最新发布
邓草的博客
09-25 1489
jQuery的CDN有很多，但都很不稳定，例如国内的bootcdn经常抽风，还有其他的常见的例如jQuery官方的jsDeliverunpkg.comstaticfile，这些都是经常抽风的。导致使用了线上的CDN的页面打开受到影响，那么就没有国内好用的CDN吗？下面是我汇总的一些大厂的！
JQuery_基础
种一颗十年前的树
11-15 151
02_JQuery_概念 jQuery是什么? 是个js的框架； 03_JQuery_快速入门 jQuery-3.3.1.min.js和jQuery-3.3.1.js有什么区别？ jQuery-3.3.1.min.js：体积小，无缩进；生产环境中 jQuery-3.3.1.js：体积大，格式练好；调试环境中； 04_JQuery对象和JS对象区别与转换 jQuery对象和javascript对象的...
jquery-3.3.1.slim.min.js
08-02
jquery-3.3.1.slim.min.js
jquery_api.rar_jquery_jquery api_jquery chm_jquery 例子
09-22
**jQuery API 入门教程** jQuery 是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互。本教程旨在帮助初学者快速掌握jQuery API的使用，以便在网页开发中实现高效的功能。 ### ...
jquery_入门实例
03-20
**jQuery 入门实例** jQuery 是一个高效、简洁且功能丰富的 JavaScript 库，它极大地简化了 JavaScript 对HTML 文档的遍历、事件处理、动画以及Ajax交互。在本实例中，我们将探讨如何开始使用 jQuery，了解其核心...
jquery_study_all and jquery_api and jquery_ui_1.8.6
07-29
1. **开天辟地入门篇**： jQuery的初识始于它的核心概念，包括如何引入jQuery库，以及使用 `$` 符号作为入口开始编写jQuery代码。这个阶段主要涉及基础选择器的使用，如ID选择器、类选择器、标签选择器等，以及基础...
jquery_validate_js的基本用法入门中文WORD版
07-22
资源名称：jquery_validate_js的基本用法入门 中文WORD版内容简介：本文档是jquery.validate.js的基本用法入门；jquery.validate.js是jquery下的一个验证插件，功能比较强大。感兴趣的朋友可以过来看看资源截图： ...
jQuery-Lerning.zip_Jquery 基础教程_javascript 教程_jquery_web前端
09-22
这个压缩包提供的是一份jQuery入门教程，适合初学者学习，特别是对JavaScript有一定了解的开发者。 jQuery的基础教程主要涵盖以下几个核心知识点： 1. **jQuery选择器**：jQuery的选择器是其强大的功能之一，它们...
jquery-3.3.1.zip
09-08
关于JQuery3.3.1版本的使用
jQuery 3.3.1.zip
05-23
jQuery是一款免费且开放源代码的JS代码库，由John Resig创建，它是轻量级的js库，兼容CSS3，兼容各种浏览器（IE6.0 , FF1.5 , Safari2.0 , Opera9.0 ）。jQuery 3.3.1 更新日志：2018-01-31核心确保jQuery.holdReady位于正确的位置。尺寸确保我们在显示“inline”的元素上获取适当的宽度和高度值。事件确保触发器数据传递给无线电点击事件处理程序；恢复：触发器复选框和广播单击事件相同；恢复：添加无线电点击触发测试。
jquery-3.3.1.rar
08-10
jquery
jquery-3.3.1
01-12
最新的jquery文档.jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是"write Less，Do More"，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery_3.3.1_API_Docs_CN.CHM
03-29
jQuery_3.3.1_API_Docs_CN.CHM中文API，版本：jQuery_3.3.1_API_Docs_CN.CHM，解压即食，
为什么要使用jQuery?
Super_Blanks的博客
04-11 749
首先必须得了解为什么要学习JQuery,JQuery有哪些优点,当然是相对于传统的Javascript和DOM来说了,现在将JQuery的优势总结如下: 1,轻量级. 　　JQuery非常小,压缩包只有18KB左右. 2,强大的选择器. 　　JQuery不仅支持CSS里的所有选择器,还有JQuery独有的选择器. 3,出色的DOM操作封装. 　　JQuery封装
jQuery 3.3.1 cdn链接
热门推荐
BetterWorld的专栏
05-28 1万+
jQuery 3.3.1 cdn链接https://cdnjs.com/libraries/jquery/官网查询地址：&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKc...
最新版jQuery v3.3.1的BUG以及解决办法（什么问题不重要，怎么解决问题才重要）...
weixin_34166472的博客
09-12 835
发现问题 最新版的 FineUIPro v5.2.0 中，我们将内置的 jQuery v1.12.4 升级到 jQuery v3.3.1 ，可以看升级记录： +升级到jQuery v3.3.1。    -jQuery v3.x支持的浏览器：Chrome，Edge，Firefox，Safari，IE9+。    -增加类型JSLibrary枚举值JQv1，用来引入jQuery v1.x。  ...
jQuery Mobile框架入门教程
"jQuery Mobile开发入门手册" jQuery Mobile是一款强大的前端框架，专为移动设备的Web应用程序设计，旨在简化跨平台的开发工作。本手册主要针对初学者，旨在帮助开发者快速理解和掌握jQuery Mobile的基本概念和应用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ning_ning_03

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值