本节目录：

----------①安装使用

----------②语法

----------③文档就绪函数

----------④选择器

一、安装使用（特别注意jQuery应当位于<head>标签中）

　　　　　　一般通过两种方法添加jQuery：

　　　　　　①jquery.com下载jQuery库；

　　　　　　②从cdn中载入jQuery库。例如：从微软载入

　　这是谷歌：

<head>

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"> 
</script> 
</head>

二、语法

通过jQuery选取HTML元素，并对它执行操作actions。选取（查询，jQuery）

　　　基础语法：

　　　　$(selector).action();

　　　　　　$美元符号定义jQuery；

　　　　　　(selector)查询找打HTML元素；

　　　　　　action();对元素执行的操作。

　　　　举例：

$(this).hide()　  　 　---隐藏当前元素

$("div").hide()　　　 ---隐藏所有div标签元素

$(".class").hide()　　---隐藏所有class="class"的元素

$("#id").hide()　　    ---隐藏所有id="id"的元素

三、文档就绪函数

　　为了防止文档加载完之前就执行jQuery函数

　　因为文档未加载完执行代码可能会出错：

　　试图隐藏一个不存在的元素。即首先执行jQuery隐藏某个元素但该元素仍未加载；

　　获得未完全加载的图像大小

　　准备就绪函数

　　　　函数方法：

$(document).ready(function(){
//符合语句，声明jQuery，获取document文档。执行ready准备完毕时的代码 
//函数写在括号中
 } )

四、选择器

jQuery选择器分为三类选择器

①元素选择器

　　$("p")选取<p>元素

　　$(this)获取当前元素

　　$("ul li:first")获取每个ul的第一个li元素

　　$("div#q .a")选取id为q的div元素里所有class为a的元素

　　$("div.dot")获取所有class=dot的div元素

　　　　举例：

　　　　　　　利用this选择器隐藏button元素

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">

</script>

<script>

    $(document).ready(function(){

        $("button").click(function(){

            $(this).hide();

        });

    });

</script>

</head>

<body>

<button>点我</button>

</body>

点击之前，点击之后按钮消失被隐藏

②属性选择器(属性写在[]中)

　　$("[href]")选择所有属性带有href的元素

　　$("[href='aa']")选择所有属性带有href的值等于"aa"的元素

　　$("[href!='bb']")选择所有属性带有href的值不等于"bb"的元素

　　$("[href$='.jpg']")选择所有属性带有href的值以".jpg"结尾的元素

　　　　举例：

　　　　　　点击src属性以.tmp结尾的元素，隐藏所有div元素

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">

</script>

<script>

    $(document).ready(function(){

        $("[src$='.tmp']").click(function(){

            $("div").hide();

        })

    });

</script>

</head>

<body>

<div>第一行</div>

<img src="Y)IFIC8_FPB_3Y26CFDZCTC.tmp" />

<div>第二行</div>

</body>

　　　　　　　　　　运行页面点击tmp图片所有div元素被隐藏了

③CSS样式选择器

　　$("p").css("background-color","red")为所有p元素的背景色改为红色

　　改变多个样式时

　　　　$("p").css({"propertyname":"value","propertyname","value"})

　　　　　　　　　　propertyname属性名称

　　　　举例：

　　　　　　　　点击div元素时对所有div元素添加红色背景

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">

</script>

<script>

    $(document).ready(function(){

        $("div").click(function(){

            $("div").css("background","red");

        });

    });

</script>

</head>

<body>

<div>第一行</div>

<div>第二行</div>

</body>

　　　　　　　　　　点之前的样式点击之后的样式

早期自学jQuery-一入门的更多相关文章

  1. 自学 Java 怎么入门

    自学 Java 怎么入门? 595赞同反对,不会显示你的姓名     给你推荐一个写得非常用心的Java基础教程:java-basic | 天码营 这个教程将Java的入门基础知识贯穿在一个实例中,逐 ...

  2. JQuery Mobile入门——设置后退按钮文字(转)

    http://www.tuicool.com/articles/AZnYVz JQuery Mobile入门——设置后退按钮文字 时间 2013-01-09 20:24:28  CSDN博客原文  h ...

  3. 从零开始学习jQuery (一) 入门篇

    本系列文章导航 从零开始学习jQuery (一) 入门篇 一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案,  即使你会使用jQuery也能在阅读中发现些 ...

  4. 极客技术专题【007期】：jQuery初学者入门 - jQuery Event

    日期:2013-8-19  来源:GBin1.com 技术专题介绍 专题:jQuery初学者入门[第三讲:jQuery Event] 分享人:极客标签技术编辑 -Lana (请站内关注分享人) 授课时 ...

  5. jQuery Mobile 入门基础教程

    jQuery Mobile是jQuery在手机上和平板设备上的版本.jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架. jQue ...

  6. jQuery的入门与简介

    jQuery的入门与简介<思维导图>   <初学者请各位高手指点指点> jQuery是继Prototype之后又一个优秀的JavaScript库,在JavaScript基础上我 ...

  7. jQuery UI 入门之实用实例分享

    jQuery UI 入门 jQuery UI 简介 jQuery UI 是一个建立在 jQuery JavaScript 库上的小部件和交互库,您可以使用它创建高度交互的 Web 应用程序.无论您是创 ...

  8. jQuery UI 入门之实用实例

    jQuery UI 入门 jQuery UI 简介 jQuery UI 是一个建立在 jQuery JavaScript 库上的小部件和交互库,您可以使用它创建高度交互的 Web 应用程序.无论您是创 ...

  9. 第一百九十一节，jQuery EasyUI 入门

    jQuery EasyUI 入门 学习要点: 1.什么是 jQuery EasyUI 2.学习 jQuery EasyUI 的条件 3.jQuery EasyUI 的功能和优势 4.其他的 UI 插件 ...

  10. day 48 jQuery快速入门

    jQuery快速入门   jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Ev ...

随机推荐

  1. Python中异常处理

    高级语言通常都配置了一套try...except...finally的错误处理机制. 1.我们先看一个try的机制 try: res=1/0except ZeroDivisionError as e: ...

  2. canvas 绘画随机点

    直接看图吧: 这样的随机点,是小圆点组成的,然后一直在动,记录一下,万一以后要用到呢: canvas的具体设置我就不写了,另一篇文档里有: drawRandomDot () { let leftCan ...

  3. pacbio bax.h5文件处理及ccs计算

    1.NCBI文件格式如下: 2.格式转换 (1) bas.h5 -> ccs source /share/nas2/genome/biosoft/smrtanalysis/2.3.0/smrta ...

  4. APP打包提交审核的步骤

  5. DG_数据文件转换参数测试

    本篇博客流程图: 一.测试需求及参数说明 二.测试环境进行相关测试 三.问题总结 一.测试需求及参数说明 1.1测试需求说明 DG切换 切换前,数据库版本12.2.0.1,主库rac两节点,备一rac ...

  6. web.html

    在“Web页”节点下,展开WEB-INF节点,然后双击web.xml文件进行查看. web.xml文件包含Facelets应用程序所需的几个元素.使用NetBeans IDE创建应用程序时,将自动创建 ...

  7. JavaEE思维导图

  8. python while循环案例

    1.while循环语句基本结构? while condition: loop body 2.利用while语句写出猜大小的游戏: 设定一个理想数字比如:66,让用户输入数字,如果比66大,则显示猜测的 ...

  9. Discuz! X3 全新安装图文教程

    Discuz! 是腾讯旗下 Comsenz 公司推出的以社区为基础的专业建站平台,帮助网站实现一站式服务.让论坛(BBS).个人空间(SNS).门户(Portal).群组(Group).应用开放平台( ...

  10. 用python 实现一个栈

    前言 Python本身已有顺序表(List.Tupple)的实现,所以这里从栈开始. 什么是栈 想象一摞被堆起来的书,这就是栈.这堆书的特点是,最后被堆进去的书,永远在最上面.从这堆书里面取一本书出来 ...