jQuery基本操作

简介

jQuery是一个快速，简洁的JavaScript框架，是继承Prototype之后又一个优秀的JavaScript代码库(框架)。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作，事件处理，动画设计和Ajax交互。

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的CSS选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的 插件。jQuery兼容各种主浏览器.

jQuery的使用方式

在使用之前需要先下载库文件

https://jquery.com/

将下载好的js文件放到项目中，并引入到需要的HTML文件中

使用：

注意：jQery库文件的导入必须在自己写的代码之前。就绪函数在页面上可以写n个。

就绪函数：

这是DIV

DOM对象与jQuery对象

DOM对象：就是通过原生JavaScript方法获取到的对象就是DOM对象。

jQuery对象：就是通过jQuery方法获取到的对象

jQuery对象和DOM对象可以进行相互转换，但是两种对象的属性和函数不能彼此混搭使用

DOM对象转换jQuery对象，语法：jQuery(DOM对象)；或者$(DOM对象)；

jQuery对象DOM对象，语法：jQuery对象[index];或者jQuery对象.get(index);

这是DIV

jQuery选择器

基本选择器

层次选择器

1、基本选择器

使用最多的选择器

分别是：标签选择器，ID选择器，类选择器，全局选择器

第一个DIV
第二个DIV
第三个DIV
第四个DIV
第一个P

2、层次选择器

根据元素与元素之间的关系来查找元素

分别是：后代选择器 ，子元素选择器>，同辈元素选择器~，同辈相邻元素选择器+

这是out前面的span
这是out里面的span
这是out里面的p里面的span
这是out后面的span这是out后面的span再后面的span
这是out后面的后面的的P

3、this的使用

jQuery属性操作

prop()

prop(“属性名”);获取指定属性的值。

prop(“属性名”,”属性值”);设置指定属性的值。

全选
篮球
足球
排球
乒乓球

jQuery样式操作

1、css(“样式名”,”样式值”);或css({“样式名1”:”样式值1”,“样式名2”:”样式值2”});

jQuery内容操作

html();设置或返回所选元素的内容（包括 HTML 标记），相当于JS的innerHTML

text();设置或返回所选元素的文本内容，相当于JS的innerText

val();设置或返回表单域的值，相当于JS的value

这是DIV

jQuery文档操作

$();创建标签

append();在指定的标签中后置添加

prepend();在指定的标签中前置添加

after();在指定标签的后面添加

before();在指定标签的前面添加

remove();移除指定标签

这是DIV

案例：省市联动

分析：

1、使用一维数组来存放省份信息，使用二维数组存放城市信息

2、页面加载完成，将省份信息读取出来形成放到省份的下拉列表中

3、省份发生改变的时候，读取该省份的城市信息形成放到城市下拉列表中

...请选择...省...请选择...市

jQuery循环遍历

each();

jQuery动画

显示与隐藏

show(time,function);显示

hide(time,function);隐藏

toggle(time,function);在显示与隐藏之间相互切换

time：显示与隐藏的时间，单位是毫秒

function：回调函数。显示与隐藏完毕之后自动调用的函数。

两个参数都是可选参数。