jQuery入门

2017-07-10

jQuery快速入门。

jQuery介绍

jQuery是一个轻量级的、兼容多浏览器的JavaScript库。
jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“

jQuery的优势

一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。
丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。
链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。
事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。
Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。
跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。
插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件，简单实用。

jQuery包含以下内容：

选择器
筛选器
样式操作
文本操作
属性操作
文档处理
事件
动画效果
插件
each、data、Ajax

下载链接：jQuery官网

jQuery选择

1.x：兼容IE678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)
2.x：不兼容IE678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)
3.x：不兼容IE678，只支持最新的浏览器。需要注意的是很多老的jQuery插件不支持3.x版。目前该版本是官方主要更新维护的版本。

维护IE678是一件让人头疼的事情，一般我们都会额外加载一个CSS和JS单独处理。值得庆幸的是使用这些浏览器的人也逐步减少，PC端用户已经逐步被移动端用户所取代，如果没有特殊要求的话，一般都会选择放弃对678的支持。

jQuery对象

jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是 jQuery独有的。如果一个对象是 jQuery对象，那么它就可以使用jQuery里的方法：例如$(“#i1”).html()。

$("#i1").html()的意思是：获取id值为i1的元素的html代码。其中html()是jQuery里的方法。

相当于：document.getElementById("i1").innerHTML;

虽然jQuery对象是包装DOM对象后产生的，但是jQuery对象无法使用DOM对象的任何方法，同理DOM对象也没不能使用jQuery里的方法。

一个约定，我们在声明一个jQuery对象变量的时候在变量名前面加上$：

var $variable = jQuery对像

var variable = DOM对象

$variable[0] //jQuery对象转成DOM对象

拿上面那个例子举例，jQuery对象和DOM对象的使用：

1 2	$("#i1").html(); //jQuery对象可以使用jQuery的方法 $("#i1")[0].innerHTML; // DOM对象使用DOM的方法

jQuery基础语法

$(selector).action()

选择器

id选择器：

$('#id')

$("#id")

标签选择器：

$('tagName')

1	$("tagName")

class选择器：

$(' .className ')

1	$(".className")

所有元素选择器：

$(' * ')

$("*")

组合选择器：

1	$("#id, .className, tagName")

层级选择器：

x和y可以为任意选择器

$("x y"); // x的所有后代y（子子孙孙）

$("x > y"); // x的所有儿子y（儿子）

$("x + y") // 找到所有紧挨在x后面的y

$("x ~ y") // x之后所有的兄弟y

基本筛选器：

:first // 第一个

:eq(index) // 索引等于index的那个元素

:last // 最后一个

:even // 匹配所有索引值为偶数的元素，从 0 开始计数

:odd // 匹配所有索引值为奇数的元素，从 0 开始计数

:gt(index) // 匹配所有大于给定索引值的元素 greater than

:lt(index) // 匹配所有小于给定索引值的元素

:not(选择器) // 移除所有满足Not条件的标签是本级

:has(选择器) // 选取所有包含一个或多个标签在其内的标签（指的是从后代元素中找）

:first // 第一个

:last // 最后一个

:eq(index)// 索引等于index的那个元素

:even // 匹配所有索引值为偶数的元素，从 0 开始计数

:odd // 匹配所有索引值为奇数的元素，从 0 开始计数

:gt(index)// 匹配所有大于给定索引值的元素

:lt(index)// 匹配所有小于给定索引值的元素

:not(元素选择器)// 移除所有满足not条件的标签

:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)

例子：

$("div:has(h1)")// 找到所有后代中有h1标签的div标签

$("div:has(.c1)")// 找到所有后代中有c1样式类的div标签

$("li:not(.c1)")// 找到所有不包含c1 class的li标签

$("li:not(:has(a))")// 找到所有后代中不含a标签的li标签

注意：

这里的has和not不是简单的有和没有的意思，它俩没啥关系（不是一组）
:not和:has通常用.not()和.has()代替。
$("div:has(.c1)")等价于$("div .c1")并不等价于$("div.c1")。

属性选择器：

作业：依据要求找出相关内容

<!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="#">Rain</a></li>

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

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

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

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

          </ul>

        </li>

      </ul>

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

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

</nav>

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

<div class="container">

  <div class="jumbotron">

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

      <h1 class="c1" id="i1">沙河前端小王子</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>Eva_J</td>

          <td>茶道</td>

          <td>

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

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

          </td>

        </tr>

        <tr>

          <th>2</th>

          <td>Yuan</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>Alex</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">©2017 沙河前端小王子</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>

作业代码

day 54 JS 之 jquery的更多相关文章

js，jquery备忘录
1.var s = str.charCodeAt();转ASCII码 2.String.fromCharCode(65);转字母 3.es6 ... (扩展运算符),将一个数组转化成由逗号分割的队列. ...
【前端性能】必须要掌握的原生JS实现JQuery
很多时候,我们经常听见有人说jquery有多快多快.在这个各种类库满天飞的时候,不得不说的是,能有原生JS快吗? 是的,明显原生JS要更快,因为诸如JQuery这样的库必须要兼容各种浏览器和低版本和许 ...
移动端用js与jquery实时监听输入框值的改动
背景: 在一次移动端H5开发中,需要监听输入框值的实时变动. onchange事件肯定抛弃,因为只能失去焦点才触发. 而keyPress在Android可以触发,iOS不可以. 又不想用Android ...
label用js，jquery取值赋值，以及怎么在后台取值
label标签在JS和Jquery中使用不能像其他标签一样用value获取它的值: 可以这样: JS: var label=document.getElementByIdx_x("id&qu ...
JS与Jquery区别
很多人对JS和JQuery很容易搞混淆,今天我们就相比学习下: 加载区别: var myfunction(){}; JS:1.window.onload=function(){} 2.<body ...
js和jquery如何获取图片真实的宽度和高度
按照插入的图片的尺寸来判断图片是横图还是竖图.然后判断过后给予不同的展示方式,下面为大家介绍下js和jquery如何获取图片真实的宽度和高度 1.什么时候需要获取图片真实的宽度和高度在做pc网页 ...
JS和JQuery的总结
JS部分一, 词法结构区分大小注意://单行 /*多行注释*/ 字面量(直接量literal) 12 // 数字 5.8//小数 "hello" 'hello' true ...
js和jquery获取当前对象的子元素
开发中经常遇到需要获取ul下的il对象,个人总结了js和jquery的方法. HTML片断: <ul class="box"> <li>子元素1</l ...
js+html+jquery 个人笔记
js+html+jquery 笔记 1.获取HTML对象 var obj = document.getElementById(elementId) 对象的值: obj.value() 2.获取jQue ...

随机推荐

vue组件的使用和事件传递
子组件与父组件的事件传递具体实现如下: 子组件: <template> <section class="xftz-data-list"> <div c ...
踩坑 net core
webclient 可以替换为 HttpClient 下载获取url的内容: 证书: https://stackoverflow.com/questions/40014047/add-client ...
学习net core的一些疑问？
所有的内容是否一定都要依赖注入? 获取配置文件的方式是否在类库是获取不到环境变量的? 老出现:InvalidOperationException: Unable to resolve service ...
7.2 C++模板类实例化
参考:http://www.weixueyuan.net/view/6399.html 总结: array < int >表明用int类型来代替模板类中的类参数“T”,编译器会将模板类ar ...
loadrunner http协议性能测试脚本编写
性能测试其实测的就是接口的性能,不管是用工具录制还是自己写,都是围绕接口的,录制也是把接口录制下来而已,但是录制下来的脚本比较乱,会把很多相关的请求都录下来. 在这里我们手动写HTTP协议的get.p ...
CentOS7安装Nginx及配置
Nginx是一款轻量级的网页服务器.反向代理服务器.相较于Apache.lighttpd具有占有内存少,稳定性高等优势.**它最常的用途是提供反向代理服务.** 安装在Centos下,yum源不 ...
【PyImageSearch】Ubuntu16.04使用OpenCV3.3.0实现图像分类
这篇博文将会展示如何采用一个预训练的深度学习网络(模型)在ImageNet的数据集并把它当作输入图像. 首先说明,运行环境为Ubuntu16.04(或者MacOS),windows暂不支持,已经编译好 ...
牛客oi测试赛二 B 路径数量
题目描述给出一个 n * n 的邻接矩阵A. A是一个01矩阵 . A[i][j]=1表示i号点和j号点之间有长度为1的边直接相连. 求出从 1 号点到 n 号点长度为k的路径的数目. 输入描述: ...
文件操作---with语句
with语句为了避免打开文件后忘记关闭,可以通过管理上下文,即: with open('file','r','encoding='uth-8'') as f: #f为文件句柄 for line in ...
xargs用法
xargs是一个很有用的命令,它可以实现并行,同&有异曲同工之妙,在大批量管理服务器时非常有用 xargs命令是给其他命令传递参数的一个过滤器,也是组合多个命令的一个工具.它擅长将标准输入数据 ...

day 54 JS 之 jquery