jQuery

　　1.什么是jQuery?

　　　　是轻量级的,兼容多浏览器的JavaScript库,使用户能够方便的处理HTML Document,Events,实现动画效果,方便进行Ajax交互,能够极大地简化JavaScript编程.

　　2.选择器

　　　　注意:要先在script标签中引入jQuery文件,然后再重新开启一个script标签,在此标签中写js代码,要记得先导入然后再使用.否则会报下面的错误.

　　　　　　　　　

　　3.jQuery对象

　　　　jQuery对象就是通过jQuery包装DOM对象后产生的对象.jQuery对象是jQuery独有的.如果一个对象是jQuery对象,那么它就可以使用jQuery里面提供的方法.

　　　　$("#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对象+[0]索引零,变成了DOM对象,
就可以使用JS的代码方法了.DOM对象转换成jQuery对象:$(DOM对象),通过$符号包裹一下就可以了.

　　　　拿上面的例子举例.jQuery对象和DOM对象的使用:

$("#i1").html(); //jQuery对象可以使用jQuery的方法

$("#i1")[0].innerHTML;//DOM对象使用DOM的方法

　　4.jQuery基础语法

　　　　$(selector).action()  #$(selector)找到某个标签,.action()通过这个标签对象调用它的一些方法.

　　　　　　　

　　　　查找标签

　　　　　　　基本选择器 (同css)　

　　　　　　　　id选择器

$("#id")  #不管找什么标签，用什么选择器，都必须要写$("")，引号里面再写选择器，
通过jQuery找到的标签对象就是一个jQuery对象，用原生JS找到的标签对象叫做DOM对象，
看我们上面的jQuery对象部分的内容

　　　　　　　　标签选择器($("标签名称"))

　　　　　　　　class选择器($(".类名称"))

　　　　　　　　配合使用($("div.c1") 找到有c1  class类的div标签)

　　　　　　　　所有元素选择器($("*"))

　　　　　　　　组合选择器($("#id,.classname,tagname"))

　　　　层级选择器 :  (同css)

　　　　　　x和y可以为任意选择器

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

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

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

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

　　　　基本选择器(选择之后进行过滤)

:first // 第一个

:last // 最后一个
:eq(index)// 索引等于 index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数

:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素

:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签

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

　has和not的举例

$("div:has(h1)")// 找到所有后代中有h1标签的div标签，意思是首先找到所有div标签，把这些div标签的后代中有h1的div标签筛选出来

$("div:has(.c1)")// 找到所有后代中有c1样式类（类属性class='c1'）的div标签

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

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

 练习(jQuery的click事件绑定):

　　　　自定义模态框，使用jQuery实现弹出和隐藏功能。jQuery版自定义模态框:

<!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>自定义模态框</title>

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

</head>

<body>

<input type="button" value="弹" id="i0">

<div 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 src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

<script>

  var tButton = $("#i0")[0];

  tButton.onclick=function () {  #jQuery绑定事件的时候也有个简单的方式，往后面学

    var coverEle = $(".cover")[0];

    var modalEle = $(".modal")[0];

    $(coverEle).removeClass("hide");

    $(modalEle).removeClass("hide");

　

jQuery的一生的更多相关文章

  1. 深入jQuery中的Callbacks()

    引入 初看Callbacks函数很不起眼,但仔细一瞅,发现Callbacks函数是构建jQuery大厦的无比重要的一个基石.jQuery中几乎所有有关异步的操作都会用到Callbacks函数. 为什么 ...

  2. 源码来袭！！！基于jquery的ajax分页插件（demo+源码）

    前几天打开自己的博客园主页,无意间发现自己的园龄竟然有4年之久了.可是看自己的博客列表却是空空如也,其实之前也有写过,但是一直没发布(然而好像并没有什么卵用).刚开始学习编程时就接触到博客园,且在博客 ...

  3. 自学JQuery Mobile的几个例子

    JQuery Mobile是一个用于构建移动Web应用程序的框架,适用于主流的移动设备(智能手机.平板电脑),该框架利用了HTML5和CSS3技术减少了额外的脚本文件的编写.具体JQuery Mobi ...

  4. jquery实战第一讲---概述及其入门实例

    就在5月28号周四下午五点的时候,接到xxx姐姐的电话,您是xxx吗?准备一下,周五上午八点半去远洋面试,一路风尘仆仆,颠颠簸簸,由于小编晕车,带着晕晕乎乎的脑子,小编就稀里糊涂的去面试了,温馨提醒, ...

  5. JQuery攻略（四）事件

    jQuery事件处理,鼠标的单击,双击,悬停,键盘按键,文本动画..... 此章节有 1.1被点击的按钮查找 1.2事件的自动触发 1.3点击之后禁用按钮 1.4鼠标事件 1.5焦点事件 1.6CSS ...

  6. 基于jQuery实现的腾讯互动娱乐网站特效

    分享一款基于jQuery实现的腾讯互动娱乐网站特效.腾讯互动娱乐网站jQuery特效是一款右侧带伸缩选项卡,支持鼠标滚轮滚动切换特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代 ...

  7. jQuery Mobile的学习时间bottonbutton的事件学习

    程序猿都非常懒.你懂的! 生命的绝唱来机仅仅争朝夕,如诗的年华更需惜时如金. 不要让今天的懈怠成为一生的痛. 每天都在进步. 近期在学习jquery mobile开发.使用的button,绑定事件,和 ...

  8. jQuery Custom PopUp Window

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. jQuery第四课 点击 _选项卡效果一

    //鼠标移到上面是显示手型cursor:pointer jquery 的函数: siblings //兄弟节点,同胞元素 :eq()选择器选取带有指定 index 值的元素.index 值从 0 开始 ...

随机推荐

  1. Mybatis框架五：动态SQL

    1.if   where 实现一个简单的需求: 根据性别和名字查询用户: 正常来写: <select id="selectUserBySexAndUsername" para ...

  2. lvs、nginx、HAProxy、keepalive工作原理

    1. lvs.nginx.HAProxy.keepalive工作原理 1.1. 前言 遇到了负载均衡和高可用选型问题,我觉的有必要好好理解下lvs,nginx,haproxy和keepalive的区别 ...

  3. Oracle to_char(参数,'FM990.00')函数

    遇到一个SQL,记录一下 select to_char(参数,'FM990.00') from 表格 刚看到FM990.00确实不知道什么意思,通过网上资料,知道了 0表示:如果参数(double或者 ...

  4. 配置MapReduce时遇到的问题记录

    1.左边栏的Project Explorer里一直不出现DFS Locations. 发现在把hadoop-eclipse-plugin-2.6.0.jar放到eclipse下的pluins文件夹下并 ...

  5. [学习笔记]修改关键跳无效且关键CALL又不存在的情况

    先用DI查下壳,VC++写的,无壳. 然后,打开软件看一下软件注册的情况 有弹窗,那载入OD看看能不能搜索到字符串 回到反汇编窗口,发现有两个JE都跳过了注册成功的代码 似乎很简单的样子,只要NOP掉 ...

  6. 国内使用google搜索引擎

    百度搜索 "谷歌访问助手",点击第一个搜索结果,如下: 或者直接点击链接:http://www.ggfwzs.com/  ,然后点击相应的浏览器下载谷歌访问助手,解压,将解压好的谷 ...

  7. (转载)CPU、内存、硬盘、指令以及他们之间的关系

    CPU.内存.硬盘.指令以及他们之间的关系 最近读完<程序是怎样跑起来的>以及<深入理解计算机系统>的3.6.9章节后对计算机的组成有了更深入细致的了解,现总结一下对CPU.内 ...

  8. 经典中的品味：第一章 C++的Hello，World！

    摘要: 原创出处: http://www.cnblogs.com/Alandre/ 泥沙砖瓦浆木匠 希望转载,保留摘要,谢谢! "程序设计要通过编写程序的实践来学习"-Brian ...

  9. 【EF6学习笔记】（十一）实施继承

    上篇链接:EF学习笔记(十) 处理并发 本篇原文链接:Implementing Inheritance 面向对象的世界里,继承可以很好的重用代码.在本章就对Instructor和Student两个类进 ...

  10. 【原创】关于Git暂存区的理解

    关于Git暂存区的理解      暂存区可以说是Git的三大重要的区域之一,另外两个分别是工作目录和Git仓库,所以说对暂存区的深入理解可以帮助我们理解很多Git命令背后隐藏的工作原理.今天,本文将以 ...