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. NET Core微服务之路：弹性和瞬态故障处理库Polly的介绍

    前言 上一节中我们介绍了Ocelot的常见使用配置,通过json配置文件,实现API网关的请求处理.和一个使用DownStream扩展下游中间件,来实现Http转RPC的简单实现,功能不算强大,但可以 ...

  2. keras入门（三）搭建CNN模型破解网站验证码

    项目介绍   在文章CNN大战验证码中,我们利用TensorFlow搭建了简单的CNN模型来破解某个网站的验证码.验证码如下: 在本文中,我们将会用Keras来搭建一个稍微复杂的CNN模型来破解以上的 ...

  3. jquery发起get/post请求_或_获取html页面数据

    备注:我们经常会遇到使用jquery获取某个地址下的部分页面内容,然后替换当前页面对应内容,也就是:局部刷新功能. 当然也可以使用get/post请求获取数据,修改数据,可以参考以下JS代码: 走过的 ...

  4. 【Java每日一题】20170228

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

  5. springboot之单元测试

    springboot在写完之后,肯定都需要进行单元测试,如下给出一些样例 工程层次结构如图 代码如下: controller: package com.rookie.bigdata.controlle ...

  6. git参考, 小结

    git官网: https://git-scm.com 菜鸟教程: http://www.runoob.com/git/git-tutorial.html 廖雪峰: https://www.liaoxu ...

  7. idea代码提示

    idea代码提示:Keymap-->Main menu-->Code-->Completion去掉Cyclic Expand Word的快捷键将Basic的快捷键更改为Alt+/

  8. crontab工具安装和检查

    什么是crontab?crontab 是一个用于设置周期性执行任务的工具 重启crond守护进程 systemctl restart crond 查看当前crond状态 systemctl statu ...

  9. [总结]WEB前端常用命令

    webpack等工具操作 自动创建package.json文件:npm init 如何根据package.json来自动安装包:npm install npm具体安装某个组件:npm install ...

  10. P3275 [SCOI2011]糖果

    题目描述 幼儿园里有N个小朋友,lxhgww老师现在想要给这些小朋友们分配糖果,要求每个小朋友都要分到糖果.但是小朋友们也有嫉妒心,总是会提出一些要求,比如小明不希望小红分到的糖果比他的多,于是在分配 ...