本节目录：

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

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

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

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

一、安装使用（特别注意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. mysql8.0.13 的docker镜像安装

    1.从docker中获取mysql8.0.13镜像 docker pull mysql:8.0.13通过 docker images 命令查看镜像是否获取到了 2.运行 mysql8.0.13 镜像 ...

  2. 磁性窗体设计C#(二)

    using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using Sy ...

  3. linux下(Window当然也可以)解决idea创建maven项目导入过慢问题

    1.正常创建maven web项目 2.见下图,选择加号 3.弹出的框中填入archetypeCatalog----internal,确定即可

  4. s21day12 python笔记

    s21day12 python笔记 一.函数中高级 1.1 函数可以做返回值 #示例: def func(): print(123) def bar(): return func v = bar() ...

  5. Codeforces1076F. Summer Practice Report（贪心+动态规划）

    题目链接:传送门 题目: F. Summer Practice Report time limit per test seconds memory limit per test megabytes i ...

  6. python trie

    Trie 库 https://github.com/pytries/marisa-trie/blob/master/docs/tutorial.rst http://marisa-trie.readt ...

  7. mac添加redis 环境变量

    cd /etc/paths.d touch redis vim redis 写入 /Users/love/Downloads/redis-4.0.10/src 之后就可以直接执行redis-cli r ...

  8. 【SpringBoot】服务器端主动推送SSE技术讲解

    =====================16.高级篇幅之SpringBoot2.0服务器端主动推送SSE技术讲解 ============================ 1.服务端推送常用技术介绍 ...

  9. grpc源码分析之域名解析

    环境: win7_x64,VS2015.grpc_1.3.1 场景: 在客户端中使用grpc连接服务器,在多次输入非法的地址后,再次输入正确的地址连出现连接超时的现象.侯捷先生说过“源码面前,了无秘密 ...

  10. Java_集合_ArrayLish Comparator比较排序 小笔记

    import java.util.ArrayList; import java.util.Collections; import java.util.Comparator; class Teacher ...