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中的输 ...
随机推荐
- jsp+servlet include引入文件指令
1.index.jsp为首页 <%@ page contentType="text/html;charset=UTF-8" import="java.util.*& ...
- Vmware workstation V2V
错误提示 检查虚拟机文件是否有快照,用WORKSTATION打开虚拟机后删除所有快照再使用converter导入 检查VMx文件中声明的vmdk路径是否与文件实际路径相 ...
- JQuery显示,隐藏和淡入淡出效果
为了把JQuery搞熟悉,看着菜鸟教程,一个一个例子打,边看边记,算是一晚上的一个小总结吧.加油,我很本但是我很勤奋啊.系统的了解它,就要花时间咯. <!DOCTYPE html> < ...
- stereoscopic 3D
色分(Anaglyph)模式:典型的如红蓝立体,是利用红镜片只允许红光通过,蓝镜片只允许蓝光通过的原理,将两幅视差的图片(一张红色.一张蓝色)叠加构成一张立体图片 由于红蓝立体去掉了绿色分量,会导致最 ...
- MongoDB分片 在部署和维护管理 中常见事项的总结
分片(sharding)是MongoDB将大型集合分割到不同服务器(或者说集群)上所采用的方法,主要为应对高吞吐量与大数据量的应用场景提供了方法. 和既有的分库分表.分区方案相比,MongoDB的最大 ...
- Java 位运算符和 int 类型的实现
Java 位运算符和 int 类型的实现 其他运算符 # 算术运算符 +.-.*./.++i.i++.--i.i-- # 关系运算符 ==.!=.>.<.>=.<= # 逻辑运 ...
- centos简单的后台运行
# 忽略输出文件 nohup java FileTest > /dev/null 2>&1 &
- Chinese word segment based on character representation learning 论文笔记
论文名和编号 摘要/引言 相关背景和工作 论文方法/模型 实验(数据集)及 分析(一些具体数据) 未来工作/不足 是否有源码 问题 原因 解决思路 优势 基于表示学习的中文分词 编号:1001-908 ...
- Linux Collection:源和更新
PAS 配置sources.list软件源 参考例子(Debian 9,文件/etc/apt/sources.list): deb https://mirrors.ustc.edu.cn/debian ...
- ideal中把项目打成war包,并放在tomcat运行,遇见的问题。。。
先说下我遇见的问题吧:最近做项目要把项目放在tomcat上运行,用的springboot框架, 在建项目时选择的是 jar包,项目写完要部署打包是,在pom中虽然把包改成了war ,可是每次放入to ...