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. css应用视觉设计

    应用视觉设计:创建一个 CSS 线性渐变 HTML元素的背景色并不局限于单色.css还提供了颜色过渡,也就是渐变.可以通过background里面的linear-gradient()来实现线性渐变,下 ...

  2. python的memory_profiler模块使用

    本文主要介绍了python内存分析工具: memory_profiler,可以展示每一行代码执行所增加的内存,方便做内存调优和排除bug memory_profiler是第三方模块,需要安装才能使用 ...

  3. Python、 Pycharm、Django安装详细教程(图文)

    前言 这篇文章主要介绍了Python. Pycharm.Django安装详细教程,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧. ...

  4. 在命令提示符下，运行Java程序时，提示"找不到或无法加载主类"

    小白:在命令提示符下,运行Java程序时,提示"找不到或无法加载主类". 大神:运行Java程序的作用是让Java解释器装载,检验并运行字节码文件(.class).因此,在运行Ja ...

  5. JS---DOM---案例：模拟百度搜索框

    模拟百度搜索框 我的思路整理: 1. 注册文本框抬起事件(onkeyup) 2. 处理函数: --->创建临时数组,循环遍历文本框键入的文字内容和keywords数组,用keyWords[i]. ...

  6. Linux-进程的观察

    16.1.1 进程与程序 ·程序 (program):通常为 binary program ,放置在储存媒体中 (如硬盘.光盘.软盘.磁带等), 为实体文 件的型态存在: ·进程 (process): ...

  7. CentOS 7 离线环境安装nginx时报错：./configure: error: C compiler cc is not found

    先说解决方法: 在nginx目录下,查看objs/autoconf.err文件,该文件记录了具体的错误信息 vi objs/autoconf.err 一般就是缺少一些文件,因为我的gcc.g++也是离 ...

  8. 面试连环炮系列（六）：Dubbo应用为什么要部署Zookeeper

    Dubbo应用为什么要部署Zookeeper? Zookeeper用来注册和发现服务,简单说就是提供端注册接口信息到Zookeeper,调用端在Zookeeper上查找接口对应的服务IP和端口.由于Z ...

  9. 利用keras自带影评数据集进行评价正面与否的二分类训练

    from keras.datasets import imdb from keras import layers from keras import models from keras import ...

  10. 求连通块个数 - BFS、DFS、并查集实现

    本文基于leetcode的200.岛屿数量(题目