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. GIT学习笔记——常用命令

    最近使用使用GIT较多,但命令很容易就忘记了,于是整理下,大多整理与一些文档和他人博客 在当前目录新建建一个纯git代码库 $ git --bare init 在当前目录新建一个Git代码库 $ gi ...

  2. canvas转图片中的文字自动换行

    概述 最近项目用到了canvas转图片,但是由于canvas对文字排版的支持非常弱,一般我们在canvas上画不同排版的文字(比如竖排文字)都是利用js计算横纵坐标,然后一个字一个字地画出来,今天无意 ...

  3. exec 命令简单用法 和 find 搭配用法示例

    find是我们很常用的一个Linux命令,但是我们一般查找出来的并不仅仅是看看而已,还会有进一步的操作,这个时候exec的作用就显现出来了. 看例子: find ./ -name "*.tx ...

  4. H5在WebView上开发小结

    背景 来自我司业务方要求,需开发一款APP.但由于时间限制,只能采取套壳app方式,即原生app内嵌webview展示前端页面.本文主要记述JavaScript与原生app间通信,以及内嵌webvie ...

  5. Spring实战拆书--SpringBean

    代码源码地址:https://github.com/wujiachengSH/springBeanDemo 概述:本章将讲解Spring对于Bean的管理方案. 目录: 准备工作 自动装配 处理装配歧 ...

  6. poj 1177 --- Picture(线段树+扫描线 求矩形并的周长)

    题目链接 Description A number of rectangular posters, photographs and other pictures of the same shape a ...

  7. 通过session的id号获取对应的session

    说说为什么要用session!!! 每次访问端通过普通http协议访问tomcat时,访问端包括网页或Android app等,tomcat都会自动生成一个不同的session,而且session的i ...

  8. LockSupport浅析

    最初想有没有必要写这类文章,网上相关的文章很多,有些更为透彻,自己再写一篇不免有重复造轮子的感觉. 但想想写文除了分享知识外也可以帮助自己总结归纳,也稍稍可以提高点自我满足感. 基本的线程阻塞原语,被 ...

  9. SkyWalking-netcore

    详细安装步骤:https://www.jianshu.com/p/3ddd986c7581?from=groupmessage SkyWalking-netcore 官网:https://github ...

  10. 如何走上更高平台分享传递干货知识：（开通个人Github面向开源及私有软件项目的托管平台：https://github.com/zlslch/）（图文详解）（博主推荐）

    不多说,直接上干货! https://github.com/ 欢迎大家,加入我的微信公众号:大数据躺过的坑        人工智能躺过的坑       同时,大家可以关注我的个人博客:    http ...