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. MySql数据库之常用数据类型及常用约束简述

    本文呢,主要给大家简述一下数据库中常用的几种数据类型以及约束. 1.数据类型 数据类型,是指数据表中可以存储的数据的种类. 数据库中常用的数据类型有: 1.整型:int.bit 2.小数:decima ...

  2. Redis 底层数据结构介绍

    Redis 底层数据结构 版本:2.9 支持的数据类型: 字符串 散列 列表 集合 有序集合 字符串 Redis 利用原生的 c 字符串进行了一次封装.封装的字符串叫做简单动态字符串:SDS(simp ...

  3. Client error attempting to change layout margins of a private view

    从 iOS 11 开始,UINavigationBar 使用了自动布局,左右两边的按钮到屏幕之间会有 16 或 20 的边距. 为了避免点击到间距的空白处没有响应,通常做法是:定义一个 UINavig ...

  4. Django的Form验证（2）

    Django的Form验证(2) Form的含义及作用: 用于验证用户请求数据合法性的一个组件(校验数据的合法性) Django的Form实现步骤: 创建一个验证用户请求的模板 from django ...

  5. 记一次ES查询数据突然变为空的问题

    基本环境 elasticsearch版本:6.3.1 客户端环境:kibana 6.3.4.Java8应用程序模块. 其中kibana主要用于数据查询诊断和查阅日志,Java8为主要的客户端,数据插入 ...

  6. KnockoutJS-自定义属性绑定

    在knockoutjs中,已有的绑定功能已经十分强大,基本上可以不需要再去考虑扩展了,但是,也有例外的场景,面对这种场景,还是得去完成,knockoutJS提供了自定义绑定来扩展绑定功能. 一.新建绑 ...

  7. django nginx 504 time-out 错误

    报错: 分析 nginx和uwsgi整合时有三个参数可以用于设置超时时间: 1.uwsgi_connect_timeout: 默认60秒,与uwsgi-server连接的超时时间,该值不能超过75秒. ...

  8. FCC---CSS Flexbox: Apply the flex-direction Property to Create Rows in the Tweet Embed

    The header and footer in the tweet embed example have child items that could be arranged as rows usi ...

  9. DomDom: 1 Vulnhub Walkthrough

    主机层面扫描: ╰─ nmap -p1-65535 -A -sV 10.10.202.140 You name 存在XSS 漏洞 右键源码有隐藏form表单 修改其type属性为:text 尝试了SQ ...

  10. QT--动态人流量监测系统

    QT--动态人流量监测系统 简介: 本项目使用了百度AI的动态人流量监测api,以人体头肩为主要识别目标,适用于低空俯拍,出入口场景,可用于统计当前图像的锁定人数和经过的人数 项目功能 本项目分为相机 ...