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节点使用 ...

随机推荐

vim 从嫌弃到依赖(16)——宏
终于到了我第二喜欢的vim功能了(当然了,最喜欢的是.命令).我原本计划在介绍完.命令之后介绍宏,以便让各位小伙伴们能了解到vim对于重复操作进行的强大的优化.但是由于宏本身跟寄存器息息相关,所以还是 ...
遇到一个bug，组件不更新内容
解决办法当v-if的值发生变化时,组件都会被重新渲染一遍.因此,利用v-if指令的特性,可以达到强制刷新组件的目的. <template> <comp v-if="upd ...
VRAR概念的定义和要素以及技术定义和应用
1.概念一.三个概念的定义和要素. 1.VR,Virtual Reality,虚拟现实是一种通过计算机模拟真实感的图像,声音和其他感觉,从而复制出一个真实或者假想的场景,并且让人觉得身处这个场景之 ...
2.5 CE修改器：寻找数值指针
上一步阐述了如何使用代码替换功能对付变化位置的数据地址,但这种方法往往不能达到预期的效果,所以我们需要学习如何利用指针,在本关的Tutorial.exe窗口下面有两个按钮,一个会改变数值,另一个不但能 ...
一句话总结Docker与K8S的关系
一句话总结:Docker只是容器的一种,它面向的是单体,K8S可以管理多种容器,它面向的是集群,Docker可以作为一种容器方案被K8S管理.下文继续具体介绍. 1.容器的核心概念介绍这几个核心概念 ...
Java 运算符 - 除法
1. 除法运算符 Java中的除法运算符是"/"符号,表示将左侧操作数除以右侧操作数. 2. 整数除法在Java中,整数除法的结果是一个整数,即只保留除法的整数部分,舍去小数部分 ...
Hadoop-大数据组件版本号查看
1．操作系统 cat /etc/redhat-release ; 2．JDK java -version 3．SCALA scala --version 4．MySQL mysql --versio ...
Linux-yum卸载软件包
yum是Linux操作系统中最常用的软件包管理器之一,它可以帮助你很容易地安装.删除和更新软件包.然而,有时候yum在删除软件包时可能会出现一些问题,本文将告诉你如何正确地使用yum卸载软件包,并解决 ...
MySQL-分区表和分区介绍
一.MySQL分区简介 1.数据库分区 MySQL是一种常用的关系型数据库管理系统,分区表是一种在MySQL数据库中处理大规模数据的最佳方案之一,其主要目的是为了在特定的SQL操作中减少数据读写的总量 ...
IIS配置跨域
在IIS里找到HTTP响应标头添加如下两个标头 Access-Control-Allow-Headers:Content-Type, api_key, Authorization Access-Co ...

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 框架的更多相关文章

随机推荐

热门专题

八. 标签循环存储数据