jq操作页面文档http://jquery.cuishifeng.cn/

jq初始

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>jq初始</title>
  6. </head>
  7. <body>
  8.     <h1>jQuery就是js的工具库 - 一系列功能的集合体</h1>
  9.     <h2>jq内部语法采用的就是原生js</h2>
  10.     <h2>jq环境如何搭建 - 在需要使用jq的html中引入jquery.js即可</h2>
  11.     <h2>jq就是优化了原生js鱼页面进行交互的逻辑</h2>
  12. </body>
  14. <!-- CDN 连接 外部资源 -->
  15. <!--<script src="https://code.jquery.com/jquery-3.4.1.js"></script>-->
  16. <!--<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>-->
  18. <script src="js/jquery-3.4.1.js"></script>
  19. <script>
  20.     // jQuery对象
  21.     console.log(jQuery);
  22.     console.log($);
  23.     console.log(Owen);
  25.     console.log($('h1'));
  26.     $('h1').click(function () {
  27.         $('h1').css('color', 'red')
  28.     })
  29. </script>
  30. </html>

jq选择器

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.     <div id="d" class="box"></div>
  9.     <input type="text" id="d2" class="box" />
  10.     <h3 class="h3"></h3>
  11. </body>
  12. <script src="js/jquery-3.4.1.min.js"></script>
  13. <script>
  14.     // jq选择器：$('css选择器语法')
  15.     let $div = $('#d');
  16.     console.log($div);
  18.     let $boxs = $('.box');
  19.     console.log($boxs);
  21.     // jq对象如何转换为js对象 - jq对象可以理解为装有js对象的数组
  22.     // 就是通过索引取值
  23.     let div = $div[0];
  24.     console.log(div);
  26.     console.log(document.getElementsByClassName('box')[0]);
  27.     console.log(document.querySelectorAll('.box')[0]);
  28.     console.log($div[0]);
  29.     console.log($boxs[0]);
  30.     console.log($boxs[1]);
  32.     // js如何转换为jq对象
  33.     let $newDiv = $(div);
  34.     console.log($newDiv);
  36. </script>
  37. </html>

jq事件

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>jq事件</title>
  6.     <style>
  7.         .box {
  8.             width: 200px;
  9.             height: 200px;
  10.             background-color: orange;
  11.             margin-bottom: 10px;
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16.     <div class="box">1</div>
  17.     <div class="box">2</div>
  18. </body>
  19. <script src="js/jquery-3.4.1.min.js"></script>
  20. <script>
  21.     let $box = $('.box');
  22.     // $box.click(function () {
  23.     //     // this就是被点击的标签 - js对象
  24.     //     console.log(this);
  25.     //     console.log($(this));
  26.     // });
  28.     // jq对象可以完成事件的批量绑定
  29.     $box.on('click', function () {
  30.         console.log(this);
  31.         console.log(this.innerText);
  32.         console.log($(this));
  33.     });
  35.     // js必须手动循环 绑定
  36.     // let boxs = document.querySelectorAll('.box');
  37.     // for (box of boxs) {
  38.     //     box.onclick = function () {
  39.     //         console.log(this);
  40.     //         console.log($(this));
  41.     //     }
  42.     // }
  44. </script>
  45. </html>

jq内容操作

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>jq内容操作</title>
  6. </head>
  7. <body>
  8.     <h1 class="title">标题</h1>
  9.     <input type="text" class="title">
  10.     <button class="btn">改标题</button>
  11. </body>
  12. <script src="js/jquery-3.4.1.min.js"></script>
  13. <script>
  14.     // js - jsObj.value | jsObj.innerText | jsObj.innerHTML
  15.     // jq - jqObj.val() | jqObj.text() | jqObj.html()
  16.     // 取值：jqObj.text() | jqObj.text('新值') | jqObj.text(fn)
  18.     let $btn = $('.btn');
  19.     let $inp = $('input.title');
  20.     let $h1 = $('h1.title');
  22.     $btn.click(function () {
  23.         let val = $inp.val();
  24.         if (val) {
  25.             // $h1.text(val);
  26.             $h1.html(val);
  27.             $inp.val(function (index, oldValue) {
  28.                 // return oldValue.toUpperCase()
  29.                 return ''
  30.             })
  31.         }
  32.     })
  33. </script>
  34. </html>

jq样式操作

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>jq样式操作</title>
  6.     <style>
  7.         .box {
  8.             /*width: 200px;*/
  9.             height: 200px;
  10.             background-color: pink;
  11.         }
  12.         .sup-box {
  13.             /*width: 400px;*/
  14.             height: 100px;
  15.             background-color: orange;
  16.             border-radius: 50%;
  17.             line-height: 100px;
  18.             text-align: center;
  19.             color: red;
  20.         }
  21.     </style>
  22. </head>
  23. <body>
  24.     <div class="box" style="width: 600px">文本</div>
  25. </body>
  26. <script src="js/jquery-3.4.1.min.js"></script>
  27. <script>
  28.     let $box = $('.box');
  30.     $box.click(function () {
  31.         // 获取
  32.         let width = $box.css('width');
  33.         console.log(width);
  35.         // 单个设置
  36.         $box.css('background-color', function (i, o) {
  37.             console.log(o);
  38.             return 'red'
  39.         });
  41.         // 多条设置
  42.         $box.css({
  43.             width: '100px',
  44.             height: '100px',
  45.             backgroundColor: 'blue',
  46.         });
  48.         if ($box.hasClass('sup-box')) {
  49.             $box.removeClass('sup-box')
  50.         } else {
  51.             $box.addClass(function (i, o) {
  52.                 console.log(i, o);
  53.                 return 'sup-box'
  54.             })
  55.         }
  56.     })
  58. </script>
  59. <script>
  60.     // localStorage['name'] = 'owen';
  61.     // sessionStorage['age'] = 18;
  62. </script>
  63. </html>

jq初始,选择器,事件,内容操作,样式操作的更多相关文章

  1. JQuery DOM操作（属性操作/样式操作/文档过滤）

    jQuery——入门(三)JQuery DOM操作(属性操作/样式操作/文档过滤) 一.DOM属性操作 1.属性 (1).attr() 方法 语法:$(selector).attr(name|prop ...

  2. jQuery 1.0 | 选择器 | 事件 | 操作样式 | 操作属性

    使用jQuery: 1,下载jQuery http://jquery.com/download/ 2,引入jQuery文件 3,定义入口函数 <script src="jquery-1 ...

  3. dom操作 属性操作 样式操作

    jQuery DOM操作 1 插入子元素 append('<img>') 插后面 被插入元素调用 appendTo('<img scr="...">') 新 ...

  4. JQuery（一）---- JQ的选择器，属性，节点，样式，函数等操作详解

    JQuery的基本概念 JQuery是一个javascript库,JQuery凭借着简洁的语法和跨平台的兼容性,极大的简化了js操作DOM.处理事件.执行动画等操作.JQuery强调的理念是:'wri ...

  5. jQuery 选择器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 动画效果 插件 each、data、Ajax

    jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方 ...

  6. jQuery-介绍 加载 选择器 样式操作 属性操作 绑定click事件

    jQuery - 介绍 加载 选择器 样式操作 属性操作 绑定click事件 注意:以下部分问题不能实现效果,因该是单词拼写错误(少个t)或者没有加引号(“swing”)... jquery介绍 jQ ...

  7. js导读,js引入,js选择器,事件,操作页面文档,计算后样式,数据类型

    js导读 ''' js属于编写运行在浏览器上的脚本语言 js采用ECMAScript语法 操作BOM:浏览器对象模型 eg:浏览器上下滑动,浏览器历史记录 操作DOM:文档对象模型 ''' js引入 ...

  8. jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作 样式 ⑤ 事件 点击变色

    jQuery的min版本和原版功能是一样的,min版主要应用于已经开发成的网页中,而非min版 的文件比较大,里面有整洁的代码书写规范和注释,主要应用于脚本开发过程当中. JQuery是继protot ...

  9. 2016/4/1 jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作 样式 ⑤ 事件 点击变色

    jQuery的min版本和原版功能是一样的,min版主要应用于已经开发成的网页中,而非min版 的文件比较大,里面有整洁的代码书写规范和注释,主要应用于脚本开发过程当中. JQuery是继protot ...

随机推荐

  1. 基于C# WPF框架的贪吃蛇

    游戏开始界面 游戏开始 共有两条蛇,吃到红色食物加1分,吃到绿色毒食物减1分,知道0不减: 碰到墙壁游戏结束,碰到对方游戏结束,碰到自己游戏结束 此游戏通过Canvas画布布局,通过C#代码实现 游戏 ...

  2. 前端开发必备：nvm与npm与nrm

    nvm Node.js version manager ,推荐使用它来安装 node.js . Mac 版项目地址 Windows 版项目地址 windows 版安装 进入 下载页 找到安装包: 跟着 ...

  3. 利用Azure虚拟机安装Dynamics 365 Customer Engagement之六：安装后端服务器

    我是微软Dynamics 365 & Power Platform方面的工程师罗勇,也是2015年7月到2018年6月连续三年Dynamics CRM/Business Solutions方面 ...

  4. docker 使用mysqldump命令备份导出项目中的mysql数据

    下图为镜像重命名后的镜像名为uoj,现在要把这个镜像中的mysql导出 运行如下命令: docker exec -it uoj mysqldump -uroot -proot app_uoj233 & ...

  5. redlock算法及其问题

    背景 redlock算法是为了解决什么问题呢? 在单redis实例实现分布式锁时,可能会出现线程A设置完锁后,master挂掉,slave提升为master,因为异步复制的特性,线程A设置的锁丢失了, ...

  6. EF Core 中处理 1对1 关系

    最近在开发记录感想功能的时候用到了1对1的数据关系,具体情况是这样的,有这样两个1对1的类型 public class Item { public int Id { get; set; } publi ...

  7. java之生产者和消费者问题

    package testThread; public class Test3 { public static void main(String[] args) { Clerk c = new Cler ...

  8. SQL Server 2012 官方版 / SQL Server 2012下载

    SQL Server是微软的一款专业免费的关系数据库管理工具, 是一个全面的数据库平台,使用集成的商业智能 (BI)工具提供了企业级的数据管理服务,SQL Server 数据库引擎为关系型数据和结构化 ...

  9. [认证 & 授权] 3. 基于OAuth2的认证（译）

    OAuth 2.0 规范定义了一个授权(delegation)协议,对于使用Web的应用程序和API在网络上传递授权决策非常有用.OAuth被用在各钟各样的应用程序中,包括提供用户认证的机制.这导致许 ...

  10. 5分钟搞定Jenkis

    目录 什么是持续集成 Jenkins简介 Jenkins安装与启动 Jenkins插件安装 全局工具配置 自动安装 本地安装 代码上传至Git服务器 任务的创建与执行 Go项目 JAVA项目 @ 什么 ...