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. Blockchain 基本知识

    本文是前奏,本来要介绍Azure上的Azure Blockchain Service,发现,需要从什么是区块链开始讲起... 什么是区块链?我们从比特币说起, 2008年11月,中本聪提出了比特币白皮 ...

  2. C#线程学习笔记六：线程同步--信号量和互斥体

    本笔记摘抄自:https://www.cnblogs.com/zhili/archive/2012/07/23/Mutex_And_Semaphore.html,记录一下学习过程以备后续查用.     ...

  3. 在 C# 中使用变量

    目录 变量的声明 数据类型 变量的赋值 变量的使用 总结 程序离不开数据.把数字.字母和文字输入计算机,就是希望它利用这些数据完成某些任务.例如,需要计算双十一怎么买才最省钱或者显示购物车里面的商品列 ...

  4. npm 镜像配置

    npm 默认 registry:https://registry.npmjs.org/  npm中文文档:https://www.npmjs.cn   淘宝 NPM 镜像:https://npm.ta ...

  5. Android 开机充电图标和充电动画

    首先驱动需要先获取到2个power supply kernel\msm-3.18\drivers\usb\phy\phy-msm-usb.c motg->usb_psy.name = " ...

  6. Java编译时常量和运行时常量

    Java编译时常量和运行时常量 编译期常量指的就是程序在编译时就能确定这个常量的具体值. 非编译期常量就是程序在运行时才能确定常量的值,因此也称为运行时常量. 在Java中,编译期常量指的是用fina ...

  7. Docker安全扫描工具之Anchore

    本篇简单介绍一款Docker安全扫描工具Anchore的安装和使用. 前言 下述过程是在CentOS 7.6的虚拟机上进行的. [root@localhost ~]# cat /etc/redhat- ...

  8. 理解MVVM在react、vue中的使用

    理解MVVM在react.vue中的使用 一:什么是MVC.为什么不用MVC 1:MVC的含义: M(modal):是应用程序中处理数据逻辑的部分. V (view)  :是应用程序中数据显示的部分. ...

  9. Java描述设计模式(14)：解释器模式

    本文源码:GitHub·点这里 || GitEE·点这里 一.解释器模式 1.基础概念 解释器模式是对象的行为模式.给定一个语言之后,解释器模式可以定义出其文法的一种表示,并同时提供一个解释器.客户端 ...

  10. 最近上传图片上传文件报413错误及仅Https下报413问题，IIS高版本的配置方案及Web.config配置全解

    IIS文件上传大小限制30M,C盘中有的IIS_schema.xml文件 C:\Windows\System32\inetsrv\config\schema\ 但是考虑到安全等问题,而且这个文件默认是 ...