本节目录：

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

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

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

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

一、安装使用（特别注意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. RSA加密解密实现（JAVA）

    1.关于RSA算法的原理解析参考:http://www.ruanyifeng.com/blog/2013/06/rsa_algorithm_part_one.html 2.RSA密钥长度.明文长度和密 ...

  2. 图像特征匹配，sift，surf法

    今天想把这一段时间做的一些工作做个总结,望能帮到大家,尊重原创作品,转摘请注明原创地址:http://www.cnblogs.com/ggYYa/p/7902900.html,在此感谢!

  3. vue调用支付接口

    html: <div class="paymentHtml" v-html="paymentHtml"></div> script: d ...

  4. solr实现动态加载分词

    版本是5.3.0 在core(自己创建的模块)的schema.xml里面增加类型: <fieldType name="text_lj" class="solr.Te ...

  5. robot framework程序运行过程中，遇到点击事件之后，未出现点击之后的效果（求解）

    1.click Element操作,在实际过程中偶然会出现,日志显示已点击成功,但是实际自动化页面,没有点击成功之后的操作 现象: 现象描述:程序执行到点击侧边栏的[人员信息]之后,日志显示已经点击成 ...

  6. 在linux中编译grpc

    环境: centos_7_x86_x64 一.下载 1)下载grpc源代码:grpc-1.2.0.zip 2)下载grpc依赖库: 1)benchmark-master.zip 2)boringssl ...

  7. Python服务Dokcer化并k8s部署实例

    这篇文章记录了我试验将一个基于python的服务docker化并k8s部署的过程. 服务介绍Docker化设计业务代码改造创建docker镜像K8S部署设计yaml文件运行服务介绍这是一个用 pyth ...

  8. ab压力测试nginx

    centos7系统: yum install httpd-tools -y #安装ab压力测试工具

  9. Redis使用规范

    突出强调部分 [强制]key名不要包含特殊字符,如空格.换行.单双引号以及其他转义字符 [强制]拒绝bigkey(防止网卡流量.慢查询) [强制]控制key的生命周期,redis不是垃圾桶 [强制]技 ...

  10. debian系统下apache2开启ssi功能

    SSI (Server Side Include)的 html 文件扩展名 (.shtml), 通常称为"服务器端嵌入"或者叫"服务器端包含"说白了就是类似其他 ...