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. 《Java基础知识》Java常量的申明和使用

    常量就是从程序开始运行到结束都不变的量.在 Java 程序设计中,使用关键字“final”来声明一个常量,例如下面的程序代码. 这里的 x 是一个常量,但是是在某个方法内的常量,也可以称为成员常量(作 ...

  2. ES6对数组的扩展(简要总结)

    文章目录 数组的扩展(ES6) 1. 扩展运算符 2. Array.from 3. Array.of() 4. copyWithin() 5. find() 和 findIndex() 6. fill ...

  3. 数组知识总结（js）

    js数组知识注意点: 声明空数组时,和c语言中的不同 js c var arr=[ ] //合法,声明一个空数组,数组长度为0; int a[];//错误因为在c中声明一个数组不仅要指定类型还要指定数 ...

  4. 《Dotnet9》建站-建站20天感悟

    时间如流水,只能流去不流回! 点赞再看,养成习惯,这是您给我创作的动力! 本文 Dotnet9 https://dotnet9.com 已收录,站长乐于分享dotnet相关技术,比如Winform.W ...

  5. HttpRunner学习8--使用debugtalk.py辅助函数

    前言 在HttpRunner中,我们的测试用例都是写在 YAML/JSON 文件中,有时候我们想借助代码来实现某些较复杂的功能,但在 YAML/JSON 中是无法直接写代码来处理的,这个时候,我们可以 ...

  6. iOS编译自动升级版本号脚本

    版权申明: 本文原创首发于以下网站,您可以自由转载,但必须加入完整的版权声明 博客园:https://www.cnblogs.com/MogooStudio/ csdn博客:https://blog. ...

  7. Hadoop_简介_01

    1. Apache Hadoop 1.1 Hadoop介绍 Hadoop是Apache旗下的一个用java语言实现的开源软件框架, 是一个开发和运行处理大规模数据的软件平台. 允许使用简单的编程模型在 ...

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

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

  9. Redis 常用知识

    Redis 介绍 Redis 一个开源的使用ANSI C语言编写.遵守BSD协议,内存中的数据结构存储系统,它可以用作Key-Value数据库.缓存和消息中间件,并提供多种语API. 支持多种数据结构 ...

  10. WPF之实现控件内容拖动

    以下分别记录label.listbox.treeview三个控件的拖动示例: 1.对被拖动控件,实现拖动事件,主要是通过各种鼠标事件,实现DragDrop.DoDragDrop方法. 2.对于需要拖动 ...