JQ
jQuery
是 JS 进行的二次封装的工具包
二次封装: 比 JS 使用起来便捷了, 操作比综合 (写一句 jq 可以实现多句逻辑), 底层是原生 is
工具包: jq 就是一堆函数的集合体, 通过 jq 对象来调用 (jq)
目的是更快速使用 JS
在使用 JS 的地方都可以使用 jq
安装 (环境)
1. 官网下载: https://jquery.com/download/
jQuery-3.4.1.JS | jQuery-3.4.1.min.JS
2. 在 需要 jq 环境的页面中 使用 jq
- <script src="js/jquery-3.4.1.js">
- </script>
- <script>
$ 就是 jQuery 对象, 可以使用 jQuery 的所有功能
</script>
?
3. 根据 API 学习 jq:http://jquery.cuishifeng.cn
jq 操作页面
?
- <!DOCTYPE html>
- <HTML>
- <head>
- <meta charset="utf-8">
- <title>
- </title>
- </head>
- <body>
- <h1>
- 标题
- </h1>
- <p class="p1">
- p11111111111111111111111111
- </p>
- <p class="p2">
- p22222222222222222222222222
- </p>
- <div>
- <b>
- div 的加粗内容
- </b>
- </div>
- <form action="">
- <input type="text">
- </form>
- </body>
- <script src="js/jquery-3.4.1.js">
- </script>
- <script>
- // 1.jq 选择器 - 得到的是 jq 对象 - jq 对象可以调用 jq 库的所有功能
- // $('CSS 语法选择器')
- ? let h1 = $('h1');
- console.log(h1); ? let p1 = $('.p1');
- let p2 = $('p:nth-of-type(2)');
- console.log(p1, p2); ? ?
- // 想通过 JS 对象获取第 2 个 p 的文本内容
- let ps = $('p');
- console.log(ps); ? let _p2 = ps[1]; // jq 对象可以理解为存放了 JS 对象的数组
- console.log(_p2.innerText); ?
- // 想通过 jq 对象获取第 2 个 p 的文本内容
- p2 = $(_p2);
- console.log(p2.text()); ? ?
- </script>
- ?
- <script>
- // 操作页面的三步骤
- // 1. 获取标签
- // 2. 绑定事件
- // 3. 操作标签
- ?
- // $('h1').click(function (ev) {
- // // jq 的事件对象, 但对 JS 事件对象做了完全兼容
- // console.log(ev);
- // console.log(ev.clientX);
- // console.log(ev.clientY);
- // })
- ?
- // $('h1').on('click', function (ev) {
- // console.log(ev);
- // })
- ? $('p').click(function() {
- // 在 jq 事件中的 this 还是 JS 对象, 如果要使用 jq 功能, 需要将 this 转换为 jq 对象
- console.log($(this));
- console.log($(this).text());
- }); ?
- // 文本
- // $div.text() 文本内容
- // $div.HTML() 标签内容
- // $inp.val() 表单内容
- ?
- // 需求 1: 点击 h1 获取 自身文本内容, div 的标签内容, input 的表单内容
- $('h1').click(function() {
- console.log($(this).text());
- console.log($('div').HTML());
- console.log($('input').val());
- }) ? ???
- </script>
- ?
- </HTML>
- ?
- ?
- ?
- ?
- ?
- ?
- ?
- ?
$('css3 选择器语法') 就是 jq 选择器, 获得的是 jq 对象, jq 对象可以理解为存放了 JS 对象的数组 (存放了几个 JS 对象不需要关心)
jq 对象转换为 JS 对象 - jq 对象 [JS 对象所在索引] - 可以使用 JS 的语法
JS 对象装换为 jq 对象 -$(JS 对象) - 可以使用 jq 的语法
jq 常用操作
文本操作
$div.text() 文本内容
$div.HTML() 标签内容
$inp.val() 表单内容
样式操作
获取样式: $div.CSS('css 中的样式属性名')
设置样式:
- `
- $div.CSS('css 中的样式属性名', '属性值'); // 单一设置
- $div.CSS({
- '属性 1': '值 1',
- ...
- '属性 n': '值 n',
- });
- $div.CSS('属性', function (index, oldValue) {
- console.log(oldValue);
- // $(this) 可以拿到调用者对象
return 返回值就是要设置的值 (可以与自身其他属性, 或是页面其他标签, 或是自定义逻辑有关系);
})
类名 - 可以一次性获取提前设置好的一套样式
增加类名:$div.addClass('类名')
删除类名:$div.removeClass('类名')
切换类名:$div.toggleClass('类名')
属性
获取属性值:$div.attr('属性名')
设置属性值:$div.attr('属性名', '属性值或函数')
删除属性值:$div.attr('属性名', '')
例子
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="utf-8">
- <title>Title</title>
- <style>
- h1 {
- font-size: 36px;
- text-align: center;
- }
- .box {
- width: 200px;
- height: 200px;
- background-color: orange;
- }
- .red {
- background-color: red;
- border-radius: 50%;
- }
- .yellow {
- width: 400px;
- border-radius: 100px;
- background-color: yellow;
- }
- .blue {
- width: 400px;
- border-radius: 50%;
- background-color: blue;
- }
- </style>
- </head>
- <body>
- <h1 id="h1" style="color: red"> 标题 </h1>
- <img src=""alt="">
- <button class="btn1"> 红 </button>
- <button class="btn2"> 黄 </button>
- <button class="btn3"> 蓝 </button>
- <div class="box"></div>
- </body>
- <script src="js/jquery-3.4.1.js"></script>
- <script>
- // 一, 文本操作
- // $div.text() 文本内容
- // $div.HTML() 标签内容
- // $inp.val() 表单内容
- ?
- // 二, 样式操作
- // 获取样式: $div.CSS('css 中的样式属性名')
- // 设置样式:
- //
- `
- $div.CSS('css 中的样式属性名', '属性值'); // 单一设置
- $div.CSS({
- '属性 1': '值 1',
- ...
- '属性 n': '值 n',
- });
- $div.CSS('属性', function (index, oldValue) {
- console.log(oldValue);
- // $(this) 可以拿到调用者对象
return 返回值就是要设置的值 (可以与自身其他属性, 或是页面其他标签, 或是自定义逻辑有关系);
- })
- `;
- ?
- $('h1').click(function () {
- let $this = $(this);
- let color = $this .CSS('color');
- let fs = $this.CSS('font-size');
- let ta = $this.CSS('text-align');
- console.log(color, parseInt(fs), ta);
- ?
- $this.CSS('background-color', 'orange');
- $this.CSS({
- 'background-color': 'pink',
- 'border-radius': '10px',
- 'width': '200px',
- });
- ?
- $this.CSS('height', function (index, oldValue) {
- console.log(oldValue);
- let w = $(this).width();
- return w / 2;
- })
- })
- ;
- ?
- // 三, 类名 - 可以一次性获取提前设置好的一套样式
- `
增加类名:$div.addClass('类名')
删除类名:$div.removeClass('类名')
切换类名:$div.toggleClass('类名')
- `;
- `
- $('.btn1').click(function () {
- $('.box').addClass('red');
- $('.box').removeClass('yellow');
- $('.box').removeClass('blue');
- ?
- // $('.box').toggleClass('red'); // 无 red 类添加, 反之去除
- });
- $('.btn2').click(function () {
- let $box = $('.box');
- $box[0].className = 'box';
- $box.addClass('yellow');
- });
- $('.btn3').click(function () {
- $('.box').addClass('blue');
- });
- `;
- ?
- // 四, 属性
- `
获取属性值:$div.attr('属性名')
设置属性值:$div.attr('属性名', '属性值或函数')
删除属性值:$div.attr('属性名', '')
- `;
- // https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/image/h=300/sign=705ffa145fda81cb51e685cd6267d0a4/4bed2e738bd4b31c5a30865b89d6277f9f2ff8c6.jpg
- $('h1').click(function () {
- let h1_id = $(this).attr('id');
- console.log(h1_id);
- ?
- ?
- $('img').attr('src', function () {
- return 'https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/image/h=300/sign=705ffa145fda81cb51e685cd6267d0a4/4bed2e738bd4b31c5a30865b89d6277f9f2ff8c6.jpg'
- });
- $(this).attr('id', '');
- })
- ?
- ?
- ?
- </script>
- </HTML>
jq 的链式操作
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="utf-8">
- <title>Title</title>
- </head>
- <body>
- <h1 > 标题 </h1>
- </body>
- <script src="js/jquery-3.4.1.js"></script>
- <!-- CDN 服务器 | 官网服务器 -->
- <!--<script src="https://code.jquery.com/jquery-3.4.1.js"></script>-->
- <script>
- `
- let _self = $('h1').CSS('color', 'orange');
- ?
- _self = _self.click(function () {
- console.log(this)
- });
- ?
- _self = _self.CSS('background', 'red');
- `;
- ?
- $('h1').CSS('color', 'orange').CSS('background', 'red').click(function () {
- console.log(this)
- }).text('修改标题');
.text() 返回内容
.width() 返回宽
.height() 赶回高
修改值在括号里填, 不传参数就返回参数, 传参就设置参数
() 里不需要参数的返回值不是自身
- </script>
- </HTML>
jq 操作文档
一, 快速定位到某一个 jq 对象
- `
- // 1) 在 jq 集合中快速拿到某一个 jq 对象: jq 对象. eq(index)
- // $('.d:eq(1)') == $('.d').eq(1)
- // $('.d').eq(1).click(function () {
- // alert(123)
- // })
- // 2) 在 jq 集合中都具有系统事件, 在事件中如何区别每一个 jq 对象
- // $(this) | 索引
- $('.d').click(function () {
- // 标签所在层级的索引, 不是在 jq 对象数组中的索引
- let index = $(this).index();
- console.log(index)
- });
- `;
二, 通过自身快速定位到 "亲戚"
` 上兄弟 (们) prev(All)
下兄弟 (们) next(All)
兄弟们 siblings
孩子们 children
父亲 (们)
- `;
- `
- let $d2 = $('.d2');
- console.log($d2);
- let next = $d2.next();
- console.log(next);
- let nexts = $d2.nextAll();
- console.log(nexts);
- let prev = $d2.prev();
- console.log(prev);
- let siblings = $d2.siblings();
- console.log(siblings);
- let children = $d2.children();
- console.log(children);
- let parent = $d2.parent();
- console.log(parent);
- `;
三, 动态生成页面结构
- // let $table = $('<table></table>');
- // $table.CSS({
- // border: '1px'
- //
- });
- // $('body').append($table); // 加入到 body 最后
- // $('body').prepend($table); // 加入到 body 最后
- // $('p').before($table); // 加入到 p 之前
- // $('p').after($table); // 加入到 p 之后
- ?
例子
?
需求: 点击表格, 在之后插入指定宽高的表格
- $('p').click(function () {
- let inps = $('input');
- ?
- // 表
- let table = $('<table border="1"></table>');
- ?
- let row = inps.eq(1).val();
- console.log(typeof(inps.eq(1).val()));
- let col = inps.eq(2).val();
- // 行
- for (let i = 0; i <row; i++) {
- let tr = $('<tr></tr>');
- table.append(tr);
- // 列
- for (let j = 0; j <col; j++) {
- let td = $('<td>' + inps.eq(0).val() + '</td>');
- tr.append(td);
- }
- ?
- }
- ?
- $(this).after(table);
- })
- ?
- ?
来源: http://www.bubuko.com/infodetail-3115594.html