JQ初级
一、认识jQuery
1.什么是jQuery
jQuery是对原生JavaScript二次封装的工具函数集合
jQuery是一个简洁高效的且功能丰富的JavaScript工具库
2.jQuery的优势
完全开源的源代码
强大简洁的选择器
事件、样式、动画的良好支撑
链式表达式
简化的Ajax操作
跨浏览器兼容
丰富的插件及对外的扩展接口
二、jQuery的安装
1、版本
开发(development)版本:jQuery-x.x.x.js
生产(production)版本:jQuery-x.x.x.min.js
2、安装jQuery-3.3.1
<scriptsrc="js/jquery-3.3.1.js"></script>
<scriptsrc="js/jquery-3.3.1.min.js"></script>
<script>
// user code
</script>
<scriptsrc="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<scriptsrc="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
// user code
</script>
三、jQuery基本使用
1.引入jq
本地
<!-- 下载jq到本地 -->
<script src="js/jquery-3.3.1.js"></script>
CDN
<!-- jq CDN 地址 -->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
2.JQ对象
// jQuery:具有jq框架规定的所有功能的调用者,也就是框架产生的唯一对象
// $本质上就是jQuery对象,开源通过 var JQ = jQuery.noConflict();来自定义jQuery对象
3.延迟加载
// jq的延迟加载:文档树加载完毕,即回调
$(document).ready(function){})
// 1. 早于window.onload
// 2. 可以多次绑定事件
// 3.可以简写为$(function(){})
4.jq操作
选择器
// $(css选择器语法)
// eg:$('.box')得到的是一个存放原生js对象的数组,就是jq对象,页面中有多少个.box,该对象就承载者多少个对象,.可以作为一个整体来使用
对象间转换
// js对象:box jq对象:$box
// 将js对象转换为jq对象: $(box)
// 将js对象转换为Jq对象: $(box[index]
文本操作
// 获取原有文本
$box.text() | $box.html()
// 设置新文本
$box.text('newData') | $box.html('<b>newData</b>')
事件绑定
// $box 为jq对象
$ box.click(function(ev){ })
// 注: jq对象如果包含多个页面元素对象, 可以一次性对所有对象绑定该事件
// ev事件为jq事件, 兼容js事件
// this为js对象, $(this)就转换为jq对象
// 内部可以通过$(this).index()获取自身在当前结构下的索引(从0开始)
类名操作
$box.addClass("newClass") // 添加一个新类名
$box.removeClass("oldClass")// 删除一个已有的类名
// 多类名时,jq操作类名将每个类名最为单一考虑对象,不会影响其他类名
样式操作
$box.css('background-color') // 获取背景颜色
$box.css('background-color','red') // 删除一个已有的类名
/$box.css('background-color', function() {return 'yellow'}) // 通过函数返回值设置背景颜色
文档结构关系
// 父
$sup.parents()
// 父.父的父
$ sup.parents()
// 子们
$ sup.children()
// 上兄弟
$sup.prev()
// 上兄弟们
$sup.prevAll()
// 下兄弟
$sup.next()
// 同级的兄弟们
$sup.siblings() // 获得的结果的事对象,还可以接着使用jq方法
二.高级
一、选择器
css语法选择器
$('css3 选择器位‘)
索引匹配
$('div:eq(0)')
$('div').eq(0)
内容
$('div:contains(标签文本内容)')
// 注:采用模糊匹配
2.属性操作
文本
// 赋值:有参数
$('.box').html('<I>beat box</I>');
// 取值:无参数
console.log($('.box')text());
// 表单内容
// $('.inp').val('input 内容 为 value');
console.log($('.inp').val());
属性
// 取
console.log($('img').attr('alt'));
// 设
$('img').attr('src',
''https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1611571505,2177664062&fm=26&gp=0.jpg')
// 增
$('img').attr('abc',function(){
return "ABC";
})
类名
$(this).addClass('active'); // 添加
$(this).removeClass('box'); // 删除
// 如果有active 删除,反之添加
$(this).toggleClass('active'); //切换
3.css样式设置
// 取值
console.log($('.box').css('font-size')); // 设值
$('.box').css('color','deeppink') //单一属性设值
.css{ //设置多个属性值
// 1.及时给css()函数赋值一个js对象
// 2.key为字符串类型,可以省略“”,前提要使用js语法,小驼峰命名
// 3.属性值为数值+单位方式,可以省略单位,尽量全部用字符串数据赋值
width:'300px',
'height':300,
'background-color:'cyan',
borderRadius:'30px'
})
.css('width', function(index, oldWidth) { // 逻辑单一属性设值
if (index == 0) {
// 延迟1s
// var b_time = new Date().getTime();
// while (new Date().getTime() - b_time < 1000){}
return 1.5 * parseInt(oldWidth);
}
return oldWidth;
})
4事件
绑定方式
// 第一种 on
// 四个参数:事件名,派遣的子级别,{key-value传入的数据}
$('.box').on('click','span',{name:'hehe'},function(ev){}) // 第二种
// 两个参数:{key-value传入的数据}, 事件回调函数
$('.box').click({name:'hehe'},function(ev){})
事件对象
// 为jq事件对象,兼容js事件对象
// 坐标:ev.clientX | ev.clientY
// 按键:ev.keyCode
// 数据:ev.date.key名 =》eg:ev.data.name
冒泡与默认动作
// 冒泡:ev.stopPropagation();
// 默认动作:ev.preventDefault():
委派
$('.box').on('click','span',{name:'hehe'},function(ev){})
// 注:通过父级box来绑定点击事件,其实将事件委派给其子级span标签
5.东湖
系统东湖
// time_num: 动画持续的时间
// finish_fn: 动画结束后的回调函数 // 1. hide(time_num, finish_fn) | show(time_num, finish_fn) | toggle(time_num, finish_fn)
// 2. slideUp() | slideDown() | slideToggle() 参数同上
// 3.fadeOut() | fadeIn() | fadeTo() | fadeToggle() 参数同上
自定义动画
// 参数: 做动画的样式们 {}, 动画持续时间, 运动曲线, 动画结束后的回调函数
animate({
width: 300,
height: 500
}, 300, 'linear', function() {
// 动画结束后回调
})
// 动画本体采用的是css动画
JQ初级的更多相关文章
- day57
JQ初级 一.认识jQuery 1.什么是jQuery jQuery是对原生JavaScript二次封装的工具函数集合 jQuery是一个简洁高效的且功能丰富的JavaScript工具库 2.jQue ...
- JavaScript初级面试题
前面几题是会很基础,越下越有深度. 初级Javascript: 1.JavaScript是一门什么样的语言,它有哪些特点? 没有标准答案. 2.JavaScript的数据类型都有什么? 基本数据类型: ...
- JQ笔记-加强版
Query初级 一.介绍.基本写法 什么是JQ: 一个优秀的JS库,大型开发必备 JQ的好处: 简化JS的复杂操作 不再需要关心兼容性 提供大量实用方法 如何学习JQ: www.jquery. ...
- jq选择器基础
Jquery $代表选择器 使用jq必须要导入jq文件 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js&qu ...
- 马哥linux运维初级+中级+高级 视频教程 教学视频 全套下载(近50G)
马哥linux运维初级+中级+高级 视频教程 教学视频 全套下载(近50G)目录详情:18_02_ssl协议.openssl及创建私有CA18_03_OpenSSH服务及其相关应用09_01_磁盘及文 ...
- Python 正则表达式入门(初级篇)
Python 正则表达式入门(初级篇) 本文主要为没有使用正则表达式经验的新手入门所写. 转载请写明出处 引子 首先说 正则表达式是什么? 正则表达式,又称正规表示式.正规表示法.正规表达式.规则表达 ...
- JQ实现判断iPhone、Android设备
最近做了一版微信宣传页,通过JQ来判断设备,并进行下载 微信内置浏览器对下载链接进行了屏蔽,所以先进行判断,如果是微信内置浏览器,则跳转应用宝链接,如果不是,则判断是iPhone/Adroid/PC ...
- python 高级之面向对象初级
python 高级之面向对象初级 本节内容 类的创建 类的构造方法 面向对象之封装 面向对象之继承 面向对象之多态 面向对象之成员 property 1.类的创建 面向对象:对函数进行分类和封装,让开 ...
- jq.validate隐藏元素忽略验证
jq.validate隐藏元素忽略验证 现在有这样一个需求,当触发某类事件时候,需要在页面中显示input框,但是当不需要加载页面中的元素时候,进行隐藏.在这个需求的前提下,程序中对于input中的输 ...
随机推荐
- Apex 单元测试辅助函数简介
startTest和stopTest的使用 在Apex的Test类中,有startTest和stopTest两个函数.这两个函数经常配对使用. 每个单元测试函数都只能调用它们一次. startTest ...
- ionic3 Toast组件
html页面 <button ion-button color="dark" class="button-block" (click)="sho ...
- JHipster技术栈定制 - 基于UAA的微服务之间安全调用
本文通过代码实例演示如何通过UAA实现微服务之间的安全调用. uaa: 身份认证服务,同时也作为被调用的资源服务.服务端口9999. microservice1: 调用uaa的消费者服务,服务端口80 ...
- MySQL新参数log_error_verbosity
在介绍这个参数前,我们先聊聊参数log_warnings.我们知道MySQL中,其中log_error定义是否启用错误日志的功能和错误日志的存储位置,log_warnings定义是否将告警信息(w ...
- org.springframework.beans.factory.NoUniqueBeanDefinitionException 导致原因之一
导致此异常原因很多,以下仅是针对其中一种因素的解决办法. 下面是DAO接口.Service接口.Service实现类的全路径名(全部定义在com.xxx.projetc包下) com.xxx.proj ...
- 使用VsCode自带的Emmet语法
新建html文件,保存之后,输入"!",按Tap(或Enter)键,自动生成HTML结构 标签只要直接输入标签名(不要输入<>),按Tap(或Enter)键自动生成完整 ...
- android SDK 无法更新
android-windows-sdk无法更新解决办法: 1.在host文件新增如下配置 (host文件位置:c:\Windows\System32\drivers\etc文件夹下面,用文本编辑器 ...
- 消息 4900,级别 16,状态 2,第 1 行 对表 'XX.XXX' 执行 ALTER TABLE SWITCH 语句失败。对于已启用更改跟踪的表,不可能切换其分区。请先禁用更改跟踪,再使用 ALTER TABLE SWITCH。
问题描述: 今天处理切换分区数据的时候出现了这个错误: 消息 4900,级别 16,状态 2,第 1 行 对表 'XX.XXX' 执行 ALTER TABLE SWITCH 语句失败.对于已启用更改跟 ...
- IO 模型 IO 多路复用
IO 模型 IO 多路复用 IO多路复用:模型(解决问题的方案) 同步:一个任务提交以后,等待任务执行结束,才能继续下一个任务 异步:不需要等待任务执行结束, 阻塞:IO阻塞,程序卡住了 非阻塞:不阻 ...
- EF Core 遇到“可能会导致循环或多重级联路径”
在ef core中你可能会设计这样一个实体: public class Customer : Entity,IMustHaveTenant, IHasCreationTime { public Cus ...