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 ...
随机推荐
- Android 布局阴影实现
最近项目要求,ui有很多有关于阴影的设计要求,网上找了些实现方式,但都不是很理想.现在闲下来了,就寻思着自己写个阴影布局耍耍,以备后用.先说道说道我找到的几种阴影实现方式: 系统阴影 Andorid ...
- IDEA开发、测试、生产环境pom配置及使用
pom文件 一般放在最下面,project里 <!--开发环境.测试环境.生产环境--> <!--生产环境--> <profiles> <profile> ...
- Matlab非线性规划
非线性规划 在matlab非线性规划数学模型可以写成一下形式: \[ minf(x)\\ s.t.\begin{cases} Ax \le B \\ Aeq·x = Beq\\ C(x) \le 0\ ...
- 一起学Spring之三种注入方式及集合类型注入
本文主要讲解Spring开发中三种不同的注入方式,以及集合数据类型的注入,仅供学习分享使用,如有不足之处,还请指正. 概述 Spring的注入方式一共有三种,如下所示: 通过set属性进行注入,即通过 ...
- 一起学SpringMVC之国际化
随着网络的发展,在Web开发中,系统的国际化需求已经变得非常的普遍.本文主要讲解SpringMVC框架对多语言的支持,仅供学习分享使用,如有不足之处,还请指正. 什么是国际化? 国际化(interna ...
- vue-better-scroll实现移动端下拉加载组件
1.下载安装better-scroll npm i -S better-scroll 1.1安装完成之后,打开pacaage.json文件查看,是否有(better-scroll) "dep ...
- QGIS练手 - 标注
又熬夜了... QGIS的标注就是标签,在QGIS3.x中有了改进. 不得不说,就光速度这一项,就能把ArcMap按在地上摩擦,更别说各种高级的标注样式了——除了标注功能面板UI有点“缺审美化”就是了 ...
- iOS-----------安装fir-cli错误
1.在终端执行 gem install fir-cli 一直提示错误: You don't have write permissions for the /Library/Ruby/Gems/ ...
- 网页添加Live2D看板娘简易教程
看板娘是一种职业和习惯称呼,也是ACGN次文化中的萌属性之一.简而言之就是小店的女服务生,也有“吸引顾客,招揽生意,提高人气”等作用类似品牌形象代言人的含义. 如果想在自己的博客上放一个呆萌的看板娘非 ...
- 2018年Code Review状态报告
Code Review 代码评审是指在软件开发过程中,对源代码的系统性检查.通常的目的是查找系统缺陷,保证软件总体质量和提高开发者自身水平. Code Review是轻量级代码评审,相对于正式代码评审 ...