jQuery框架的基本使用

目录

 

一：jQuery三问

二：jQuery特点

三：使用方法

1.本地资源库引用

2.在线资源库引用

四：jQuery的基础使用

1选择器

a.普通选择器

b.特殊选择器

2.筛选器

3.属性操作

4.样式操作

5.内容操作

---

 

一：jQuery三问

Q:什么是jQuery？

A:jQuery 是一个 JavaScript 库。

Q：jQuery有什么用？

A:jQuery 极大地简化了 JavaScript 编程。

Q:jQuery难吗？容易上手吗？

A:jQuery 很容易学习。

二：jQuery特点

1.优质的选择器和筛选器

2.方便的隐式迭代

3.强大的链式编程

ps：基于以上特点：很多时候我们要做的事情被“一行代码解决”。

三：使用方法

1.本地资源库引用

a.首先访问官网下载jQuery文件，官网地址https://jquery.com/

b.将jQuery文件放入项目的js文件夹内

c.在要使用jQuery库的html文件中使用script标签引入jQuery文件

<script src="./js/jquery-3.4.1.js"></script>

2.在线资源库引用

a.网络搜索： 静态资源库

b.在静态资源库网站内搜索：jQuery

c.选择想要使用的版本，复制链接

d.在本地的html文件内用script标签引用

<script src="https://lib.baomitu.com/jquery/3.4.1/jquery.js"></script>

四：jQuery的基础使用

1选择器

a.普通选择器

a.id选择器：$("#box");

b.class选择器：$(".box");

c.标签选择器$("div");

d.包含选择器：$("#box p");//选择box内的p标签

e.群组选择器：$("#box,p");//同时选中box 和p标签

f.属性选择器： $("input[type=text]");//选择type为text的input标签

b.特殊选择器

选择第一个元素：$("#box:first");            //选择第一个出现的box

选择最后一个元素：$("#box:last");         //选择最后一个出现的box

选择第n个元素：$("#box:eq(n)");            //n为数字，从0开始第n个box

选择奇数元素：$("#box:odd");                //选择奇数box

选择偶数元素：$("#box:even");              //选择偶数box

2.筛选器

.first()             匹配第一个

.last()             匹配最后一个

.eq()               匹配指定下标

.find()             匹配指定的后代元素

.children()      匹配指定的子元素

.prev()            匹配上一个兄弟

.prevAll()       匹配上面所有的兄弟

.next()            匹配下一个兄弟

.nextAll()       匹配下面所有兄弟

.siblings()      匹配所有兄弟,不管上下

.parent()        匹配直接父级

.parents()      匹配所有父级

.end()            匹配链式编程选择器的上一级

3.属性操作

a.  .prop()方法

 标签对象.prop(属性)                           获取指定属性的属性值
        标签对象.prop(属性 , 属性值)              设定属性和属性值
        标签对象.prop(自定义属性 , 属性值)    设定自定义属性和属性值

ps：设置内置属性时，可以直接显示在标签上，为 可见的内置属性
               设置自定义属性时，不会直接显示在标签上，为 不可见的自定义属性

b.    .removeProp()方法

标签对象.removeProp(属性)      删除指定的属性，多用于自定义属性

c.    .attr()方法

 标签对象.attr(属性)                           获取指定属性的属性值
        标签对象.attr(属性 , 属性值)              设定属性和属性值
        标签对象.attr(自定义属性 , 属性值)    设定自定义属性和属性值

ps：
        设置属性时，直接显示在标签上，为 可见的内置 或 自定义

d.    .removeAttr()方法

标签对象.removeAttr(属性)      删除指定的属性

4.样式操作

a.标签对象.css(属性)                    获取指定属性的属性值
       b. 标签对象.css(属性 , 属性值)       设定属性以及属性值
       c.标签对象.css({属性 : 属性值})    以对象的形式,设定属性以及属性值，可以同时设定多个属性

5.内容操作

a.   .html()

标签对象.html()           没有参数是获取标签内容
       标签对象.html(内容)    带有参数是设定标签内容

ps:效果类似于原生JavaScript中的innerHTML

b.    .text()

标签对象.text()            没有参数是获取标签内容
       标签对象.text(内容)     带有参数是设定标签内容

ps:效果类似于JavaScript中的innerText