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

随机推荐

mybatis动态sql #和$的区别
$和#都支持动态sql:就是你传什么它就是什么区别: 1.#可以防止sql注入在sql执行时显示 '?' 比$安全 SELECT * FROM table WHERE id = ? 2.在使用#传入 ...
MyEclipse使用教程：在Web项目中使用Web片段
MyEclipse 在线订购年终抄底促销!火爆开抢>> MyEclipse最新版下载本教程向用户展示了使用关联的Web项目创建Web片段项目的机制.用户还可以获得要检查的示例项目.在本教 ...
jmeter中操作数据库
jmeter是如何操作数据库的? 步骤一:导入jdbc的jar包,jmeter本身不能直接连接mysql,所以需要导入第三方的jar包来连接mysql 点击测试计划,添加classpath,选择mys ...
软件工程结对作业01 psp表格
Java 容器
摘录来至https://www.cnblogs.com/LipeiNet/p/5888513.html https://www.cnblogs.com/acm-bingzi/p/javaMap.htm ...
day 关于生成器的函数
def average(): count=0 toatal=0 average=0 while True: value=yield average toatal+=value count+=1 ave ...
linux内核工作队列使用总结
我总结出的内核工作队列中的4种用法 1. 使用系统的工作队列(不延迟) 1)定义一个工作: struct work_struct my_work; 2)编写一个函数: void my_work_fun ...
ubuntu discuz 该函数需要 PHP 支持 XML。请联系空间商，确定开启了此项功能
apt-get install php-xml apt-get install php-xml-parser
Android动态添加Device Admin权限
/********************************************************************** * Android动态添加Device Admin权限 ...
【leetcode】344. Reverse String
problem 344. Reverse String solution: class Solution { public: void reverseString(vector<char> ...

day 54 JS 之 jquery