Jquery

Posted 2021-04-08 程序媛的春天

一、概述

1. 什么是jquery
   

1. jquery是对javascript的封装，属于一个框架级的技术。

2. 好处：

1. 简化编码，提高开发的效率。

1. 比如：

1. js获取元素对象：document.getElementById(id);

2. jquery:$('#id')

2. 屏蔽了浏览器的差异。

二、搭建环境

1. jquery的两个文件：

2. 在html页面导入jquery-1.8.3.js文件

   
   

   

   注意：jquery是运行于客户端浏览器上的。

三、使用jquery开发

1. 在另一个script标签内部书写jquery的代码
   

1. 获取jquery对象：$（选择器）：选择器的目的是找到要操作的元素对象。

1. 比如：$('#id')  --通过标签id属性的值获取jquery对象。

   
   

   

2. 注意：javascript源生对象(DOM对象)是不能调用jquery的函数的。

3. 如何讲一个DOMduixiang和jquery对象之间做转换

1. DOM-Jquery：$（DOM对象）

2. jquery--DOM：jquery对象.get(0)--这种方式一般不用。

四、jquery中的选择器

1. 基本选择器
   

1. id选择器：$（'#id属性的值'）

2. class选择器：$（‘.class属性的值’）

3. 标签选择器：$（‘标签名’）

2. 层次选择器

1. $(sel1  sel2)--得到sel下的所有子对象

2. $(sel1>sel2)--得到sel下的直接子对象

3. $(sel1+sel2)--紧邻的对象

4. $(sel1~sel2)--获得所有的兄弟对象，后面的所有兄弟

3. 简单过滤选择器

1. first--拿到一组对象中的第一个

2. last--拿到一组中的最后一个

3. eq(index)--拿到指定下标的对象

4. gt(index)--拿到大于指定下标的对象

5. lt(index)--拿到小于指定下标的对象

6. even--拿到偶数下标的对象

7. odd--拿到奇数小标的对象

8. not（选择器）--排除指定选择器对应的对象

4. 内容过滤选择器

1. empty-- 拿到内容为空的对象

2. parent--拿到有内容的对象

3. contains(内容)-- 拿到包含指定内容的对象

4. has（选择器）--包含指定子对象的元素对象

5. 可见性选择器

1. visible--可见的元素对象进行操作

2. hidden--对隐藏的元素对象进行操作

6. 属性过滤选择器

1. $('选择器[属性名]')

2. $('选择器[属性名=属性值]')

3. 关于表单的选择器：

1. checked--适用于单选框和多选框

1. $('input[class=sex]:checked')--拿到的是被选中的单选按钮/多选按钮

2. selected--适用于下拉列表的option属性

   

五、对jquery对象的访问

1. 遍历--for循环  --jquery对象.each(function(){功能代码})；
   

1. 长度相关：对象数组.length /对象数组.size()

六、操作元素属性

1. 添加
   

1. var span=$('<span>一段文字</span>')；--创建一个元素对象

2. jquery对象.append(span)；--在父对象的里面加入一个子对象。

3. before（）--在当前对象前加入一个哥哥

4. after（）--在当前对象后加入一个弟弟

2. 删除

1. empty();--清空 当前标签对象下的所有子标签

2. remove();--清空  当前标签对象下的所有子标签 包括本身

3. 修改

1. text()--操作标签体的内容  不会解析html标签

1. $('#s2').text('<h1>老七</h1>');//修改标签体内容

2. $('#s2').html()  --获取标签体内容

2. html()--操作标签体的内容 会解析html

1. $('#s2').html('<h1>老七</h1>');//修改标签体内容

2. $('#s2').html() --获取标签体内容

3. addClass() --给一个标签添加class属性

4. removeClass() --移除标签的class属性

4. 操作属性的

1. prop（属性名） --得到对应属性的值

2. prop（属性名，属性的新值） --给指定的属性重新赋值

3. attr（属性名）--功能和prop一样  区别：attr jquery 1.6前       prop是jquery1.6之后的

4. 表单相关的：

1. val() --操作表单元素的value属性

5. 动画相关

小编微信：15229076002，欢迎互侃，期待与你交流。