jQuery基础

最新推荐文章于 2021-01-25 11:24:50 发布
最新推荐文章于 2021-01-25 11:24:50 发布
阅读量139 收藏
点赞数
分类专栏： 前端 文章标签： jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44953728/article/details/102901344
版权

一.JQ概述

1. jQuery的概述

jQuery是一个优秀的javascript库，兼容css3和各大浏览器，提供了dom、events、animate、ajax等简易的操作。 并且jquery的插件非常丰富，大多数功能都有相应的插件解决方案。jquery的宗旨是 write less do
more。

JQ就是js库, 封装了JS常见的操作,我们使用JS起来更加的简单 (特别是dom这块)

2. jQuery的作用

jQuery最主要的作用是简化js的Dom树的操作 ,让js代码写起来更加简单

3. jQuery框架的下载

jQuery的官方下载地址：http://www.jquery.com

4. jQuery的版本

  • 1.x：兼容IE678，使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)
  • 2.x：不兼容IE678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)
  • 3.x：不兼容IE678，很多老的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本.
  • 注:开发版本与生产版本，命名为jQuery-x.x.x.js为开发版本，命名为jQuery-x.x.x.min.js为生产版本，开发版本源码格式良好，有代码缩进和代码注释，方便开发人员查看源码，但体积稍大。而生产版本没有代码缩进和注释，且去掉了换行和空行，不方便发人员查看源码，但体积很小

5.jQuery入门

步骤:

  1. 拷贝jq库到工程
  2. 把jq引入页面
  3. 等页面加载完成, alter(“hello…”);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF‐8">
<title>Insert title here</title>
<!‐‐ 引入jQuery ‐‐>
<script type="text/javascript" src="../js/jquery‐3.3.1.js"></script>
<!‐‐ 测试jQuery ‐‐>
<script type="text/javascript">
  $(function(){
  alert("jQuery引入成功....");
  });
</script>
</head>
<body>
</body>
</html>

注: 没有导入JQuery库会出现如下bug:
在这里插入图片描述

二.jQuery对象和JS对象转换

JS对象: document.getElemxxx() 获得的都是JS对象 大部分都是属性

JQ对象: $() 大部分都是方法

jQuery本质上虽然也是js，但如果使用jQuery的属性和方法那么必须保证对象是jQuery对象而不是js方式获得的DOM对象。使用js方式获取的对象是js的DOM对象，使用jQuery方式获取的对象是jQuery对象。两者的转换关系如下：

  • js的DOM对象转换成jQuery对象，语法：$(js对象)

  • jQuery对象转换成js对象，语法：jquery对象[索引] 或 jquery对象.get(索引); 一般索引写0

三.jQuery中事件的使用

在这里插入图片描述

1.事件在jq里面都封装成了方法. 去掉了JS里面on. 语法:

1.回顾js事件, 一般写标签的属性
	<input type="button" onclick="函数"/>
    
2.jq事件语法   
	jq对象.事件方法名(function(){});

2.jQuery的事件绑定与解绑

  • 事件的绑定
jq对象.on(事件的类型,function(){} );
其中：事件名称是jQuery的事件方法的方法名称，例如：click、mouseover、mouseout、focus、blur等
  • 事件的解绑
jQuery元素对象.off(事件名称);

其中：参数事件名称如果省略不写，可以解绑该jQuery对象上的所有事件

3.事件切换

  • 普通写法
<script type="text/javascript">
	$(function() {
		$("#myDiv").mouseover(function() {
			$(this).css("background", "green");
		});
		$("#myDiv").mouseout(function() {
			$(this).css("background", "red");
		});
	});
</script>
  • 链式写法
<script type="text/javascript">
	$(function() {
		$("#myDiv").mouseover(function() {
			$(this).css("background", "green");
		}).mouseout(function() {
			$(this).css("background", "red");
		});
	});
</script>

四.jq动画

1.基本效果

  • 方法
方法名称解释
show([speed],[easing],[fn]])显示元素方法
hide([speed,[easing],[fn]])隐藏元素方法
toggle([speed],[easing],[fn])切换元素方法，显示的使之隐藏，隐藏的使之显示
  • 参数
参数名称解释
speed三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
easing用来指定切换效果，默认是"swing"，可用参数"linear"
fn在动画完成时执行的函数，每个元素执行一次

2.滑动效果

  • 方法
方法名称解释
slideDown([speed,[easing],[fn]])向下滑动方法
slideUp([speed,[easing],[fn]])向上滑动方法
slideToggle([speed],[easing],[fn])切换元素方法，显示的使之隐藏，隐藏的使之显示
  • 参数
参数名称解释
speed三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
easing用来指定切换效果，默认是"swing"，可用参数"linear"
fn在动画完成时执行的函数，每个元素执行一次

3. 淡入淡出效果

  • 方法
方法名称解释
fadeIn([speed,[easing],[fn]])淡入显示方法
fadeOut([speed,[easing],[fn]])淡出隐藏方法
fadeToggle([speed],[easing],[fn])切换元素方法，显示的使之隐藏，隐藏的使之显示
  • 参数
参数名称解释
speed三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
easing用来指定切换效果，默认是"swing"，可用参数"linear"
fn在动画完成时执行的函数，每个元素执行一次

五.选择器

选择器的作用: 得到标签对象, 获得就是JQ对象

1.基本选择器

  • 语法
选择器名称语法解释
标签选择器（元素选择器）$(“html标签名”)获得所有匹配标签名称的于元素
id选择器$("#id的属性值")获得与指定id属性值匹配的元素
类选择器$(".class的属性值")获得与指定的class属性值匹配的元素

2. 层级选择器

  • 语法
选择器名称语法解释
后代选择器$("A B ")选择A元素内部的所有B元素
子选择器$(“A > B”)选择A元素内部的所有B子元素
兄弟选择器$(“A + B”)获得A元素同级的下一个B元素
兄弟选择器$(“A ~ B”)获得A元素同级的所有B元素

3.属性选择器

  • 语法
选择器名称语法解释
属性选择器$(“A[属性名]”)包含指定属性的选择器
属性选择器$(“A[属性名=值]”)包含指定属性等于指定值的选择器

4.基本过滤选择器

  • 语法
选择器名称语法解释
首元素选择器:first获得选择的元素中的第一个元素
尾元素选择器:last获得选择的元素中的最后一个元素
非元素选择器:not(selecter)不包括指定内容的元素
偶数选择器:even偶数，从 0 开始计数
奇数选择器:odd奇数，从 0 开始计数
等于索引选择器:eq(index)指定索引元素
大于索引选择器:gt(index)大于指定索引元素
小于索引选择器:lt(index)小于指定索引元素

5.表单属性选择器

  • 语法
选择器名称语法解释
可用元素选择器:enabled获得可用元素
不可用元素选择器:disabled获得不可用元素
选中选择器:checked获得单选/复选框选中的元素
选中选择器:selected获得下拉框选中的元素

六.语法

1.jQuery操作CSS样式

API方法解释
css(name)获取CSS样式
css(name,value)设置CSS样式

2.jQuery操作标签的类名

API方法解释
addClass(value)给指定的对象添加类名
removeClass(value)给指定的对象删除类名
toggleClass(value)如果没类名，则添加，如果有类名，则删除

3.jQuery操作标签属性

API方法解释
attr(name,[value])获得/设置属性的值
prop(name,[value])获得/设置属性的值(checked，selected)

attr与prop的注意问题

attr与prop是以1.6为界限

checked 和 selected 建议 使用prop获取

其他使用attr获取
劉某人゜
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery基础文件
03-30
此“jQuery基础文件”压缩包包含了jQuery的三个主要版本：1.11.3，2.1.4和3.3.1。每个版本都有其特定的发布日期和功能特性，适合不同项目的需求。 1. jQuery 1.11.3： 这是jQuery 1.x系列的一个稳定版本，主要支持...
jQuery入门
PengK_aha的博客
11-22 425
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> // window.onload=function (){ // var btnObj = document.getElemen.
jQuery 的总结1
Amberdreams
10-09 324
jQuery 是对JavaScript的封装，能够使我们使用少量的代码就可以达到同原生 JS 的效果。 一、是否需要导入框架 原生 JS 不需要导入框架，可以直接在&lt;script&gt;标签中进行逻辑处理； jQuery 需要先在官方网站下载文档，该文档分为两部分：开发框架和生产框架，两者最大的区别在于：生产框架是对开发框架的压缩，方便在服务器上进行部署。 二、初始使用 JS 的使...
JQuery改造alert和confirm弹框
笨小孩
11-20 9563
背景：在有些项目里边，有些弹框样式要定制化，使用插件的弹框无法满足样式需求，这里写一个用jq写的弹框示例。 eg： 使用说明： 1、示例中用到的图片pop_close.png 图片链接 2、将示例代码和上边图片放在同级目录下 3、示例下载地址：https://download.csdn.net/download/qq_21386275/10796842 4、效果图如下 &amp;amp;lt;!DOCTY...
前端之路——jQuery第四课（结合所学知识，制作一个具有jq特效的导航栏）
Daniel_mai的博客
10-09 364
新课内容： 1.与&&、或||、非!（逻辑判断->和布尔值有关系），这与或非，，， 2.与或非的运算级 3.何为+=？何为-= 4.驼峰写法！！（例子：MaiZhanHao） 5.callback(回调函数) 6.alter弹窗 7.jq特效：显示/隐藏/弹出/弹入/滑动，语法： div_1.click(function(){                div_2.slide
jquery-alert提示插件
zuoying的专栏
03-25 608
前一段时间在忙着网站改版的工作，在表单校验提示时要求不能使用alert弹出提示，因为这样对用户体验不是很好，因此本人使用jQuery写了个jquery-alert提示插件，其实现的功能也仅仅是用来替代js原生的alert语句。现将其发布出来希望对有方面需求的朋友们有所用。 使用方法很简单： Js代码 $('#tip).alert('hello world.'); ...
Jquery基础
12-13
Jquery基础及个人心得，选择器，常用方法、监听事件，event事件：阻止默认事件
alter标签的使用
喝水都塞牙
01-26 4013
alert 命令弹出一个提示框 为便于对 JavaScript 有一个直观的认识，本节会提供几个简单的实例供 JavaScript 入门学习之用。下面的代码是一个弹出提示框的例子： 复制代码代码如下: alert("我是提示文字！"); 将上面部分代码，用文本编辑器（如写字板或其他更高级的编辑器，如 EditPlus 等）保存为 alert.
jquery alert
m0_37458574的博客
01-25 248
jquery alert用在modal之上，会循环报错导致页面卡死。究其原因是参数设置了modal true，会导致js递归调用，改为false即可
jquery 处理字符串
上善若水
05-24 290
[code="js"] 1.去掉空格 var txt=$.trim($("txt1").val()); 2.转为数字 txtNum=Number($.trim(txt)) + 1; var thisEle = $("#para").css("font-size"); //获取字体大小 var textFontSize = parseFloat(thisEle...
js弹出消息对话框(alert)的几种方式
热门推荐
qq_39822451的博客
09-18 5万+
<script type="text/javascript"> //直接弹出，无取消按钮 alert("alert"); //有取消按钮 confirm("Confirm"); //弹出输入框 prompt("prompt"); //未知 document.write("document.write"); ...
ALTER TABLE 修改表时 因为有一个或多个对象访问此列
weixin_33738578的博客
06-04 1746
修改表时出现， 消息 5074，级别 16，状态 1，第 2 行对象'DF__DDCZJLB_M__DDCZJ__5BBA8402' 依赖于 列'DDCZJLB_GROUPID'。消息 4922，级别 16，状态 9，第 2 行由于一个或多个对象访问此列，ALTER TABLE ALTER COLUMN DDCZJLB_GROUPID 失败。   解决方法： 去除约束   方法...
jquery-alert 中文说明文档
kevon_sun的专栏
03-27 1403
alert.js是基于jQuery开发的一款 PC 移动端 都兼容的轻量级弹层组件，有提示信息弹窗、美化alert弹窗、捕获弹窗、iframe层弹窗、iframe窗以及pc弹层等等。alert.js是基于jQuery开发的一款 PC 移动端 都兼容的轻量级弹层组件实例演示提示 按钮1 按钮2 不使用动画 动画2 捕获页 iframe层 iframe窗 pc弹层浏览器兼容浏览器兼容，下面是我们的主要...
javascript之alter的坑
aizhua3368的博客
05-06 402
1.注意在使用alert返回两数之和时，会出现0.1+0.2并不等于0.3的bug 解决方法: var f=0.1; var g=0.2; alert((parseFloat(f)*100+parseFloat(g)*100/100) 2.alert(f==NaN)弹出false 　 alert(NaN ==NaN)同样会弹出false 　 a = '123abc...
jquery alert的基本使用
xwygn的专栏
08-02 1万+
jQuery Alert Dialogs 2010-06-17 09:45 一：首先在导入JQuery,jquery.ui.draggable(可以省略) 和jquery.alerts的 css、js文件。 为了在iE中正确的使用a
jQuery基础入门与实践指南
"jQuery基础教程是一本面向Web开发人员的实用指南，涵盖了jQuery选择符、事件、特效、DOM操作、AJAX、表格操作、表单函数、拖曳与旋转功能以及插件等内容。书中通过实例操作解决常见客户端问题，强调理论与实践的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值