jq初始,选择器,事件,内容操作,样式操作
jq操作页面文档http://jquery.cuishifeng.cn/
jq初始
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jq初始</title>
</head>
<body>
<h1>jQuery就是js的工具库 - 一系列功能的集合体</h1>
<h2>jq内部语法采用的就是原生js</h2>
<h2>jq环境如何搭建 - 在需要使用jq的html中引入jquery.js即可</h2>
<h2>jq就是优化了原生js鱼页面进行交互的逻辑</h2>
</body>
<!-- CDN 连接 外部资源 -->
<!--<script src="https://code.jquery.com/jquery-3.4.1.js"></script>-->
<!--<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>-->
<script src="js/jquery-3.4.1.js"></script>
<script>
// jQuery对象
console.log(jQuery);
console.log($);
console.log(Owen);
console.log($('h1'));
$('h1').click(function () {
$('h1').css('color', 'red')
})
</script>
</html>
jq选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
</head>
<body>
<div id="d" class="box"></div>
<input type="text" id="d2" class="box" />
<h3 class="h3"></h3>
</body>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
// jq选择器：$('css选择器语法')
let $div = $('#d');
console.log($div);
let $boxs = $('.box');
console.log($boxs);
// jq对象如何转换为js对象 - jq对象可以理解为装有js对象的数组
// 就是通过索引取值
let div = $div[0];
console.log(div);
console.log(document.getElementsByClassName('box')[0]);
console.log(document.querySelectorAll('.box')[0]);
console.log($div[0]);
console.log($boxs[0]);
console.log($boxs[1]);
// js如何转换为jq对象
let $newDiv = $(div);
console.log($newDiv);
</script>
</html>
jq事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jq事件</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: orange;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="box">1</div>
<div class="box">2</div>
</body>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
let $box = $('.box');
// $box.click(function () {
// // this就是被点击的标签 - js对象
// console.log(this);
// console.log($(this));
// });
// jq对象可以完成事件的批量绑定
$box.on('click', function () {
console.log(this);
console.log(this.innerText);
console.log($(this));
});
// js必须手动循环 绑定
// let boxs = document.querySelectorAll('.box');
// for (box of boxs) {
// box.onclick = function () {
// console.log(this);
// console.log($(this));
// }
// }
</script>
</html>
jq内容操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jq内容操作</title>
</head>
<body>
<h1 class="title">标题</h1>
<input type="text" class="title">
<button class="btn">改标题</button>
</body>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
// js - jsObj.value | jsObj.innerText | jsObj.innerHTML
// jq - jqObj.val() | jqObj.text() | jqObj.html()
// 取值：jqObj.text() | jqObj.text('新值') | jqObj.text(fn)
let $btn = $('.btn');
let $inp = $('input.title');
let $h1 = $('h1.title');
$btn.click(function () {
let val = $inp.val();
if (val) {
// $h1.text(val);
$h1.html(val);
$inp.val(function (index, oldValue) {
// return oldValue.toUpperCase()
return ''
})
}
})
</script>
</html>
jq样式操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jq样式操作</title>
<style>
.box {
/*width: 200px;*/
height: 200px;
background-color: pink;
}
.sup-box {
/*width: 400px;*/
height: 100px;
background-color: orange;
border-radius: 50%;
line-height: 100px;
text-align: center;
color: red;
}
</style>
</head>
<body>
<div class="box" style="width: 600px">文本</div>
</body>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
let $box = $('.box');
$box.click(function () {
// 获取
let width = $box.css('width');
console.log(width);
// 单个设置
$box.css('background-color', function (i, o) {
console.log(o);
return 'red'
});
// 多条设置
$box.css({
width: '100px',
height: '100px',
backgroundColor: 'blue',
});
if ($box.hasClass('sup-box')) {
$box.removeClass('sup-box')
} else {
$box.addClass(function (i, o) {
console.log(i, o);
return 'sup-box'
})
}
})
</script>
<script>
// localStorage['name'] = 'owen';
// sessionStorage['age'] = 18;
</script>
</html>
jq初始,选择器,事件,内容操作,样式操作的更多相关文章
- JQuery DOM操作（属性操作/样式操作/文档过滤）
jQuery——入门(三)JQuery DOM操作(属性操作/样式操作/文档过滤) 一.DOM属性操作 1.属性 (1).attr() 方法 语法:$(selector).attr(name|prop ...
- jQuery 1.0 | 选择器 | 事件 | 操作样式 | 操作属性
使用jQuery: 1,下载jQuery http://jquery.com/download/ 2,引入jQuery文件 3,定义入口函数 <script src="jquery-1 ...
- dom操作 属性操作 样式操作
jQuery DOM操作 1 插入子元素 append('<img>') 插后面 被插入元素调用 appendTo('<img scr="...">') 新 ...
- JQuery（一）---- JQ的选择器，属性，节点，样式，函数等操作详解
JQuery的基本概念 JQuery是一个javascript库,JQuery凭借着简洁的语法和跨平台的兼容性,极大的简化了js操作DOM.处理事件.执行动画等操作.JQuery强调的理念是:'wri ...
- jQuery 选择器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 动画效果 插件 each、data、Ajax
jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方 ...
- jQuery-介绍 加载 选择器 样式操作 属性操作 绑定click事件
jQuery - 介绍 加载 选择器 样式操作 属性操作 绑定click事件 注意:以下部分问题不能实现效果,因该是单词拼写错误(少个t)或者没有加引号(“swing”)... jquery介绍 jQ ...
- js导读,js引入,js选择器,事件,操作页面文档,计算后样式,数据类型
js导读 ''' js属于编写运行在浏览器上的脚本语言 js采用ECMAScript语法 操作BOM:浏览器对象模型 eg:浏览器上下滑动,浏览器历史记录 操作DOM:文档对象模型 ''' js引入 ...
- jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作 样式 ⑤ 事件 点击变色
jQuery的min版本和原版功能是一样的,min版主要应用于已经开发成的网页中,而非min版 的文件比较大,里面有整洁的代码书写规范和注释,主要应用于脚本开发过程当中. JQuery是继protot ...
- 2016/4/1 jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作 样式 ⑤ 事件 点击变色
jQuery的min版本和原版功能是一样的,min版主要应用于已经开发成的网页中,而非min版 的文件比较大,里面有整洁的代码书写规范和注释,主要应用于脚本开发过程当中. JQuery是继protot ...
随机推荐
- 《Dotnet9》系列-Google ProtoBuf在C#中的简单应用
时间如流水,只能流去不流回! 点赞再看,养成习惯,这是您给我创作的动力! 本文 Dotnet9 https://dotnet9.com 已收录,站长乐于分享dotnet相关技术,比如Winform.W ...
- 面试连环炮系列（二十）：TCP的滑动窗口协议是什么
TCP的滑动窗口协议是什么 滑动窗口协议,用于网络数据传输时的流量控制,以避免拥塞的发生.该协议允许发送方在停止并等待确认前发送多个数据分组.由于发送方不必每发一个分组就停下来等待确认,因此该协议可以 ...
- NLP标注工具brat 配置文件说明
快速搭建brat 通过docker: docker run --name=brat -d -p 38080:80 -e BRAT_USERNAME=brat -e BRAT_PASSWORD=brat ...
- puppet5.1 安装与配置
一.Puppet概念 简介 当服务器数量达到一定的规模时,仅依靠人为完成批量部署服务器个资源的配置,运维工作将变得繁琐且容易出错,为了解决这一问题,我们应该怎么办呢?我们可以引入一批工具,这批工具可编 ...
- leaflet-webpack 入门开发系列六矢量瓦片(附源码下载)
前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 w ...
- (办公)记事本_Linux帮助命令
参考:http://www.gulixueyuan.com/course/300/task/7086/show# 帮助命令: .man命令 1.1.man命令是Linux下的帮助指令,通过man指令可 ...
- STM32基本GPIO操作：按键输入（扫描+外部中断）
(涉及专有名词较多,难免解释不到位,若有错误还请指出,谢谢!) 硬件连接图如下: 一.扫描 思路是在main函数中通过死循环来扫描端口电平状态检测,以此判断按键是否按下.实现较为简单. 1.初始化(注 ...
- 【解决】Failed to restart network.service: Unit network.service not found.
问题:使用systemctl restart network 或 service network restart 命令重启网卡失败. 分析:原因其实也很简单,命令用错了,造成了找不到相应的网卡服务. ...
- Redis 数据淘汰机制
为了更好的利用内存,使Redis存储的都是缓存的热点数据,Redis设计了相应的内存淘汰机制(也叫做缓存淘汰机制) 通过maxmemory 配置项来设置允许用户使用的最大内存大小,当内存数据集大小达到 ...
- Windows10安装Elasticsearch IK分词插件
安装插件 cmd切换到Elasticsearch安装目录下 C:\Users\Administrator>D: D:\>cd D:\Program Files\Elastic\Elasti ...