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 ...

随机推荐

elasticsearch基本操作之--使用QueryBuilders进行查询
/** * 系统环境: vm12 下的centos 7.2 * 当前安装版本: elasticsearch-2.4.0.tar.gz */ QueryBuilder 是es中提供的一个查询接口, 可以 ...
一. Python基础(1)--语法
一. Python基础(1)--语法 1. 应用程序 1.1 什么是计算机(Computer)? 组成 ①运算器 arithmetic unit; ※ Arithmetic unit and cont ...
TBody scrollbar 设置
由于scrollbar自身有宽度对于tbody来说可能会挤压与thead不对齐下面办法能够解决大致问题 1.设置tbody display:block : overflow-y:auto:(并且修 ...
let var区别
function varTest() { var x = 1; if (true) { var x = 2; // 同样的变量! console.log(x); } console.log(x); } ...
C# 连接EXCEL 和 ACCESS
97-2003版本 EXCEL Provider=Microsoft.Jet.OLEDB.4.0;Data Source=文件位置;Extended Properties=Excel 8.0;HDR= ...
L252
How often have you heard the saying, "Stop and smell the roses?" Odds are, you've come acr ...
centos下mysql数据迁移方法
第一种: 原始数据库不需要重新安装: 默认mysql会安装在/var/lib/mysql这里,若将数据迁移到/data/mysql目录下,步骤如下: 1.停止mysql服务 2.#cp /var/li ...
mongodb启动出现Failed to connect to 127.0.0.1:27017 after 5000ms milliseconds,giving up
今天一早准备继续学习mongodb,但是在命令行运行mongo.exe报错出错原因:mongod一不小心被非法关闭,留下了一个mongod.lock, 将数据库给锁定了解决方法: 1)在data路 ...
解决Could not open Hibernate Session for transaction; nested exception is java.lang.NoClassDefFoundError: org/hibernate/engine/transaction/spi/TransactionContext
我使用的是5.2.8的hibernate的jar包,运行的时候却报错Could not open Hibernate Session for transaction; nested exception ...
python列举django中间件的5个请求方法
process——request:请求进来时,权限认证. process——view:路由匹配之后,能够得到试图的试图函数. process——exceptions:异常是执行. process——t ...

day 54 JS 之 jquery