1、jQuery库简介

1.1、jQuery:  

  jQuery库可以通过一行简单的标记被添加到网页中

1.2、什么是jQuery:  

  jQuery是一个JavaScript函数库(由于底层封装的问题,不需要再担心浏览器兼容性的问题)

1.3、jQuery库包含的功能:

  HTML元素选取

  HTML元素操作

  CSS操作

  HTML事件函数(不同浏览器有一些方面是不相通的,使用jQuery之后就不要担心这个问题了。)

  JavaScript特效和动画

  HTML DOM遍历和修改

  AJAX(不修改页面内容将服务器内容显示在页面上,有非常好的用户体验)

  Utilities

2、引入jQuery的方法

2.1、网页中添加jQuery

  1.从jquery.com下载jQuery库

  2.从CDN中载入jQuery,如从google中加载jQuery

    百度和新浪的服务器存有jQuery

      例如:http://libs.baidu.com/jquery/1.10.2/jquery.min.js

    谷歌和微软的服务器存有jQuery    

      例如:http://ajax.googleapis.com/ajax/libs/jquery/jquery.min.js

2.2、版本介绍

  v1.11.1:1.x支持IE6+

  v2.1.1:2.x支持IE9+

3、jQuery的基本语法

3.1、jQuery语法

  基础语法: $(selector).action()

  美元符号定义jQuery

  选择符(selector)查询和查找HTML元素

  jQuery的action()执行对元素的操作

  例如:

    $(this).hide() - 隐藏当前元素

    $("p").hide() - 隐藏当前所有段落

    

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){/*当前文档加载完毕后执行的功能。*/
alert("文档加载完毕!");
$("p").click(function(){
$(this).hide();/*这里的隐藏直接连他所占的div空间都没有了。*/
});
});
</script>
</head>
<body>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
</body>
</html>

前端(jQuery)(1)-- JQuery简介及语法的更多相关文章

  1. jQuery简介及语法

    jQuery引入 jQuery语法

  2. 前端之JQuery:JQuery基本语法

    jQuery基本语法 一.jQuery基础1.为什么要用jquery? 写起来简单,省事,开发效率高,兼容性好2.什么是jQuery? jQuery是一个兼容多浏览器的JavaScript库(类似py ...

  3. 前端第四篇---前端基础之jQuery

    前端第四篇---前端基础之jQuery 一.jQuery介绍 二.jQuery对象 三.jQuery基础语法 四.事件 五.动画效果 六.补充each 一.jQuery简介 1.jQuery介绍 jQ ...

  4. 前端学习之jquery/下

    前端学习之jquery 一 属性操作 html(): console.log($("div").html()); $(".test").html("& ...

  5. 前端学习之jquery

    前端学习之jquery 1.   什么是jQuery对象? jQuery对象就是通过jQuery包装DOM对象后产生的对象.jQuery对象是jQuery独有的.如果一个对象是jQuery对象,那么它 ...

  6. 前端笔记之jQuery(上)加载函数的区别&对象&操作HTML/CSS&动画&选择器

    一.jQuery简介 1.0 JavaScript编程比较恶心的地方 恶心1:选择元素麻烦,全线兼容的方法只有getElementById()和getElementsByTagName()两个.其他的 ...

  7. Python学习(二十三)—— 前端基础之jQuery

    转载自http://www.cnblogs.com/liwenzhou/p/8178806.html 一.jQuery入门 jQuery是一个轻量级的.兼容多浏览器的JavaScript库. jQue ...

  8. 前端基础之:JQuery(可编辑版)

     前端基础之jquery   一 jQuery是什么? [1]   jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team. [2]   ...

  9. 前端基础之jQuery入门 01

    jQuery介绍 jQuery是一个轻量级的.兼容多浏览器的JavaScript库. jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方便地进行Ajax交互, ...

  10. 前端基础 之 jQuery

    浏览目录 jQuery介绍 jQuery的优势 jQuery对象 jQuery内容 一.jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户 ...

随机推荐

  1. 使用vue-cli3快速适配H5项目

    跟我老大学到了一招使用vue-cli3快速适配H5项目的方法. 我之前也有进行一个版本的适配,直接使用cnpm install -g vue-cli,然后安装各种插件进行适配,见我之前的博客. 后来老 ...

  2. Django问题

    Django问题 'WSGIRequest' object has no attribute 'user' django python 关注 2 关注 收藏 0 收藏,413 浏览   当我的djan ...

  3. JZOJ[3771] 【NOI2015模拟8.15】小 Z 的烦恼

    题目 描述 题目大意 有从111到nnn的数字,每个数字都可以放在一个盒子里(可以不放).一旦放,满足: 如果它不在第mmm个盒子,那么它的两倍一定在后面一个盒子里. 如果它不在第111个盒子,那么它 ...

  4. HTML - 文本标签相关

    <html> <head></head> <body> <!-- 标题标签 : h1到h6, 文字大小依次变小, 加粗显示, 自带换行 标签中的部 ...

  5. 数据结构学习笔记_树(二叉搜索树,B-树,B+树,B*树)

    一.查找二叉树(二叉搜索树BST) 1.查找二叉树的性质 1).所有非叶子结点至多拥有两个儿子(Left和Right): 2).所有结点存储一个关键字: 3).非叶子结点的左指针指向小于其关键字的子树 ...

  6. VS2010-MFC(对话框:非模态对话框的创建及显示)

    转自:http://www.jizhuomi.com/software/162.html 前面已经说过,非模态对话框显示后,程序其他窗口仍能正常运行,可以响应用户输入,还可以相互切换.本节会将上一讲中 ...

  7. Mac OS X 下有关adb相关问题

    一.什么是adb? ADB的全称是Android Debug Bridge,用来调试Android程序的,白话点就是debug工具! 位置:一般下载Android的SDK时候在platform-too ...

  8. GitHub:如何构建一个股票市场知识图谱?(附代码&链接)

    来源:专知 本文约 600007 董事⻓/董事 高燕 女 60 600007 执⾏董事 刘永政 男 50 600008 董事⻓/董事 ··· ··· ··· ··· ··· 注:建议表头最好用相应的英 ...

  9. axios接口封装

    axios封装 import JsonP from 'jsonp' import axios from 'axios' import { Modal } from 'antd' export defa ...

  10. 使用git命令将本地项目推送到远程仓库

    将本地项目推送到远程仓库 这里先放一张图, 有助于理解git命令 1. 在GitHub上新建一个仓库 注意不要勾选自动生成README.md文件, 否则会产生某些问题, README.md文件到时可以 ...