本节目录：

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

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

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

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

一、安装使用（特别注意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. Alpha冲刺4

    前言 队名:拖鞋旅游队 组长博客:https://www.cnblogs.com/Sulumer/p/9979357.html 作业博客:https://edu.cnblogs.com/campus/ ...

  2. REST easy with kbmMW #24 使用kbmMW实现JSON/XML/YAML转换成对象

    你想过没有,把一个给定的xml或json生成一个Delphi类,并通过这个类完成对xml或json的读写操作吗? 不管有没有,现在kbmMW为我们实现了,看下面这行代码: var s:string; ...

  3. Spring中的@Bean注解、@Configuration注解、@Value

    1.首先是注册bean类:@Component.@Responsitory.@Controller.@Service.Configuration这些注解是把要实例化的对象装化成一个bean,放到Ioc ...

  4. gitlab修改默认端口

    部署gitlab的时候,一启动,发现80和8080端口已经被占用,无奈,只得先将监听80端口的nginx和监听8080端口的jenkins停止.这会儿有空,琢磨一下如何修改gitlab的默认端口. 修 ...

  5. UVA-315 无向图求割点个数

    题意抽象: 给定一个无向图,输出割点个数. 割点定义:删除该点后,原图变为多个连通块. 考虑一下怎么利用tarjan判定割点: 对于点u和他相连的当时还未搜到的点v,dfs后如果DFN[u]<= ...

  6. linux基础之bash特性

    linux基础之bash特性 1.命令历史 命令历史包含的环境变量 $HISTSIZE:命令历史记录的条数 $HISTFILE:命令历史文件~/.bash_history $HISTFILESIZE: ...

  7. PythonStudy——Python 中Switch-Case 结构的实现

    学习Python过程中,发现Python没有Switch-case,过去写C习惯用Switch/Case语句,官方文档说通过if-elif实现.所以不妨自己来实现Switch-Case功能. 方法一 ...

  8. 【转】使用VisualStudio完成自动化C++代码生成和编译工作（GacUI）

    使用VisualStudio完成自动化C++代码生成和编译工作(GacUI)     GacUI终于进入制作dll的阶段了.昨天上传了一个新的工程,在Vczh Library++3.0(E:\Code ...

  9. zookeeper的WEB客户端zkui使用

    转载自:http://blog.csdn.net/csolo/article/details/53694665 前面几篇实践说明了zookeeper如何配置和部署,如何开发,因为大多是后台操作,对于维 ...

  10. nginx配置http强制跳转https

    nginx配置http强制跳转https 网站添加了https证书后,当http方式访问网站时就会报404错误,所以需要做http到https的强制跳转设置. 一.采用nginx的rewrite方法 ...