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 ...
随机推荐
- Activiti架构分析及源码详解
目录 Activiti架构分析及源码详解 引言 一.Activiti设计解析-架构&领域模型 1.1 架构 1.2 领域模型 二.Activiti设计解析-PVM执行树 2.1 核心理念 2. ...
- JS 操作符、控制流程、循环、字符串/数组方法
操作符 算术运算符:+ .- . * . / . %.++.-- 赋值运算符:= .+=.-=. *=./=.%= 比较运算符:>.>=.<.<=.!=.==.===(全等,数 ...
- 仿Inshot分享页图片圆形展开缩放动画
版权声明:本文为xing_star原创文章,转载请注明出处! 本文同步自http://javaexception.com/archives/221 圆形展开缩放动画 关键代码: final Anima ...
- C# 从字符串中提取指定字符类型的内容
从一段字符串中,提取中文.英文.数字 中文字符30Margin中文字符40HorizontalAlignment 正则表达式: /// <summary> /// 英文字母与数字 /// ...
- Filter Lookup Editor Data Source 筛选器查找编辑器数据源
In this lesson, you will learn how to filter the data displayed by a lookup editor. This editor is s ...
- javascript中常见的几种循环遍历
项目开发中,不管是建立在哪个框架基础上,对数据的处理都是必须的,而处理数据离不开各种遍历循环.javascript中循环遍历有很多种方式,记录下几种常见的js循环遍历. 一.for循环 for循环应该 ...
- IS Kali: installed chiess messy code problem
apt-get install ttf-wqy-microhei ttf-wqy-zenhei xfonts-wqy init 6
- 一文解读Redis (转)
本文由葡萄城技术团队编撰并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 引言 在Web应用发展的初期,那时关系型数据库受到了较为广泛的关注和应用,原 ...
- 更新阿里yum源并重建缓存
[第一种方式]1.下载安装wget /如果没有装的话yum install -y wget 2.备份默认的yummv /etc/yum.repos.d /etc/yum.repos.d.backup ...
- windows系统搭建zookeeper
安装&配置 在apache的官方网站提供了好多镜像下载地址,然后找到对应的版本 下载地址: http://mirrors.cnnic.cn/apache/zookeeper/zookeeper ...