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. ResourceOwnerPassword模式使用数据库.

    有时候, ResourceOwnerPassword模式有用的, 可以用来代替我们原来管理程序的开发方式. 因为管理程序本身拥有用户数据的权限嘛, 并不是第三方应用, 无需要授权 集成很简单. 1. ...

  2. c# 怎么读取web.config中的配置项

    ConfigurationManager.AppSettings["templateId"]

  3. [linux] tcpdump抓包案例

    1.常见参数 tcpdump -i eth0 -nn -s0 -v port 80 -i 选择监控的网卡 -nn 不解析主机名和端口号,捕获大量数据,名称解析会降低解析速度 -s0 捕获长度无限制 - ...

  4. 深入理解JAVA中的NIO

    前言: 传统的 IO 流还是有很多缺陷的,尤其它的阻塞性加上磁盘读写本来就慢,会导致 CPU 使用效率大大降低. 所以,jdk 1.4 发布了 NIO 包,NIO 的文件读写设计颠覆了传统 IO 的设 ...

  5. 【Java每日一题】20170118

    20170117问题解析请点击今日问题下方的“[Java每日一题]20170118”查看(问题解析在公众号首发,公众号ID:weknow619) package Jan2017; import jav ...

  6. Java学习笔记之——封装

    1. 属性和方法放到类中 2. 信息的隐藏 (1) 属性的隐藏 (2) 方法实现的细节隐藏 3. 权限修饰符: 从小到大的顺序:private->默认的(什么都不写)->protected ...

  7. Mybatis框架基础支持层——反射工具箱之Reflector&ReflectorFactory（3）

    说明:Reflector是Mybatis反射工具的基础,每个Reflector对应一个类,在Reflector中封装有该类的元信息, 以及基于类信息的一系列反射应用封装API public class ...

  8. css3巧用选择器配合伪元素

    一 . 前言 有时我们在写底部导航栏时,会有很多超链接,每个链接间用“|”分割,如下图: 可能刚入门的朋友会想到这样完成,再单独设置span的样式, 今天主要介绍怎么样用css3简单快速的完成这个效果 ...

  9. RabbitMQ 在 web 页面 创建 exchange, queue, routing key

    这里只是为了展示, 在实际开发中一般在消费端通过 注解来自动创建 消费端: https://www.cnblogs.com/huanggy/p/9695934.html 1, 创建 Exchange ...

  10. 极简】如何在服务器上安装SSL证书？

    本文适合任何人了解,图形化操作.下面以腾讯云为例,并且服务器(linux)也安装了宝塔面板. 1.登陆腾讯云账号进入控制台,找到SSL的产品 2.按要求申请并填写表单,记住私钥密码 3.提交后,待腾讯 ...