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. tcp_wrapper过滤

    1.1 wrap简介 wrap工作在内核空间和应用程序中间的库层次中.在内核接受到数据包准备传送到用户空间时都会经过库层次,对于部分(只是部分)应用程序会在经过库层次时会被wrap库文件阻挡下来检查一 ...

  2. 翻译：low_priority和high_priority(已提交到MariaDB官方手册)

    本文为mariadb官方手册:HIGH_PRIORITY and LOW_PRIORITY的译文. 原文:https://mariadb.com/kb/en/high_priority-and-low ...

  3. 高负载集群实战之lvs负载均衡-技术流ken

    lvs简介 LVS的英文全称是Linux Virtual Server,即Linux虚拟服务器. 特点 跨平台:window,linux 作用 实现负载均衡 核心组件 ip_vs:linux的内核功能 ...

  4. [转]OmniLayer / omnicore API 中文版

    本文转自:https://www.codetd.com/article/1692438 JSON-RPC API Omni Core是Bitcoin Core的一个分支,其Omni协议功能支持作为顶层 ...

  5. 数据库部分（MySql）_4

    约束 约束:给表的字段名添加限制条件; 非空约束(not null):添加非空约束后,字段值不能为null: 唯一约束(unique):添加唯一约束后,字段值不能重复: 主键约束(primary ke ...

  6. cmd Telnet 手工模拟http请求

    telnet Windows系统自带的访问页面命令 首先打开控制面板点击卸载程序 打开windows功能 勾选 telnt 客户端 在打开cmd 命令 输入 telnt www.baidu.com 8 ...

  7. SqlServer中循环和条件语句

    if语句使用示例 declare @a int              set @a=12              if @a>100                 begin      ...

  8. Java中static与final

    修饰变量:static:静态变量,是属于这个类的final :常量,只能赋值一次static final:静态常量,必须立即初始化(同时具有static.final的特点) 修饰方法:static:静 ...

  9. form表单基础知识

    form 元素是块级元素 ------------------- ------------------- ----------------------------------------------- ...

  10. thinkphp3.2模块名如何不区分大小写?

    thinkphp3.2中已配置:'URL_CASE_INSENSITIVE' => true,对于控制器及操作名大小写都可以,但仍对于模块名的大小写就运行机制出错,比如:http://www.x ...