前端学习---jQuery
目录
1.1，jQuery简介
1.2，jQuery函数&对象
1.3，jQuery选择器（selector）
1.4，jQuery过滤器
1.5，jQuery DOM 事件
1.6，jQuery效果
1.1，jQuery简介
定义：jQuery是一个轻量级的JS库，拥有大量插件plugins，兼容所有浏览器
功能：HTML 元素选取/元素操作/事件处理，CSS操作，JS特效动画，链式调用，读写合一，AJAX，Utilities
引入：<script type="text/javascript" src="jquery-1.10.2.min.js"></script> //版本2以上不支持IE6，7，8 下载 官网
1.2，jQuery函数&对象
jQuery函数：$()/jquery() console.log(jQuery===$) //true
----------------作为函数使用：$(param)--------------
$(document).ready(function(){ //1)参数为函数：当DOM加载完成后，执行回掉函数 $(function(){ $("button").click(function(){ //2)参数为选择器字符串：查找所有匹配的标签，并将它们封装成jQuery对象var div = document.getElementsByTagName('div');var $div = $(div); //3)参数为DOM对象：将dom对象封装成jQuery对象var $inp = $('<input type="text" name="dd"/>') }); //4)参数为html标签：创建标签对象并封装成jQuery对象
});
---------------作为对象使用：$.xxx( )-------------
$(selector).action() // 操作定义
$("p").hide() //隐藏所有段落jQuery对象：执行jQuery函数返回的就是jQuery对象，一般在变量前加$表示
--------------jQuery对象转化为DOM对象------------
$('div')[0]; //jQuery对象后添加数值下标即可选择其获取到的JQuery类数组对象中相应位置存放的DOM对象
--------------DOM对象转化为JQuery对象----------------
var div = document.getElementsByTagName('div'); //多个div返回的是一个DOM类数组对象
var $div = $(div); //将DOM对象作为jQuery函数的参数即可将该DOM对象转化为jQuery对象1.3，jQuery选择器（selector）
| 选择器 | 功能 | 选择器 | 功能 |
|---|---|---|---|
| $("*") | 选取所有元素 | $("ul li:first-child") | 选取每个 <ul> 元素的第一个 <li> 元素 |
| $(this) | 选取当前 HTML 元素 | $("p.intro") | 选取 class 为 intro 的 <p> 元素 |
| $("p:first") | 选取第一个 <p> 元素 | $("a[target='_blank']") | 选取所有 target 属性值等于 "_blank" 的 <a> 元素 |
| $("[href]") | 选取带有 href 属性的元素 | $("a[target!='_blank']") | 选取所有 target 属性值不等于 "_blank" 的 <a> 元素 |
| $("tr:odd") | 选取奇数位置的 <tr> 元素 | $(":button") | 选取所有 type="button" 的 <input> 元素 和 <button> 元素 |
| $("tr:even") | 选取偶数位置的 <tr> 元素 | $("ul li:first") | 选取第一个 <ul> 元素的第一个 <li> 元素 |
| CSS选择器相关知识链接： https://blog.csdn.net/weixin_44264744/article/details/104132573 | |||
1.4，jQuery过滤器
| 基本过滤器（Basic Filters） | 解释 | 内容过滤器 | 定义 |
|---|---|---|---|
| selector:first | 选中元素的第一个元素 | selector:contains(’ text ') | 文本包含text的selector元素 |
| selector:last | ..最后一个元素 | selector:empty | 没有子标签的selector元素 |
| selector:even | ..索引为偶数元素 | selector:parent | 有子节点的selector元素 |
| selector:odd | ..索引为奇数元素 | selector:has(selector2) | 包含selector2的元素 |
| selector:eq(index) | ..索引为index的元素 | 属性过滤器 | 定义 |
| selector:lt(index) | ..索引值小于index的元素 | selector[attr] | 具有属性attr的元素，如id |
| selector:gt(index) | ..索引值大于index的元素 | selector[attr=Val] | 属性值为Val的元素 |
| selector1:not(：selector2) ？ | ..中不为selector2的元素 | selector[attr^=Val] | 属性值为以Val开头 |
| selector:header | ..中所有标题元素 | selector[attr$=Val] | 属性值为以Val结尾 |
| :animated | 所有正在执行动画效果的元素 | selector[attr*=Val] | 属性值中包含Val |
| var input_query=$("input:first"); //获取最后一个input元素 | var input_query=$("input[id][name*='ext']"); | ||
| 表单选择器 Forms | 定义 | 可见性过滤器 | 定义 |
| :input | 查找所有input元素 | selector:visible | 查找所有可见的selector元素 |
| :text | 查找所有文本框元素 | selector:hidden | 查找所有隐藏的selector元素 |
| :password | 查找所有密码框元素 | 子元素过滤器 | 定义 |
| :checkbox /:radio | 查找所有复/单选框 | selector:nth-child(n) | 所有父中排第n的selector元素 |
| :submit | 查找所有提交按钮元素 | selector:first-child | 所有父的所有子中排第一的元素 |
| :image | 查找所有图像域元素 | selector:last-child | 所有父的所有子中排最后的元素 |
| :reset | 查找所有重置按钮元素 | selector:only-child | 所有父中唯一的selector元素 |
| :button | 查找所有按钮元素 | 表单过滤器 Form Filters | 定义 |
| :file | 查找所有文件域元素 | selector:enabled | 查找所有可用的元素 |
| var button_query=$(":button"); //查找所有按钮元素 | selector:disabled | 查找所有不可用的 | |
| selector:selected | 查找所有选中的下拉框 | selector:checked | 查找所有选中的单选复选框 |
1.5，jQuery DOM 事件
| 鼠标事件 | 功能 | 键盘事件 | 功能 | 文档/窗口事件 | 功能 |
|---|---|---|---|---|---|
| click() | 单击 | keypress() | 键盘按下事件 | load() | |
| dblclick() | 双击 | keyup() | 键盘抬起事件 | resize() | 改变大小 |
| hover() | 悬停 | keydown() | 按下过程 | scroll() | 滚动 |
| mousedown() | 按下 | 表单事件 | 功能 | unload() | |
| mouseup() | 松开 | submit() | 表单提交事件，绑定from | 举例 | |
| mouseenter() | 穿过 | change() | 元素值改变时激发的事件 |
|
|
| mouseleave() | 离开 | focus() | 聚焦 | ||
| mousemove() | 移动 | blur() | 失焦 | ||
|
mouseover() mouseout() |
移入/出 --含子元素 |
select() | 选择 | ||
1.6，jQuery效果
| 效果 | 功能 | 效果 | 功能 |
|---|---|---|---|
| show([speed],[function]) | 显示 | fadeIn([speed],[callback]) | 淡入显示 |
| hide([speed],[function]) | 隐藏 | fadeOut([speed],[callback]) | 淡出隐藏 |
| toggle([speed],[function]) | 显示+隐藏 | fadeToggle([speed],[callback]) | 淡入淡出 |
| slideUp([speed],[function]) | 上滑隐藏页面 | fadeTo([speed],[opacity],[callback]) | 渐变指定透明度 |
| slideDown([speed],[function]) | 下滑显示页面 | opacity指定透明度 0~1 | [ ] 可选 |
| slideToggle([speed],[function]) | 上下滑动 | speed显示的时间 ms | function ---slow( |
<html>
<head>
<meta charset="utf-8">
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){$("button").click(function(){$("p").hide(1000);});
});
</script>
</head>
<body>
<button>隐藏</button>
<p>这是个段落，内容比较少。</p>
<p>这是另外一个小段落</p>
</body>
</html>效果：
-----》
--------html---------
<div id="flip">点我，显示或隐藏面板。</div>
<div id="panel">Hello world!</div>
-------jquery--------
$(document).ready(function(){$("#flip").click(function(){$("#panel").slideToggle("slow");});
});----->
1.7，元素属性
attr(key[,value]) ：获取/[设置]属性[值]
removeAttr(name)： 移除指定属性
css(key[,value]) ：获取指定名称的CSS [给指定名称的css属性设置值，多个用{ }]
val/text/html([“xxx”])： 获取[设置]value/文本/html代码值
$(document).ready(function(){ $("input[name='text1']").attr("disabled","disabled"); //使name为text1的文本框不可用$("input[name='text1']").removeAttr("disabled"); //使name为text1的文本框可用console.log($("div").html()); //获取到的内容是<a>aaa</a>，如果是text，则只获取aaa $("#btn").click(function(){$("div").css("background-color","red"); //设置div的背景颜色为红色});
});1.8，Ajax
的
前端学习---jQuery相关推荐
- 前端学习——jQuery入门篇
一. jQuery入门 1.1 初步感受jQuery 使用jquery简单写个tab切换小案例 <!DOCTYPE html> <html lang="en"&g ...
- 如何使用jquery_好程序员web前端学习路线分享jQuery学习技巧
好程序员web前端学习路线分享jQuery学习技巧,jQuery在web前端学习中是一个必不可少的内容,很多小伙伴都在学习这阶段的时候遇到问题,今天我们就来聊一下jQuery,让我们一起来看一看吧! ...
- 【前端学习笔记】JavaScript + jQuery + Vue.js + Element-UI
前端学习笔记 JavaScript jQuery Vue.js Element-UI Java 后端部分的笔记:Java 后端笔记 JavaScript 基础语法(数据类型.字符串.数组.对象.Map ...
- 前端学习：jQuery学习--Day03
前端学习:jQuery学习–Day03 ps:这几天偷了点懒呜呜外加考试耽误了几天学习 最后自己做了一个给女朋友的惊喜点滴记录note 大纲 自定义事件 自动触发 事件委托 鼠标移入移出事件 电影排行 ...
- 17前端学习之JQuery基础(一):jQ介绍,jQ基本使用,jQ选择器,jQ样式操作,jQ动画效果
文章目录 一.Jquery介绍: 1. JavaScript 库: 2 jQuery的概念 3. jQuery的优点 二.jQuery 的基本使用: 1. jQuery 的下载 2. 体验jQuery ...
- Web前端学习笔记15：Web前端开发：jQuery总结
文章目录 day01 - jQuery 1.1. jQuery 介绍 1.1.1 JavaScript 库 1.1.2 jQuery的概念 1.1.3 jQuery的优点 1.2. jQuery 的基 ...
- 前端学习从入门到高级全程记录之35（jQuery②）
学习目标 本期继续学习jQuery,引入的jQuery文件用的还是上一期的. 1.jQuery操作样式 1.1 css操作 功能:设置或者修改样式,操作的是style属性 设置单个样式 //nam ...
- Python攻城师————前端学习（jQuery框架、第三方框架bootstrap框架）
今日学习目标 继续学习jQuery框架剩余的内容. 文章目录 今日学习目标 学习内容 一.jQuery操作标签 class操作 样式操作 位置操作 文本值操作 属性操作 文档处理操作 二.jQuery ...
- 前端学习——初识jQuery
学习目标: 知道什么是 jQuery 了解 jQuery 的优点 能够简单使用 jQuery 一.什么是 jQuery 1.jQuery 介绍 JavaScript库:即 library,是一个封装好 ...
最新文章
- YUM（Yellow gog Updater Modifie）服务器的配置
- 5G LAN — Overview
- OPPO高级视觉设计师戴润达：视觉设计师需要思考的11件事
- 用python简单处理图片（1）：打开\显示\保存图像
- QT乱码总结7.编码测试和总结二
- win7硬盘安装过程图解
- java mysql查询语句_Mysql查询语句执行过程
- ASP.NET Core部署在IIS上
- Java使用mysql游标_Mysql游标使用
- 2345劫持浏览器主页怎么办？以Microsoft Edge为例
- 有哪些公共管理或行政管理学习帮助较大的外文期刊？
- All-Pay Contests（博弈论+机制设计） 论文阅读笔记
- 讲真，只有low逼才热衷于打脸
- Linux服务器中SVN版本库的创建与配置
- Labview的子VI
- java-不死神兔百钱百鸡
- python ean13条形码的验证_(转)基于SQL的EAN13、ENA8条形码校验位生成
- 战斗在风口：社区团购从0到1实战运营笔记
- 我国最早研究计算机的科学家,我国著名计算机科学家、西安交大教授郑守淇逝世，享年93岁...
- u盘启动盘一键装系统教程