jQuery -- 知识点回顾篇（一）：初见jQuery -- 基本用法，语法，选择器

1. 使用方法

　　jQuery 库位于一个 JavaScript 文件中，其中包含了所有的 jQuery 函数。

　　网页需要使用到 jQuery 时，需要先在网页中引入 jQuery 的 js文件。

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>My Test JQuery</title>

    <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>

</head>

<body>

</body>

</html>

2. jQuery 语法
　　jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
　　基础语法形式： $(selector).action()

　　例： $("p").hide() - 隐藏所有 <p> 元素
　　　　 $("#myInfo").hide() - 隐藏所有 id="myInfo" 的元素

　　写法：

　　　　所有 jQuery 函数位于一个 document.ready 的函数中。如下图。

　　　　这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。

　　　　如果在文档没有完全加载之前就运行函数，操作可能失败。

    $(document).ready(function(){

       // 代码部分写在这里

    });

　　　也可以简写成下面这样：

   $(function(){

      // 这里写代码

   });

举例：

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>My Test JQuery</title>

    <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>

    <script type="text/javascript" >

        $(function(){

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

                $("#myDiv1").html("Hello JQuery World");

                $("#myDiv1").css("background-color","green");

            });

        });

    </script>

</head>

<body>

    <button type="button">点击</button>

    <div id="myDiv1">Hello</div>

</body>

</html>

　　

3. 基本选择器

(1) 元素选择器: jQuery 元素选择器基于元素名选取元素。

　　举例：使用元素选择器选择所有<p>元素，将其隐藏。

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>My Test JQuery</title>

    <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>

    <script type="text/javascript" >

        $(function(){

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

                $("p").hide();

            });

        });

    </script>

</head>

<body>

    <button type="button">点击</button>

    <p>p元素1</p>

    <p>p元素2</p>

    <div id="myDiv1">Hello</div>

</body>

</html>

　　

(2) #id 选择器: jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。
         页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器

举例：使用 #id 选择器选择 id="myDiv1"的元素，将其隐藏。

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>My Test JQuery</title>

    <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>

    <script type="text/javascript" >

        $(function(){

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

                $("#myDiv1").hide();

            });

        });

    </script>

</head>

<body>

    <button type="button">点击</button>

    <p>p元素1</p>

    <p>p元素2</p>

    <div id="myDiv1">Hello</div>

</body>

</html>

　　

(3) .class 选择器: jQuery 类选择器可以通过指定的 class 查找元素。

举例：使用类选择器选择Class=“myClass1”的元素，将其隐藏。

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>My Test JQuery</title>

    <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>

    <script type="text/javascript" >

        $(function(){

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

                $(".myClass1").hide();

            });

        });

    </script>

</head>

<body>

    <button type="button">点击</button>

    <p>p元素1</p>

    <p>p元素2</p>

    <div id="myDiv1">Hello</div>

    <div Class="myClass1">你好</div>

</body>

</html>

　　

jQuery -- 光阴似箭（一）：初见 jQuery -- 基本用法，语法，选择器的更多相关文章

  1. jquery中attr()与prop()函数用法实例详解(附用法区别)

    本文实例讲述了jQuery中attr()与prop()函数用法.分享给大家供大家参考,具体如下: 一.jQuery的attr()方法 jquery中用attr()方法来获取和设置元素属性,attr是a ...

  2. jQuery中的text(),html(),val()用法

    jQuery中的text(),html(),val()用法 text():获取或者改变指定元素的文本 html():获取或改变指定元素的html元素以及文本 val():获取或者改变指定元素的valu ...

  3. jquery教程-Jquery 获取标签个数 size()函数用法

    jquery教程-Jquery 获取标签个数 size()函数用法,size() 方法返回被 jQuery 选择器匹配的元素的数量. 语法 $(selector).size()     jQuery ...

  4. jquery中append跟prepend的用法

    jquery中append和prepend的用法 append   是插入到元素中,并放到元素内的最后面prepend  是插入到元素中,并放到元素内的最前面例$("body"). ...

  5. jQuery css,position,offset,scrollTop,scrollLeft用法

    jQuery css,position,offset,scrollTop,scrollLeft用法: <%@ page language="java" import=&quo ...

  6. jQuery插件制作之全局函数用法实例

    原文地址:http://www.jb51.net/article/67056.htm 本文实例讲述了jQuery插件制作之全局函数用法.分享给大家供大家参考.具体分析如下: 1.添加新的全局函数 所谓 ...

  7. jquery组件WebUploader文件上传用法详解

    这篇文章主要为大家详细介绍了jquery组件WebUploader文件上传用法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 WebUploader是由Baidu WebFE(FEX)团队开发的一 ...

  8. jquery uploadify文件上传插件用法精析

      jquery uploadify文件上传插件用法精析 CreationTime--2018年8月2日11点12分 Author:Marydon 一.参数说明 1.参数设置 $("#fil ...

  9. jquery下json数组的操作用法实例

    jquery下json数组的操作用法实例: jquery中操作JSON数组的情况中遍历方法用的比较多,但用添加移除这些好像就不是太多了. 试过json[i].remove(),json.remove( ...

随机推荐

  1. MySQL高可用之组复制技术(2)：配置单主模型的组复制

    MySQL组复制系列文章: MySQL组复制大纲 MySQL组复制(1):组复制技术简介 MySQL组复制(2):配置单主模型的组复制 MySQL组复制(3):配置多主模型的组复制 MySQL组复制( ...

  2. Linux之定时任务Crond使用

    Linux之定时任务Crond使用 一.用法 crond服务是linux系统自带的服务,是不需要手动安装的: crond服务是一种守护进程: Linux中的用户使用contab命令来配置corn任务: ...

  3. 一个3年Java程序员的坎与选择

    前言 LZ 15年本科毕业,不知不觉3年过去了,去年底裸辞回到成都来发展,年后开始找工作,面试了几家公司,现在整理整理做个总结,也方便规划下一个3到5年以及和广大想要进阶的Java程序员同胞们共勉. ...

  4. sping框架纯注解配置

    1.相关注解 ①@Configuration注解-->添加了该注解在类上,就表明该类是spring的配置类.该类的作用是用来替代原来的XML配置文件的. 通过配置类创建容器时,需要使用Annot ...

  5. 2018年，JavaScript都经历了什么？

    摘要: 对JSer来说,这是很有意思的1年. 本文灵感来自JavaScript Weekly周报,欢迎大家订阅. The State of JavaScript 2018 The State of J ...

  6. qW3xT.2，解决挖矿病毒。

    网站在运行期间感觉怪怪的,响应速度慢的不是一丁半点,带宽5M,不该是这样的呀 于是登录Xshell top命令 查看cpu情况如下 PID为3435的进程占用CPU过大,难道被病毒入侵了吗? 查看该进 ...

  7. 计算机1&操作系统硬件

    1.什么是编程语言? 语言是一种事物与另外一种事物沟通的表达方式   而编程则是人与计算机沟通的表达方式 2:什么是编程? 编程就是程序员用计算机能理解的的表达方式,把程序员想要表达的内容写到文件里, ...

  8. 玩游戏 学Flex布局

    大家好,今天推荐一个学习Flex布局的网页小游戏,非常不错,是国外的牛人开发的,值得一试,重复几次,就会大概了解Flex的属性了! 地址: http://flexboxfroggy.com/#zh-c ...

  9. Exception 和 Error 有什么区别么

    声明 本篇所涉及的提问,正文的知识点,全都来自于杨晓峰的<Java核心技术36讲>,当然,我并不会全文照搬过来,毕竟这是付费的课程,应该会涉及到侵权之类的问题. 所以,本篇正文中的知识点, ...

  10. 读书笔记--Android Gradle权威指南（上）

    本篇文章已授权微信公众号 dasu_Android(大苏)独家发布 最近看了一本书<Android Gradle 权威指南>,对于 Gradle 理解又更深了,但不想过段时间就又忘光了,所 ...