2021/08/07笔记

我们于2021/08/07 的学习目标是:前端，核心任务为:

1、学习技术:

1）、jQuery的基本概念

2）、jQuery对象

3）、jQuery选择器

4）、jQuery操作元素的属性

5）、jQuery操作元素的样式

6）、jQuery操作元素的内容

7）、jQuery创建、添加与删除元素

8）、jQuery元素遍历

9）、jQuery事件绑定

10）、jQuery Ajax

11）、BootStrap

2、文档总结

1）、jQuery的基本概念

jQuery是一套兼容多浏览器的JavaScript脚本库。

核心理念是“写的更少，做得更多”

使用jQuery能极大提升编写效率

使用步骤：

一 在官网下载下载jQuery

二 在HTML页面引入，使用

   使用script标签对的src属性引入jQuery

<script src = "js/jquery-3.6.0.min.js"></script>

三 在HTML页面使用jQuery

2）、jQuery对象

<script>

   var box1 = document.getElementByID("box");//DOM对象

   var jq_obj = $("#box);//jQuery对象

   console.log(jq_obj);//在控制台打印jQuery对象

</script>

通过jQuery实现隔行换色

<script>

   $function(){

      //给偶数行定义颜色

      ($("tr:odd").css("background","blue"));

      //给奇数行定义颜色

      ($("tr:even").css("background","yellowgreen"));

}

</script>

$符号在jQuery中代表对jQuery对象的引用

获取jQuery包装集对象：

$("选择器")

如果要获取的元素不存在，不会像DOM对象返回null，而是会返回空的jQuery对象。

获取jQuery对象的length，判断是否==0得到其是否获取到相应的jQuery对象。

注意：

jsDOM对象与jQuery对象不能互相调用其方法。

jQuery对象的函数只有jQuery对象能够调用。

jsDOM对象转为jQuery对象：

$(js对象)

jQuery对象转为jsDOM对象：

jQuery对象[索引]

jQuery对象.get();

3）、jQuery选择器

选择器：选中某个或某组内容

分类：

基础选择器

层次选择器

表单选择器

过滤选择器

属性选择器

基础选择器：

   id选择器

   元素名称选择器

   类选择器

   选择所有元素

   组合选择器

层次选择器：

   后代选择器

   子代选择器

   相邻选择器

   同辈选择器

表单选择器：

   文本框选择器

   密码框选择器

   单选按钮选择器

   复选框选择器

   提交按钮选择器

   图像域选择器

   重置按钮选择器

   按钮选择器

   文件域选择器

属性选择器：

[属性名] 包含这个属性的被选中

[属性名="值"]  包含指定属性的元素被选中

过滤选择器：

$("对象:过滤条件");

odd 匹配下标奇数元素

even  匹配下标偶数元素

eq(index)   匹配下标元素

gt(index)   匹配下标大于输入索引的元素

checked  匹配被选中的元素

4）、jQuery操作元素的属性

属性的分类：

固有属性 --> 标签提供的属性

共有属性 --> 各标签都有的属性

自定义属性  --> 自己定义的属性

attr(属性名称)

获取属性值

操作checkbox时，选中的选项返回checked，没有选中的选项返回undefined

prop(属性名称)

获取具有true和false两个属性的属性值

attr()与prop()的区别：

一 attr可以操作固有属性和自定义属性

   prop只能操作固有属性

二 attr操作布尔属性（checked）时，选中返回checked，没选择返回undefined

   prop操作布尔属性（checked）时，选中返回true，没选择的返回false。

移除属性：

removeAttr(属性名)

移除指定的属性

5）、jQuery操作元素的样式

attr("class")

获取class属性的值

attr("class","样式名")

修改class属性的值，修改样式

addClass("样式名")

添加样式名称

css()

添加具体的样式

removeClass(class)

移除样式名称

6）、jQuery操作元素的内容
html()和text()方法设置元素内容

html()

获取元素的html内容

text()

获取元素的文本内容，不包含html

html()与text()之间的区别

html可以识别纯文本，以及html标签的内容

text只能识别纯文本

html("html,内容")

设定元素的html内容

text("text 内容")

设置元素的文本内容，不含html

val()

获取元素的值

val(值)

设定元素的值

7）、jQuery创建、添加与删除元素

创建元素

$('创建内容')

添加内容：

prepand(content)

在被选元素的内部开头插入元素或内容

$(content).preparedTo(selector)

把content元素插入selector开头

append(content)

在被选元素内部的结尾插入元素或内容

$(content).appendTo(selector)

把content元素插入到selector尾部

before()

在元素前插入指定的元素或内容

$(selector).before(content)

after()

在元素后插入指定的元素或内容

$(selector).after(content)

删除元素：

remove() 

删除所选元素和指定子元素，包括标签

empty() 

清空所选元素的内容

8）、jQuery元素遍历

$selector.each(function(index,element))

参数function是遍历的回调函数

index为遍历元素的编号，从0开始

element是当前元素，此时是DOM元素

9）、jQuery事件绑定

ready 加载事件 --> window.onload

$(function(){})

jquery(function(){})

$(document).ready(function(){})

ready与window.onload的区别：

window.onload：待DOM结构与资源全部加载完成后触发

ready：DOM结构加载完成就触发

格式：

对象..bind("事件名称",function(){

   触发函数

})

链式绑定：连续给一个元素为多个动作绑定多个触发函数

10）、jQuery Ajax

jQuery Ajax：异步请求

格式：

<script>

$.ajax({ //配置请求的参数数据

   type:"GET"|"POST" //配置请求方式

   url: //请求服务器的位置

   data: //请求数据

   dataType: //请求数据的类型

   success:function(){

      //请求成功后的回调函数

      //参数data：服务器相应的数据

   }

   error:function(){

      //请求失败后的回调函数

   }

});

</script>

data.json代表服务器相应的数据

$.get 简单的get请求功能

$.post 简单的post请求功能

$.getJSON   表示请求返回的数据格式是JSON格式

11）、BootStrap

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。