JQuery——第1课、基础

1、JQuery简介

一、jQuery 库能够经过一行简单的标记被添加到网页中。

二、在您开始学习 jQuery 以前，应该对如下知识有基本的了解：HTML、CSS、JavaScript。

三、什么是JQuery？　　

　　jQuery是一个JavaScript函数库，把咱们经常使用的一些功能进行了封装，方便咱们来调用，提升咱们的开发效率，极大地简化了 JavaScript 编程。

　　jQuery是一个轻量级的"写的少，作的多"的JavaScript库。

　　jQuery库包含如下功能：

　　　　♦  HTML 元素选取

　　　　♦  HTML 元素操做

　　　　♦  CSS 操做

　　　　♦  HTML 事件函数

　　　　♦  JavaScript 特效和动画

　　　　♦  HTML DOM 遍历和修改

　　　　♦  AJAX

　　　　♦  Utilities

四、为何要使用JQuery？　

　　目前网络上有大量开源的 JS 框架, 可是 jQuery 是目前最流行的 JS 框架，并且提供了大量的扩展。而且不少大公司都在使用 jQuery，

2、JQuery  安装

一、下载JQuery

进入官网：http://jquery.com/ 或者直接百度JQuery也是能够找到JQuery官网的，

下载好之后 

二、应用JQuery

（1）、 进入Eclipse，建立一个项目（testJQuery）

（2）、右键WebContent创建一个js文件，而后建下载好的Jquery放在里面

（3）、右键WebContent创建一个.jsp文件（test1.jsp）

（4）、引入JQuery

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

 src里的为所下载的JQuery文件地址

编写个简单的示例：JQuery中的Hello World 简单程序

3、JQuery的语法 

一、jQuery 语法是经过选取 HTML 元素，并对选取的元素执行某些操做。

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

• $ 美圆符号定义 jQuery
• 选择符（selector）"查询"和"查找" HTML 元素
• jQuery 的 action() 执行对元素的操做

二、$()工厂函数

使用了jQuery的页面，在写js代码时，通常都是以$(function(){...});形式开头的。至关于$(document).ready(function(){...});  也就是一个函数变量的意思

返回的是一个jQuery对象,括号里面的叫表达式

　

　

三、JQuery的基本选择器

jQuery 选择器容许您对 HTML 元素组或单个元素进行操做。

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。它基于已经存在的 CSS 选择器，除此以外，它还有一些自定义的选择器。

jQuery 中全部选择器都以美圆符号开头：$()。

（1）、经过id获取元素

jQuery #id 选择器经过 HTML 元素的 id 属性选取指定的元素，相似DOM的getElementById(id)方法来获取元素。

页面中元素的 id 应该是惟一的，因此您要在页面中选取惟一的元素须要经过 #id 选择器。

语法：$("#id")  

（2）、经过类名获取元素

jQuery 类选择器能够经过指定的 class 查找元素。

语法：$(".className") 

（3）、经过标签名获取元素

经过指定的标签名查找元素，指定须要操做的标签名便可操控全部的标签

语法：$("tagName")  

相似DOM的getElementsByTagName，经过标签名得到多个标签，CSS也常常这样使用的

　　

　　

(4)、一次性获取多个元素

能够一次获取彻底不相关的以标签名，或者以id和类名为标识的元素，这些标识之间用逗号分隔，最后会将这些获取的元素封装在一个包装集中返回

语法：$("selector1,selector2,select3 ……")

4、常见的JQuery对象函数

一、text()

text() 方法方法设置或返回被选元素的文本内容。

当该方法用于返回一个值时，它会返回全部匹配元素的组合的文本内容

语法：$(selector).text() 

咱们也可使用text()设置所选取的div里面的文本内容

二、html()

html() 方法返回或设置被选元素的内容 (inner HTML)。

若是该方法未设置参数，则返回被选元素的当前内容。

当使用该方法返回一个值时，它会返回第一个匹配元素的内容。

 语法：语法：$(selector).html() 

 

使用html()设置所选取的div里面的内容

没点击前

点击后

三、 val()

val() 方法返回或设置被选元素的值。

元素的值是经过 value 属性设置的。该方法大多用于 input 元素。

若是该方法未设置参数，则返回被选元素的当前值。

返回第一个匹配元素的 value 属性的值。

语法：$(selector).val(value)

使用val()设置所选取的input框里面的value值

四、css()

css() 方法设置或返回被选元素的一个或多个样式属性。

（1）、’如需返回指定的 CSS 属性的值，语法：css("propertyname")

 

 

 （2）、如需设置指定的CSS属性，语法：css("propertyname","value")

 

 

（3）、如需设置多个 CSS 属性，语法：css({"propertyname1":"value1","propertyname2":"value2",……});

 

五、attr()

attr() 方法设置或返回被选元素的属性值。

根据该方法不一样的参数，其工做方式也有所差别

返回被选元素的属性值。

语法：$(selector).attr(attribute)

使用attr()设置被选元素的属性值