jQuery 框架

jQuery 框架
一. 概述
二. jQuery 安装引用
三. jQuery基本语法
四. 查找标签
五. 练习题
- 5.1 答案
- 5.2 代码
六. 操作标签
七. 事件相关
八. 标签循环存储数据

一. 概述

jQuery 是一个 JavaScript 库。

jQuery 极大地简化了 JavaScript 编程。

"""

jQuery内部封装了原生的js代码(还额外添加了很多的功能)

能够让你通过书写更少的代码 完成js操作

类似于python里面的模块  在前端模块不叫模块  叫 “类库”

兼容多个浏览器的 你在使用jQuery的时候就不需要考虑浏览器兼容问题

jQuery的宗旨

	write less do more

	让你用更少的代码完成更多的事情

复习

	python导入模块发生了哪些事？

		导入模块其实需要消耗资源

	jQuery在使用的时候也需要导入

		但是它的文件非常的小(几十KB) 基本不影响网络速度

选择器

筛选器

样式操作

文本操作

属性操作

文档处理

事件

动画效果

插件

each、data、Ajax(重点 django部分学)

版本介绍

jQuery文件下载

	压缩  		容量更小

	未压缩

"""

# jQuery在使用之前 一定要确保已经导入了

帮助文档：https://m.runoob.com/jquery/jquery-install.html

二. jQuery 安装引用

2.1 安装

#01 安装地址

https://jquery.com/download/

这里使用的是 3.7.1

https://code.jquery.com/jquery-3.7.1.min.js

2.2 本地导入使用

#01 本地文件直接导入 src=""

<head>

    <script src="jQuery-3.7.1.js"></script>

</head>

#02 pycharm 提供的自动初始化默认

<script src="jQuery-3.7.1.js"></script>

注意该两种方式，本地必须已经下载了 jQuery-3.7.1.js 文件，而且在统计目录

2.3 jQuery CDN引入

"""

如果您不希望下载并存放 jQuery，那么也可以通过 CDN（内容分发网络） 引用它。

Staticfile CDN、百度、又拍云、新浪、谷歌和微软的服务器都存有 jQuery 。

如果你的站点用户是国内的，建议使用百度、又拍云、新浪等国内CDN地址，如果你站点用户是国外的可以使用谷歌和微软。

"""

#01 cdn引入

https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

三. jQuery基本语法

#01 jQuery基本语法

	jQuery(选择器).action操作()

  秉持着jQuery的宗旨 jQuery简写	$

  jQuery()  === $()

#02 jQuery与js代码对比

	eg:将p标签内部的文本颜色改为红色

   	// 原生js代码操作标签

		let pEle = document.getElementById('d1')

		pEle.style.color = 'red'

		// jQuery操作标签

		$('p').css('color','blue')

四. 查找标签

4.1 基本选择器

#01 id选择器

$('#d1');

ce.fn.init [div#d1]0: div#d1length: 1[[Prototype]]: Object(0)

#02  class 选择器

$('.c1');

ce.fn.init [prevObject: ce.fn.init(1)]

#03 标签选择器

$('span');

ce.fn.init(2) [span, span, prevObject: ce.fn.init(1)]0:

            span1: spanlength:

            2prevObject: ce.fn.init 

            [document][[Prototype]]: Object(0)

"""

// 上述得到的为 jQuery对象

// 可以转为标签对象，方式如下

"""

#04  jQuery对象转为标签对象，取索引0

$('#d1')[0]

<div id="d1">…</div>

#05 标签对象转为 jQuery对象 $('标签对象')

$(document.getElementById('d1'))

ce.fn.init [div#d1]0: div#d1length: 1[[Prototype]]: Object(0)

4.2 组合选择器/分组与嵌套



//div包含c1类的标签

$('div.c1')

ce.fn.init [div.c1, prevObject: ce.fn.init(1)]

//div标签包含 idd1的标签

$('div#d1')

ce.fn.init [div#d1, prevObject: ce.fn.init(1)]

// 找出ID 类 标签并列

$('#d1,.c1,p')

ce.fn.init(4) [div#d1, p, div.c1, p, prevObject: ce.fn.init(1)]

// 后代，div下面所有的span

$('div span')

ce.fn.init(2) [span, span, prevObject: ce.fn.init(1)]

// 儿子，只有div下面的span 不递归查找

$('div>span');

ce.fn.init [span, prevObject: ce.fn.init(1)]

 // 毗邻 div 邻近的span 注意只能找div 下方临近的第一个标签是否是 span

$('div+span')

ce.fn.init [span, prevObject: ce.fn.init(1)]

// 弟弟 跟div同级别

$('div~span')

ce.fn.init(3) [span, span, span, prevObject: ce.fn.init(1)]

4.3 基本筛选器

// 大儿子 找出第一个值

$('ul li:first');

// 小儿子 找出最后一个值

$('ul li:last');

// 指定索引取值

$('ul li:eq(3)');

// 取偶数索引的值 零包含在内

$('ul li:even')

// 取奇数索引的值

$('ul li:odd')

// 大于索引的

$('ul li:gt(2)')

// 小于索引的

$('ul li:lt(2)')

// 排除满足条件的

$('ul li:not("#d1")');

// 选取出包含一个或者多个标签在内的标签

$('div:has("p")')

4.4 属性选择器

// 属性是 username

$('[username]')

// 属性是 username = zhang

$('[username="zhang"]')

// 属性是 username = fu 并且是p标签的

$('p[username="fu"]')

// 内部的标签一样操作

$('[type]')

$('[type="text"]')

代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="jQuery-3.7.1.js"></script>

</head>

<body>

<input type="text" username="zhang">

<input type="text" username="yu">

<p username="fu"></p>

</body>

</html>

4.5 表单筛选器

// 找出表单 from类型是 text password

$('input[type="text"]');

$('input[type="password"]');

// 针对表单 from类型 简写 等同上方两个

$(':text');

$(':password');   

:text

:password

:file

:radio

:checkbox

:submit

:reset

:button

...

表单对象属性

:enabled

:disabled

:checked

:selected

"""特殊情况"""

// 找类型是 checked 它会将checked和selected都拿到

$(':checked');

// 它不会 只拿selected

$(':selected')  

// 找类型是 checked 加限制条件

$('input:checked');

代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="jQuery-3.7.1.js"></script>

</head>

<body>

<form action="">

    <p>username:<input type="text"></p>

    <p>password:<input type="password"></p>

    <input type="checkbox" value="111"> 111

    <input type="checkbox" value="222" checked> 222

    <input type="checkbox" value="333"> 333

    <select name="" id="">

        <option value="">111</option>

        <option value="">222</option>

        <option value="" selected>333</option>

    </select>

    <input type="button" value="按钮">

</form>

</body>

</html>

4.6 筛选器方法



// 同级别下一个

$('#d1').next();

// 同级别下方所有标签

$('#d1').nextAll();

// 同级别下所有标签 到特定标签结束

$('#d1').nextUntil('.c1');

// 同级别上一个

$('.c1').prev();

// 同级别上所有标签

$('.c1').prevAll();

// 同级别上所有标签 到指定标签结束 （不包含指定的标签）

$('.c1').prevUntil('#d1');

// 第一级父标签

$('#d3').parent;

$('#d3').parent().parent();

// 往上找所有的父标签 截止到html标签 包含html

$('#d3').parents()

// 往上找所有的父标签 截止到指定标签

$('#d3').parentsUntil('body')

// 儿子 同级别下 所有

$('#d2').children();

// 同级别上下所有

$('#d2').siblings();

---

// find从某个区域内筛选出想要的标签

$('div').find('p')  // 等于 $('div p')

// 特定标签的第一个 (span 有多个 取第一个)

$('div span').first();

// 特定标签的最后一个  (span 有多个 取最后一个)

$('div span').last();

// 特定标签 不包含，排除 (span 有多个 排除id是 id3的)

$('div span').not('#d3');

代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="jQuery-3.7.1.js"></script>

</head>

<body>

    <span id="d1">span</span>

    <span>span</span>

    <div id="d2">

        <span>div>span</span>

        <p>div>p

            <span id="d3">div>p>span</span>

        </p>

        <span>div>span</span>

    </div>

    <span>span</span>

    <span>span</span>

    <span class="c1">span</span>

</body>

</html>

五. 练习题

5.1 答案

// 1.找到本页面中id是i1的标签

$('#i1');

// 2.找到本页面中所有的h2标签

$('h2');

// 3.找到本页面中所有的input标签

$('input');

// 4.找到本页面所有样式类中有c1的标签

$('.c1');

// 5.找到本页面所有样式类中有btn-default的标签

$('.btn-default');

// 6.找到本页面所有样式类中有c1的标签和所有h2标签

$('.c1,h2');

// 7.找到本页面所有样式类中有c1的标签和id是p3的标签

$('.c1,#p3');

// 8.找到本页面所有样式类中有c1的标签和所有样式类中有btn的标签

$('.c1,.btn');

// 9.找到本页面中form标签中的所有input标签

$('form').find('input');

// 10.找到本页面中被包裹在label标签内的input标签

$('label').find('input');

$('label input');

// 11.找到本页面中紧挨在label标签后面的input标签

$('label+input');

// 12.找到本页面中id为p2的标签后面所有和它同级的li标签

$('#p2~li');

// 13.找到id值为f1的标签内部的第一个input标签

$('#f1 input').first();

// 14.找到id值为my-checkbox的标签内部最后一个input标签

$('#my-checkbox input').last();

// 15.找到id值为my-checkbox的标签内部没有被选中的那个input标签

$('#my-checkbox input[checked!="checked"]');

// 16.找到所有含有input标签的label标签

$('label').has('input');

5.2 代码

<!DOCTYPE html>

<html lang="zh-CN">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="x-ua-compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>jQuery选择器筛选器练习</title>

  <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

  <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

  <style>

    .my-padding {

      padding: 10px 0;

    }

    .my-dark {

      background-color: #f5f5f5;

    }

    .footer {

      background: #111;

      font-size: 0.9em;

      position: relative;

      clear: both;

    }

    .my-white {

      color: #ffffff;

    }

    body {

      margin: 0;

    }

    #progress {

      height: 2px;

      background-color: #b91f1f;

      transition: opacity 500ms linear;

    }

    #progress.done{

      opacity: 0;

    }

  </style>

</head>

<body>

<div id="progress"></div>

<!--导航栏开始-->

<nav class="navbar navbar-inverse my-nav">

  <div class="container">

    <!-- Brand and toggle get grouped for better mobile display -->

    <div class="navbar-header">

      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"

              data-target="#bs-example-navbar-collapse-1" aria-expanded="false">

        <span class="sr-only">Toggle navigation</span>

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>

      </button>

      <a class="navbar-brand" href="http://www.oldboyedu.com/"><strong>OldBoy Edu</strong></a>

    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

      <ul class="nav navbar-nav">

        <li><a href="#">Python学院<span class="sr-only">(current)</span></a></li>

        <li><a href="#">Linux学院</a></li>

        <li><a href="http://luffy.oldboyedu.com">路飞学城</a></li>

      </ul>

      <ul class="nav navbar-nav navbar-right">

        <li><a href="#">好好学习</a></li>

        <li class="dropdown">

          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"

             aria-expanded="false">联系我们<span class="caret"></span></a>

          <ul class="dropdown-menu">

            <li><a href="#">Jason</a></li>

            <li><a href="#">Sean</a></li>

            <li><a href="#">Oscar</a></li>

            <li role="separator" class="divider"></li>

            <li><a href="#">Jason</a></li>

          </ul>

        </li>

      </ul>

    </div><!-- /.navbar-collapse -->

  </div><!-- /.container-fluid -->

</nav>

<!--导航栏结束-->

<div class="container">

  <div class="jumbotron">

    <div id="i1" class="container">

      <h1 class="c1">Jason</h1>

      <h1 class="c1">带你学习jQuery</h1>

      <p id="p1"><a class="btn btn-primary btn-lg" href="https://q1mi.github.io/Blog/2017/07/10/about_jQuery/"

                    role="button">查看更多</a></p></div>

  </div>

  <hr>

  <div class="row">

    <div class="col-md-12">

      <table class="table table-bordered table-striped">

        <thead>

        <tr>

          <th>#</th>

          <th>姓名</th>

          <th>爱好</th>

          <th>操作</th>

        </tr>

        </thead>

        <tbody>

        <tr>

          <th>1</th>

          <td>Jason</td>

          <td>学习</td>

          <td>

            <button class="btn btn-warning">编辑</button>

            <button class="btn btn-danger">删除</button>

          </td>

        </tr>

        <tr>

          <th>2</th>

          <td>Oscar</td>

          <td>大饼</td>

          <td>

            <button class="btn btn-warning">编辑</button>

            <button class="btn btn-danger">删除</button>

          </td>

        </tr>

        <tr id="tr3">

          <th>3</th>

          <td>Egon</td>

          <td>吹牛逼</td>

          <td>

            <button class="btn btn-warning">编辑</button>

            <button class="btn btn-danger">删除</button>

          </td>

        </tr>

        </tbody>

      </table>

    </div>

  </div>

  <hr>

  <div class="row">

    <div class="col-md-12">

      <form id="f1">

        <div class="form-group">

          <label for="exampleInputEmail1">邮箱</label>

          <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">

        </div>

        <div class="form-group">

          <label for="exampleInputPassword1">密码</label>

          <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">

        </div>

        <div class="form-group">

          <label for="exampleInputFile">上传头像</label>

          <input type="file" id="exampleInputFile">

          <p class="help-block">只支持img格式。</p>

        </div>

        <button id="btnSubmit" type="submit" class="btn btn-default">提交</button>

      </form>

    </div>

  </div>

  <hr>

  <div class="row">

    <div class="col-md-12">

      <div class="checkbox-wrapper">

        <div class="panel panel-info">

          <div class="panel-heading">jQuery学习指南</div>

          <div id="my-checkbox" class="panel-body">

            <div class="checkbox">

              <label>

                <input type="checkbox" value="0">

                jQuery一点都不难

              </label>

            </div>

            <div class="checkbox">

              <label>

                <input type="checkbox" value="1" checked>

                jQuery一学就会

              </label>

            </div>

            <div class="checkbox">

              <label>

                <input type="checkbox" value="2">

                jQuery就要多练

              </label>

            </div>

            <div class="checkbox">

              <label>

                <input type="checkbox" value="3" disabled>

                jQuery学不好

              </label>

            </div>

          </div>

        </div>

      </div>

      <hr>

      <div class="radio-wrapper">

        <div class="panel panel-info">

          <div class="panel-heading">我来老男孩之后...</div>

          <div class="panel-body">

            <div class="radio">

              <label>

                <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>

                我的心中只有学习

              </label>

            </div>

            <div class="radio">

              <label>

                <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">

                学习真的太TM有意思了

              </label>

            </div>

          </div>

        </div>

      </div>

    </div>

  </div>

  <hr>

  <div>

    <i class="fa fa-hand-pointer-o fa-lg fa-rotate-90" aria-hidden="true"></i>

    <a class="btn btn-success" href="http://jquery.cuishifeng.cn/">jQuery中文API指南</a>

  </div>

  <hr>

  <div class="row">

    <div class="col-md-12">

      <h2>练习题：</h2>

      <ol id="o1">

        <li>找到本页面中id是<code>i1</code>的标签</li>

        <li>找到本页面中所有的<code>h2</code>标签</li>

        <li>找到本页面中所有的<code>input</code>标签</li>

        <li>找到本页面所有样式类中有<code>c1</code>的标签</li>

        <li>找到本页面所有样式类中有<code>btn-default</code>的标签</li>

        <li>找到本页面所有样式类中有<code>c1</code>的标签和所有<code>h2</code>标签</li>

        <li>找到本页面所有样式类中有<code>c1</code>的标签和id是<code>p3</code>的标签</li>

        <li>找到本页面所有样式类中有<code>c1</code>的标签和所有样式类中有<code>btn</code>的标签</li>

        <p id="p2" class="divider"></p>

        <li>找到本页面中<code>form</code>标签中的所有<code>input</code>标签</li>

        <li>找到本页面中被包裹在<code>label</code>标签内的<code>input</code>标签</li>

        <li>找到本页面中紧挨在<code>label</code>标签后面的<code>input</code>标签</li>

        <li>找到本页面中id为<code>p2</code>的标签后面所有和它同级的<code>li</code>标签</li>

        <p id="p3" class="divider"></p>

        <li>找到id值为<code>f1</code>的标签内部的第一个input标签</li>

        <li>找到id值为<code>my-checkbox</code>的标签内部最后一个input标签</li>

        <li>找到id值为<code>my-checkbox</code>的标签内部没有被选中的那个input标签</li>

        <li>找到所有含有<code>input</code>标签的<code>label</code>标签</li>

      </ol>

    </div>

  </div>

</div>

<div class="my-dark my-padding">

  <div class="container">

    <div class="col-sm-8 my-center">

      <p>写很少的代码，做很多的事。</p>

      <h4>所以说</h4>

      <p>学好jQuery真的很重要，学好jQuery真的很重要，学好jQuery真的很重要。</p>

    </div>

  </div>

</div>

<div class="footer">

  <div class="row">

    <div class="col-md-12 text-center">

      <span class="my-white">&copy;2020 Jason</span>

    </div>

  </div>

</div>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>

</html>

六. 操作标签

6.1 样式类操作

"""

js版本														jQuery版本

classList.add()										addClass()			增加

classList.remove()								removeClass()		移除

classList.contains()							hasClass()			判断是否包含

classList.toggle()								toggleClass()		有则添加 无责移除

"""

// 获取所有的类

$('#d1');

k.fn.init [div#d1.c1.c2.c3]

// 移除c1

$('#d1').removeClass('c1');

k.fn.init [div#d1.c2.c3]

// 添加c1类

$('#d1').addClass('c1');

k.fn.init [div#d1.c2.c3.c1]

// 有侧移除 无则添加

$('#d1').toggleClass('c1');

k.fn.init [div#d1.c2.c3]

// 有侧移除 无则添加

$('#d1').toggleClass('c1');

k.fn.init [div#d1.c2.c3.c1]

// 判断c2是否存在

$('#d1').hasClass('c2');

true

// 判断c22是否存在

$('#d1').hasClass('c22');

false

6.2 css操作

#01 实现一行代码 改变3个p标签为不同颜色

$('p').first().css('color','red').next().css('color','green').next().css('color','red');

这是jQuery返回的是个对象 所以可以使用对象内的方法

# jQuery的链式操作 使用jQuery可以做到一行代码操作很多标签

# jQuery对象调用jQuery方法之后返回的还是当前jQuery对象 也就可以继续调用其他方法

class MyClass(object):

    def func1(self):

        print('func1')

        return self

    def func2(self):

        print('func2')

        return self

obj = MyClass()

obj.func1().func2()

python返回对象 也可以做到链路操作

6.3 位置操作

##位置操作

#01 相对于浏览器窗口

$('p').offset();

{top: 215.9943084716797, left: 200}

#02 相对于父标签

$('p').position();

{top: 199.9943084716797, left: 200}

#03 上下获取/设置当前移动位置

1）获取当前位置

$(window).scrollTop()

0

2）获取当前位置

$(window).scrollTop()

3264

3）设置当前位置 括号内有值代表设置

$(window).scrollTop(1555)

#04 左右获取/设置当前移动位置

$(window).scrollLeft()

$(window).scrollLeft(123)

6.4 尺寸操作

# 尺寸

#01 文本尺寸

1) 高度

$('p').height();

22.7273

2) 宽度

$('p').width();

1089.46

#02 文本+padding 尺寸

$('p').innerHeight();

42.7273

$('p').innerWidth();

1119.46

#03 文本+padding+border 尺寸

$('p').outerWidth();

1119.46

$('p').outerHeight();

42.7273

6.5 文本操作

"""

操作标签内部文本

js											jQuery

innerText								text()  括号内不加参数就是获取加了就是设置

innerHTML								html()

"""

// 获取文本信息

$('div').text();

'世界这么大 还是遇见你'

// 获取文本信息加标签

$('div').html();

'<p>世界这么大 还是遇见你</p>'

// 设置文本信息

$('div').text('世界你好');

// 设置标签加文本信息

$('div').html('<h1>世界你好</h1>');

6.6 获取值操作

"""

js													jQuery

.value											.val()

"""

// 01 获取input用户输入的内容

$('#d1').val();

// 02 设置input用户输入的内容，加括号代表获取

$('#d1').val('付付你好');

// 03 获取文件

$('#d2')[0].files[0];

注意：这里先转为js原生对象 然后通过files方法取值

6.7 属性操作

"""

js中																jQuery

setAttribute()											attr(name,value)

getAttribute()											attr(name)

removeAttribute()										removeAttr(name)

																		$('#d2').prop('checked')

在用变量存储对象的时候 js中推荐使用

	XXXEle			标签对象

jQuery中推荐使用

	$XXXEle			jQuery对象

修改设置自定义属性

对于标签上有的能够看到的属性和自定义属性用attr

对于返回布尔值比如checkbox radio option是否被选中用prop

"""

#01 获取标签对象 并赋值给变量

let $pEle = $('p');

undefined

#02 获取id属性

$pEle.attr('id');

'd1'

#03 设置id属性

$pEle.attr('id','d5');

$pEle.attr('id');

'd5'

#04 获取类属性

$pEle.attr('class');

undefined

#05 设置类属性

$pEle.attr('class','c1');

$pEle.attr('class');

'c1'

#06 设置自定义属性

$pEle.attr('useranme','fufu');

$pEle.attr('useranme');

'fufu'

----针对用户选择框 checkbox radio option  查看是否被选中用prop----

#01 查看是否被用户选中 返回 false true

1）查看返回结果

$('#d2').prop('checked')

false

2）两个值是设置

$('#d2').prop('checked','true')

k.fn.init [input#d2]

3）检查

$('#d2').prop('checked')

true

6.8 文档处理

"""

js																		jQuery

createElement('p')										$('<p>')		创建标签

appendChild()													append()		添加标签

"""

#01 创建p标签

let $pEle = $('<p>');

undefined

#02 添加文本

$pEle.text('你好啊 要草莓吗'); 

#03 添加属性

$pEle.attr('id','p1');

#04 内部尾部追加	两种写法效果一样,会在 d2标签的下面添加该标签

$('#d2').append($pEle)

$pEle.appendTo($('#d2'));

#05 头部添加 两种写法效果一样 会在标签上面

$('#d1').prepend($pEle);

$pEle.prependTo($('#d2'))

#06 插入指定标签下面第一个 两种写法一样

$pEle.insertAfter($('#d1'));

$('#d2').after($pEle);

#07 插入指定标签上面第一个 两种写法一样

$('#d1').before($pEle)

$pEle.insertBefore($('#d2'))

#08 删除标签

$('#d1').remove();

#09 清空标签内部所有内容 不包含标签本身

$('#d1').empty()

七. 事件相关

7.1 绑定事件的方式

"""click 点击事件"""

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

</head>

<body>

<button id="d1">点我</button>

<button id="d2">再点下</button>

<script>

  // 第一种

  $('#d1').click(function (){

    alert('别说话温我')

  })

  // 第二种 (功能更加强大 还支持事件委托)

  $('#d2').on('click',function (){

    alert('借点钱 买草莓')

  })

</script>

</body>

</html>

7.2 克隆事件

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

</head>

<style>

  #d1 {

    border: 5px yellow solid;

    height: 100px;

    width: 100px;

    background-color: gold;

  }

</style>

<body>

<button id="d1">点击就送屠龙宝刀</button>

<script>

   //绑定点击事件

  $('#d1').on('click',function (){

    // console.log(this)   this指代是当前被操作的标签对象

    // $(this).clone().insertAfter($('body'))  // clone默认情况下只克隆html和css 不克隆事件

    $(this).clone(true).insertAfter($('body'))  // 括号内加true即可克隆事件

  })

</script>

</body>

</html>

7.3 自定义模态框

"""

label 标签

    定义: <label>标签为 input 元素定义标注(标记)

    说明: 1. label元素不会向用户呈现任何特殊效果

             2. <label>标签的for属性值应当与相关元素的id属性值相同

"""

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

</head>

<style>

    .cover {

        position: fixed;

        left: 0;

        right: 0;

        top: 0;

        bottom: 0;

        background-color: darkgrey;

        z-index: 999;

    }

    .modal {

        width: 600px;

        height: 400px;

        background-color: white;

        position: fixed;

        left: 50%;

        top: 50%;

        margin-left: -300px;

        margin-top: -200px;

        z-index: 1000;

    }

    .hide {

        display: none;

    }

</style>

<body>

<input type="button" value="弹出" id="d1">

<div id="d2" class="cover hide"></div>

<div class="modal hide">

    <label for="i1">姓名</label>

    <input  id="i1" type="text">

    <label for="i2">密码</label>

    <input id="i2" type="text">

    <input type="button" id="i3" value="关闭">

</div>

<script>

    // 01 绑定点击事件 点击弹出后 移除hide属性（默认展示）

    $('#d1').on('click',function (){

        // 1.1 获取标签对象

        var corverEle = $('.cover')[0]

        var modalEle = $('.modal')[0]

        // 转为Query对象 并移除默认展示

        $(corverEle).removeClass('hide')

        $(modalEle).removeClass('hide')

    })

    // 02 点击关闭时 添加 hide属性

    $('#i3').on('click',function (){

        // 1.1 获取标签对象

        var corverEle = $('.cover')[0]

        var modalEle = $('.modal')[0]

        // 转为Query对象 并添加默认展示类

        $(corverEle).addClass('hide')

        $(modalEle).addClass('hide')

    })

</script>

</body>

</html>

7.4 左侧菜单

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

</head>

<style>

    .left {

        float: left;

        position: fixed;

        width: 30%;

        height: 100%;

        background-color: lightgoldenrodyellow;

    }

    .title {

        font-size: 36px;

        text-align: center;

        color: black;

    }

    .items {

        border: 2px yellowgreen solid;

        font-size: 24px;

    }

    .hide {

        display: none;

    }

</style>

<body>

<div class="left">

    <div class="men">

        <div class="title">菜单一

            <div class="items">111</div>

            <div class="items">222</div>

            <div class="items">333</div>

        </div>

        <div class="title">菜单二

            <div class="items">111</div>

            <div class="items">222</div>

            <div class="items">333</div>

        </div>

        <div class="title">菜单三

            <div class="items">111</div>

            <div class="items">222</div>

            <div class="items">333</div>

        </div>

    </div>

</div>

<script>

    $('.title').click(function (){

        //01 先给所有items 加上hide

        $('.items').addClass('hide')

        //02 然后将被点击标签内部的 hide移除

        $(this).children().removeClass('hide')

    })

</script>

</body>

</html>

7.5 返回顶部

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

</head>

<style>

    .hide {

        display: none;

    }

    #d1 {

        border: #111111 solid 5px;

        position: fixed;

        right: 20px;

        bottom: 20px;

        height: 20px;

        width: 70px;

    }

</style>

<body>

<div style="height: 500px;background-color: red"></div>

<div style="height: 500px;background-color: greenyellow"></div>

<div style="height: 500px;background-color: blue"></div>

<a id="d1" href="" class="hide">返回顶部</a>

<script>

    // 屏幕滚动事件

    $(window).scroll(function (){

        //判断屏幕滚动超过300 则移除 hide 展示回到顶部

        if($(window).scrollTop() > 300){

            $('#d1').removeClass('hide')

        }

    })

    // 点击事件,点击回到顶部后 回到顶部

    $('d1').click(function (){

        $(window).scrollTop(0)

    })

</script>

</body>

</html>

7.6 自定义登入校验

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

</head>

<body>

<p>请输入账户：

    <input type="text" id="d1">

    <span style="color: red"></span>

</p>

<p>请输入密码：

    <input type="password" id="d2">

    <span style="color: red"></span>

</p>

<button id="d3">提交</button>

<script>

    // 01 绑定点击事件 用户提交判断输入是否是空

    let $user = $('#d1')

    let $pass = $('#d2')

    $('#d3').click(function () {

        // 获取用户输入

        let user = $user.val()

        let pass = $pass.val()

        if (!user) {

            $user.next().text("账户不能为空")

        }

        if (!pass) {

            $pass.next().text("密码不能为空")

        }

    })

    // 02 当用户重新输入时候 focus 聚焦点 取消该文本提示

    $('input').focus(function () {

        // 找出input 下面的span便签 清空提示

        $('input').next().text('')

    })

</script>

</body>

</html>

7.7 input实时监控

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>k</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">

    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>

</head>

<body>

<input type="text" id="d1">

<script>

    // 绑定input事件 获取输入内容

    $('#d1').on('input',function () {

        console.log(this.value)

    })

</script>

</body>

</html>

7.8 hover 鼠标悬浮事件

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

</head>

<body>

<span id="d1">不要把鼠标移动过来 有惊喜</span>

<script>

  // 绑定hover 鼠标悬浮事件

  $('#d1').hover(function (){

    alert('你还真点啊，上当了把')

  },

  function (){

    alert('别走啊 我开玩笑的')

  }

  )

</script>

</body>

</html>

7.9 键盘按键按下事件

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

</head>

<body>

<script>

    $(window).keydown(function (event) {

        console.log(event.keyCode)

        if (event.keyCode === 16){

            alert('你按了shift键')

        }

    })

</script>

</body>

</html>

7.10 阻止后续事件的执行

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

</head>

<body>

<input id="d2" type="submit">

<p><span id="d1" style="color: red" ></span></p>

<script>

  // 点击input按钮 往span标签添加一句话

  $('#d2').click(function (){

    $('#d1').text('宝贝 你能看见我吗')

     // 阻止标签后续事件的执行 方式1

     // return false

     // 阻止标签后续事件的执行 方式2 需要传参数

     // e.preventDefault()

    return false

  })

</script>

</body>

</html>

7.11 阻止事件冒泡

#01 点击子标签绑定事件后  子标签执行完毕后会父标签询问 父标签如果也绑定该事件 同样会执行

<script>

        $('#d1').click(function () {

            alert('div')

        })

        $('#d2').click(function () {

            alert('p')

        })

        $('#d3').click(function (e) {

            alert('span')

            // 阻止事件冒泡的方式1

            // return false

            // 阻止事件冒泡的方式2

            // e.stopPropagation()

        })

</script>

7.12 事件委托

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

</head>

<body>

<button>是兄弟，就来砍我!!!</button>

<script>

    // 给页面上所有的button标签绑定点击事件

    // $('button').click(function () {  // 无法影响到动态创建的标签

    //     alert(123)

    // })

    // 事件委托

    $('body').on('click','button',function () {

        alert(123)  // 在指定的范围内 将事件委托给某个标签 无论该标签是事先写好的还是后面动态创建的

    })

</script>

</body>

</html>

7.13 页面加载

# 等待页面加载完毕再执行代码

window.onload = function(){

  // js代码

}

"""jQuery中等待页面加载完毕"""

# 第一种

$(document).ready(function(){

  // js代码

})

# 第二种

$(function(){

  // js代码

})

# 第三种

"""直接写在body内部最下方"""

7.14 动画效果

// 动画效果 5秒后展示或者隐藏

$('#d1').hide(5000)

$('#d1').show(5000)

$('#d1').slideUp(5000)

$('#d1').slideDown(5000)

$('#d1').fadeOut(5000)

$('#d1').fadeIn(5000)

$('#d1').fadeTo(5000,0.4)

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

</head>

    <style>

        #d1 {

            height: 1000px;

            width: 400px;

            background-color: red;

        }

    </style>

<body>

<div id="d1"></div>

</body>

</html>

八. 标签循环存储数据

each 循环
data 存储数据

# each()

# 第一种方式

// each 循环

$('div')

k.fn.init(10) [div, div, div, div, div, div, div, div, div, div, prevObject: k.fn.init(1)]

// each 循环 放一个参数取索引

$('div').each(function (index) {console.log(index)

})

VM195:2 0

VM195:2 1

VM195:2 2

VM195:2 3

VM195:2 4

VM195:2 5

VM195:2 6

VM195:2 7

VM195:2 8

VM195:2 9

k.fn.init(10) [div, div, div, div, div, div, div, div, div, div, prevObject: k.fn.init(1)]

// each 放两个参数是 索引和值

$('div').each(function (index,obj) {console.log(index,obj)

})

VM226:2 0 <div>1</div>

VM226:2 1 <div>2</div>

VM226:2 2 <div>3</div>

VM226:2 3 <div>4</div>

VM226:2 4 <div>5</div>

VM226:2 5 <div>6</div>

VM226:2 6 <div>7</div>

VM226:2 7 <div>8</div>

VM226:2 8 <div>9</div>

VM226:2 9 <div>10</div>

k.fn.init(10) [div, div, div, div, div, div, div, div, div, div, prevObject: k.fn.init(1)]

# 第二种方式

$.each([111,222,333],function(index,obj){console.log(index,obj)})

VM484:1 0 111

VM484:1 1 222

VM484:1 2 333

(3) [111, 222, 333]

"""

有了each之后 就无需自己写for循环了 用它更加的方便

"""

# data()

"""

能够让标签帮我们存储数据 并且用户肉眼看不见

"""

#01 给所有的标签存储数据

$('div').data('info','回来吧，我原谅你了!')

w.fn.init(10) [div#d1, div, div, div, div, div, div, div, div, div, prevObject: w.fn.init(1)]

#02 查询第一个标签内容

$('div').first().data('info')

"回来吧，我原谅你了!"

$('div').last().data('info')

"回来吧，我原谅你了!"

$('div').first().data('xxx')

undefined

#03 删除某个便签属性内容

$('div').first().removeData('info')

w.fn.init [div#d1, prevObject: w.fn.init(10)]

$('div').first().data('info')

undefined

$('div').last().data('info')

"回来吧，我原谅你了!"

jQuery 框架的更多相关文章

小谈Jquery框架
现在Jquery框架对于开发人员基本上是无人不知,无人不晓了,用起来十分的方便,特别是选择器十分强大,提高了我们的开发速度.但是好多人也只是停留在了会用的基础上,我个人觉得会用一个框架不算什么,只能说 ...
jQuery框架分析第一章: 第一个匿名函数
我的jQuery版本为1.7* 这个版本代码比之前的版本优化了很多,结构也清晰了不少,就用最新的吧. 打开jQuery源代码首先你能看到所有代码被一个 (function(window,undefi ...
jQuery框架的简单使用（H5）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
浅析jQuery框架与构造对象
这是一些分析jQuery框架的文字面向的读者应具备以下要求 1.非常熟悉HTML 2.非常熟悉javascript语法知识 3.熟悉javascript面向对象方面的知识 4.熟练使用jQue ...
引用jquery框架后出错
问题描述:当引用了jquery框架后,页面的js不能正常工作. 后面我的解决办法:是因为在引用 jquery的框架时的代码为 <script type="text/javascript ...
Jquery框架
现在Jquery框架对于开发人员基本上是无人不知,无人不晓了,用起来十分的方便,特别是选择器十分强大,提高了我们的开发速度.但是好多人也只是停留在了会用的基础上,我个人觉得会用一个框架不算什么,只能说 ...
jQuery框架-2.jQuery操作DOM节点与jQuery.ajax方法
一.jQuery操作DOM 内部插入操作: append(content|fn):向每个匹配的元素内部追加内容. prepend(content):向每个匹配的元素内部前置内容. 外部插入操作: af ...
jQuery系列第四章 jQuery框架的选择器
第四章 jQuery框架的选择器 4.1 jQuery选择器说明 jQuery 最核心的组成部分就是选择器引擎.它完全继承了 CSS 的风格,可以对 DOM 元素的标签名.属性名.状态等进行快速准确 ...
jQuery系列第八章 jQuery框架Ajax模块
第八章 jQuery框架Ajax模块 8.1 jQuery框架中的Ajax简介 Ajax技术的核心是XMLHTTPRequest对象,该对象是Ajax实现的关键,发送异步请求.接收服务器端的响应以及执 ...
jQuery系列第七章 jQuery框架DOM操作
第七章 jQuery框架的选择器 jQuery框架继承和优化了JavaScript访问DOM对象的特性,我们使用jQuery框架提供的api可以更加方便的操作DOM对象. 7.1 创建DOM节点使用 ...

随机推荐

MySQL 之高级命令(精简笔记)
MySQL是一个关系型数据库管理系统,由瑞典MySQL AB 公司开发,目前属于 Oracle 旗下产品.MySQL 是最流行的关系型数据库管理系统之一,在 WEB 应用方面,MySQL是最好的 RD ...
飞桨paddlespeech语音唤醒推理C INT8 定点实现
前面的文章(飞桨paddlespeech语音唤醒推理C定点实现)讲了INT16的定点实现.因为目前商用的语音唤醒方案推理几乎都是INT8的定点实现,于是我又做了INT8的定点实现. 实现前做了一番调研 ...
散片便宜300元！但还是劝你买盒装CPU
喜欢DIY的小伙伴在选购产品时会纠结于散片和盒装,以13代酷睿i5-13600KF为例,散片一般是1899元左右,而盒装2199元,两者相差300元,AMD的锐龙5 7600也差不多,盒装和散片相差也 ...
P4747 [CERC2017] Intrinsic Interval 题解
题目链接:Intrinsic Interval 讲讲析合树如何解决这种问题,其实这题很接近析合树的板题的应用. 增量法进行析合树建树时,需要用 ST 表预处理出 \(max\) 和 \(min\) 以 ...
Markdown Rules 详解
使用VSCode编写Markdown文件时,建议安装插件markdownlint,它可以帮助自己更加规范的写文章. 下面是所有的markdown语法错误信息以便纠错. Rules文档 Markdown ...
联想T30瘦客户机安装DoraOS体验
硬件配置:J4125 .8G RAM. 128G ROM 联想T30台式电脑,它是一台迷你计算机,尺寸小巧玲珑,重量适中,方便携带.它的性能十分强大,能够运行各种应用程序,包括网页浏览器.视频播放器等 ...
【阅读笔记】对比度增强-《Efficientcontrast enhancement using adaptive gamma correction with weighting distribution 》 date: 2023-12-08 10:08:00
2013年发表在TIP上的对比度增强算法AGCWD(Efficient contrast enhancement using adaptive gamma correction with weight ...
《ASP.NET Core 与 RESTful API 开发实战》-- （第7章）-- 读书笔记（中）
第 7 章高级主题 7.2 并发当两个用户获取同一个资源后,再同时修改该资源,就会导致并发问题常见实现并发的方法有以下两种: 保守式并发控制,每次修改资源,都锁定资源开放式并发控制,每次修改资 ...
Postgresql-数据库无法停止，报错：pg_ctl server does not shut down
根据您的查询,pg_ctl server does not shut down(pg_ctl服务无法关闭)的原因可能有很多.以下是一些可能的解决方案和代码示例: (1)杀死所有与PostgreSQL相 ...
JS Leetcode 263. 丑数题解分析，来认识有趣的丑数吧
壹 ❀ 引本题来自LeetCode263. 丑数,难度简单,题目描述如下: 给你一个整数 n ,请你判断 n 是否为丑数 .如果是,返回 true :否则,返回 false . 丑数就是只包含质 ...

jQuery 框架

jQuery 框架

一. 概述

二. jQuery 安装引用

2.1 安装

2.2 本地导入使用

2.3 jQuery CDN引入

三. jQuery基本语法

四. 查找标签

4.1 基本选择器

4.2 组合选择器/分组与嵌套

4.3 基本筛选器

4.4 属性选择器

4.5 表单筛选器

4.6 筛选器方法

五. 练习题

5.1 答案

5.2 代码

六. 操作标签

6.1 样式类操作

6.2 css操作

6.3 位置操作

6.4 尺寸操作

6.5 文本操作

6.6 获取值操作

6.7 属性操作

6.8 文档处理

七. 事件相关

7.1 绑定事件的方式

7.2 克隆事件

7.3 自定义模态框

7.4 左侧菜单

7.5 返回顶部

7.6 自定义登入校验

7.7 input实时监控

7.8 hover 鼠标悬浮事件

7.9 键盘按键按下事件

7.10 阻止后续事件的执行

7.11 阻止事件冒泡

7.12 事件委托

7.13 页面加载

7.14 动画效果

八. 标签 循环 存储数据

jQuery 框架的更多相关文章

随机推荐

热门专题

八. 标签循环存储数据