本节目录：

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

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

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

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

一、安装使用（特别注意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程序的条条建议

    1:引论   建议1.理解Pythonic概念—-详见Python中的<Python之禅> 建议2.编写Pythonic代码 避免不规范代码,比如只用大小写区分变量.使用容易混淆的变量名. ...

  2. 多线程callable使用方法

    Runnable是执行工作的独立任务,但是它不返回任何值.在JavaSE5中引入的Callable是一种具有类型参数的泛型,它的类型参数表的是从方法call()中返回的值,并且必须使用Executor ...

  3. Windows 命令行解析工具（getopt）

    忘记了上次在哪里找到这个功能库,只有一个 .h 和 .c 文件,再次搜索的时候发现找不到了,结果只能在之前的代码中,两个文件提出使用,顾将这两个文件备份在这里. /* Getopt for Micro ...

  4. flask中如何生成迁移文件

    在flask网站开发中,如果直接对数据库进行修改的话,风险比较高,最好的是由迁移文件生成,这样确保了数据的误操作. 在Flask中可以使用Flask-Migrate扩展,来实现数据迁移.并且集成到Fl ...

  5. [ Codeforces Round #549 (Div. 2)][D. The Beatles][exgcd]

    https://codeforces.com/contest/1143/problem/D D. The Beatles time limit per test 1 second memory lim ...

  6. ios-密码判断

    我们经常在项目时有涉及到用户或是手机号登录,这时一般会配合密码才能登录成功. 下面发一些关于手机和密码形式的判断: - (void)registButtonClick:(id)sender { )// ...

  7. Python数据存储：pickle模块的使用讲解

    在机器学习中,我们常常需要把训练好的模型存储起来,这样在进行决策时直接将模型读出,而不需要重新训练模型,这样就大大节约了时间.Python提供的pickle模块就很好地解决了这个问题,它可以序列化对象 ...

  8. 从gitlab或者github采用git clone和download zip的区别

    不要做伸手党啊大兄弟,这种问题自己稍加理解就知道答案了,实在想不到就上谷歌搜一下嘛,比如这个:git - Github: difference between Clone in desktop and ...

  9. Dockerfile之nginx（六）

    一.Dokcerfile的基本指令   1)From 指定构建镜像的基础镜像 2)MAINTAINER 指定镜像的作者 3)RUN 使用前一条指令创建的镜像生产容器,并在容器中执行命令,执行结束后会自 ...

  10. ubuntu16.04下怎么关闭x server

    按住ctrl+alt+f1,进入命令行. 输入sudo /etc/init.d/lightdm stopsudo /etc/init.d/lightdm status 重启xserver?输入sudo ...