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初始,选择器,事件,内容操作,样式操作的更多相关文章

  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#访问SFTP：Renci.SshNet.Async

    SFTP是SSH File Transfer Protocol的缩写,安全文件传送协议.安全文件传送协议.可以为传输文件提供一种安全的网络的加密方法.sftp 与 ftp 有着几乎一样的语法和功能. ...

  2. c++-面向对象类的示例-求周长面积，判断体积相等-文件操作和一般操作

    面向对象编程示例:求周长和面积 #define _CRT_SECURE_NO_WARNINGS #include <iostream> using namespace std; //圆的周 ...

  3. TopCoder12729 「SRM589Medium」GearsDiv1 二分图最小点覆盖

    问题描述 \(N\) 个齿轮每个齿轮有颜色(RGB),有些齿轮之间会咬合,你需要删除尽量少的齿轮并给每种颜色安排方向使得咬合齿轮不同向.问最多保留多少个齿轮.保证不存在两个相同颜色的齿轮咬合. sub ...

  4. 集合系列 Map（十三）：LinkedHashMap

    我们之前说过 LinkedHashMap 是在 HashMap 的基础上,增加了对插入元素的链表维护.那么其到底是怎么实现的呢?今天这篇文章就带我们来一探究竟. public class Linked ...

  5. kibana的query string syntax 笔记

    kibana的query string syntax 并不是 Query String Query,只能说类似.kibana的 Lucene query string syntax(es的query ...

  6. Git实战指南----跟着haibiscuit学Git(第三篇)

    笔名:  haibiscuit 博客园: https://www.cnblogs.com/haibiscuit/ Git地址: https://github.com/haibiscuit?tab=re ...

  7. 使用 Flutter 开发 Mac 桌面应用

    Flutter 可以开发 Mac,Linux,Windows 桌面,但是对于平台目前只能打对于的包,以及调试本平台的包. 切换到 master 分支 首先必须切换到 master 分支.我之前在 de ...

  8. 前端开发规范：4-JS

    ESLint 使用ESLint的standard规范来编写js代码 更多参考: https://github.com/standard/standard/blob/master/docs/README ...

  9. Linux学习入门-------------------------VMvare与镜像的安装与配置

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/qq_39038465/article/d ...

  10. MySQL 8.0部分弃用的参数整理

    最近整理了一下MySQL 8.0的自动化安装,其中用到了一个MySQL 5.7版本的自定义配置文件,由于没有对(MySQL 8.0)做针对性修改,导致安装过程中出现了一些错误其中部分原因就是MySQL ...