文章目录

jQuery（js框架）1、什么是jQuery2、jQuery基本语法3、jQuery中的选择器1、基础选择器2、扩展选择器

4、jQuery操作样式1、直接设置样式2、设置类样式

5、jQuery操作属性6、jQuery操作容器组件1、给容器组件赋值2、获得容器组件的内容

7、jQuery操作表单组件8、jQuery关联事件1、直接关联2、动态关联事件3、动态关联事件24、在函数中动态给其他控件绑定事件5、动态取消事件6、使用on也可以动态给事件绑定事件7、一个控件同时关联多个事件8、jQuery组合事件

9、jQuery操作动画10、下拉菜单11、自定义动画12、下载jQuery插件13、jQuery组件的转换14、jQuery操作节点1、创建节点2、添加节点3、删除节点4、替换节点5、克隆节点6、查询节点

15、动态向下拉列表中添加选项16、购物车

jQuery（js框架）

1、什么是jQuery

写更少的代码，实现更多的事

jQuery

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

jQuery 库包含以下特性：

HTML 元素选取

HTML 元素操作

CSS 操作

HTML 事件函数

JavaScript 特效和动画

HTML DOM 遍历和修改

AJAX

Utilities

2、jQuery基本语法

当页面加载时

1、旧方法：

window.onload=function(){

要执行的代码

}

2、新方法：

$(document).ready(function(){

要执行的代码

})

//标准写法

$(document).ready(function(){

要执行的代码

})

$()----------------jQuery中的工厂函数

document-----------它是jQuery的选择器，用于获得元素

reday---------------它是一个事件，用于指定函数在什么时候执行

function------------他表示事件触发时，要执行的具体代码

//简化写法

$(function(){

要执行的代码

})

3、jQuery中的选择器

作用：获得页面上的元素

let obj=$(选择器的名称);

1、基础选择器

1、id选择器

根据id获取一个元素

let obj=$('#id名称');

设置颜色

obj.css("coclor","red");

​ 2、类选择器

根据指定类样式名称，获得一组元素

let obj=$(".mycss");

​ 3、标签选择器（元素选择器）

根据标签，获得一组元素

let obj=$("div");

​ 4、全局选择器

选择当前页面所有元素

let obj=$("*");

​ 5、并集选择器

获取一组指定都元素

let obj=$("#mydiv,.mycss,h4");

2、扩展选择器

1、层次选择器

-------1、后代选择器

语法：$("上级选择器 指定的选择器")

作用：获得上级选择器下面包含的所有指定后代

特点：不论是直接包含，还是间接包含都属于后代

-------2、父元素选择器

语法：$("父元素>子元素")

作用：只选择父元素为指定的子元素

-------3、相邻平辈选择器

语法：$("选择器1+选择器2")

作用：获得选择器1后面相邻的选择器2

注意：只能获得一个相邻的平辈元素

-------4、后续平辈元素选择器

语法：$("选择器1~选择器2")

作用：获得选择器1后面所有匹配的指定平辈元素

2、基础过滤选择器

获得下标为0的选择器

$("li:eq(0)").css("color","blue");

获得下标大于2的选择器

$("li:gt(2)").css("color","blue");

获得下标小于2的选择器

$("li:lt(2)").css("color","blue");

获得下标不等于2的选择器/*先找到为2的元素，再设置不等于2*/

$("li:not(li:eq(2))").css("color","blue");

选择第一个选择器

$("li:first").css("color","red");

选择最后一个选择器

$("li:last").css("color","red");

选择下标为奇数的选择器

$("li:odd").css("color","red");

选择下标为偶数的选择器

$("li:even").css("color","red");

3、可见性过滤器

:hidden

用于：选择页面上所有隐藏的元素

$("div:hidden").show(1000)

:visible

用于：选择页面上所有显示的元素

$("div:visible").hide(1000)

4、属性选择器

1、选择包含href属性的标签

$("[href]").css("color","red");

2、选择href属性，值为#的标签

$("[href='#']").css("color","red");

3、选择href属性，值以a开头的标签

$("[href^='a']").css("color","red");

4、选择href属性，值以b结尾的标签

$("[href$='b']").css("color","red");

5、选择href属性，值的任何位置只要包含a的标签

$("[href*='a']").css("color","red");

6、选择name属性，值为name的元素

$("[name='name']").css("color","red");

7、选择包含type属性的元素

$("[type]").css("color","red");

5、表单选择器

表单元素择器以 ”：“开头

//选择文本框

$(":text").css("color","red");

//选择密码框

$(":password").css("color","red");

//选择按钮

$(":button").css("color","red");

4、jQuery操作样式

1、直接设置样式

1、直接设置一种样式

$("选择器").css("样式名称","值");

$("div").css("color","red");

2、设置多种样式（旧方法）

$("div").css("color","red").css("font-size","50px");

3、设置多种样式（新方法）

$("div").css({

"color":"red",

"border":"1px"

});

4、获得指定样式的值

//获取当前div的字体大小

let size=$("div").css("font-size");

2、设置类样式

1、添加一个或多个样式

//样式

.one{

color:red;

}

//添加样式（添加多个样式用空格隔开）

$("div").addClass("one two");

2、移除一种或多种类样式

//移除样式（移除多个样式用空格隔开）

$("div").removeClass("one two");

5、jQuery操作属性

1、添加单个属性（这两种方法效果一样）

$("选择器").attr("属性名"，"属性值");

$("table").attr("border","1px");

$("选择器").prop("属性名"，"属性值");

$("table").prop("border","1px");

2、添加多个属性（旧方法）

//先添加一个，后面用小数点连接

$("选择器").attr("属性名"，"属性值").attr("属性名"，"属性值");

3、添加多个属性（新方法）

$("选择器").attr({"属性名":"值","属性名":"值"});

$("table").attr({"border":"1px","width":"60%","algin":"left"});

4、获得某一个属性值

let val=$("选择器").attr("属性值");

5、移除属性

$("选择器").removerAttr("属性名1 属性名2");

6、jQuery操作容器组件

容器组件

div、span、table、tr、td、th、ol...

1、给容器组件赋值

//会解析内容

$(选择器).html(内容)；

$("span").html("123");

//不会解析内容

$(选择器).text(内容)；

2、获得容器组件的内容

let msg=$(选择器).html();

let msg=$(div).html();

7、jQuery操作表单组件

1、给表单控件赋值

$("选择器".val(内容);

$("#txt").val("大家好！");

2、获得表单组件的值

let txt=$("#txt").val();

//所有表单控件，除了复选框外，其他控件都是用此方法赋值

//加载函数

$(function(){

//给控件类型为button添加一个点击事件

$(":button").click(function(){

//获取表单的值是.val()方法

//获取表单name属性的值为name的控件

let name=$("[name='name']").val();

let pwd=$("[name='pwd']").val();

let age=$("[name='age']").val();

//获得单选被选中的值(:checked表示只获得选中的值)

let gender=$("[name='gender']:checked").val();

let msg="";

//获得复选框选中的值

//1、首先获得所有选中的组件--取到的是一个dom数组

let hobbies=$("[name='hobby']:checked");

//2、循环遍历所有被选中的值

for(let i=0;i

//获得dom组件

let ck=hobbies[i];

//拼接字符串 方法1

msg+=ck.value+" ";

//拼接字符串 方法2

msg+=$(ck).val()+" ";

}

//窗体换行是“\n”

alert("姓名是："+name+"\n");

})

})

8、jQuery关联事件

1、直接关联

2、动态关联事件

//动态给选择器增加事件

$(选择器).事件名(function(){

要执行的具体代码；

})

$(function(){//页面加载时触发的事件//事件直接写在控件后面

$("#btn").click(function(){

alert("鼠标被点击了..");

})

})

在关联事件中，所有事件名称前面的on都必须去掉

3、动态关联事件2

//先写一个方法，然后将事件关联到控件上

function show(){

alert("消息框")

}

$(function(){

//获得控件，关联事件

$("div").click(show);//当事件触发，调用指定方法

})

4、在函数中动态给其他控件绑定事件

bind:绑定

//给div添加点击事件

$("div").bind("click",function(){

alert(触发了事件)；

});

5、动态取消事件

unbind:卸载

//给div删除事件

$("div").unbind("click");

6、使用on也可以动态给事件绑定事件

//给控件#btn绑定点击事件

$("#btn").on("click",funcion(){

alert("触发了事件")

})

//给控件取消事件

$("#btn").unbind("click",funcion(){

alert("触发了事件")

})

on与bind区别：

bind：只能给已经存在的控件绑定事件，不能给动态添加的控件绑定事件

on：不仅可以给已存在的控件绑定事件，也能给动态产生的控件绑定事件

7、一个控件同时关联多个事件

-------------语法：

$("控件").事件名1(function(){

要执行的代码块

}).事件名2(function(){

要执行的代码块

});

--------------示例：

$("div").mouseover(function(){

alert("触发了鼠标悬停事件");

//让当前div添加类样式 this：代表触发事件的元素

$(this).addClass("show");

}).moueseout(function(){

alert("触发了鼠标离开事件")

//移除当前div样式

$(this).removeClass("show");

})

8、jQuery组合事件

//hover:是mouseover、moueseout事件的组合

$(选择器).hover(

function(){

//当鼠标悬停时触发

},

function(){

//当鼠标离开时触发

}

)

//toggleClass：是addClass、removeClass的组合

//切换类样式，如果指定类样式已存在就移除，如果不存在就添加

$(选择器).click(function(){

//切换类样式

$(this).toggleClass("show");

})

//toggle：display:none与display:block的组合

//隐藏显示组合 display:none隐藏 block显示

$("div").toggle();

9、jQuery操作动画

jQuery内置三组动画

第一组：

shwo(毫秒)--------在指定时间内显示

hide(毫秒)--------在指定时间内隐藏

第二组：

fadeIn(毫秒)---------在指定时间内淡入

fadeOut(毫秒)--------在指定时间内淡出

第三组：

slideUp()-----------在指定时间内向上收缩

slideDown()---------在指定时间内向下展开

10、下拉菜单

11、自定义动画

基本语法

----表示当前样式在多少毫秒内完成

$("选择器").animate({样式名称1：值，样式名称2，值},毫秒数);

----表示样式在多少毫秒内完成，完成用户调用指定函数

$("选择器").animate({样式名称1：值，样式名称2，值},毫秒数，function(){

});

$("div").click(function(){

$(this).animate({"width":"200px"},2000);

//表示当前div被点击后，宽度会变成200px,再次点击不会再增加

$(this).animate({"width":"+=200px"},2000);

//表示当前div被点击后，宽度会变成200px,再次点击会再增加200px

$(this).animate({"width":"+=200px"},2000)

.animate({"height":"+=100px"},2000);

//此代码表示每点击一次，宽度和高度都会改变（先变宽度，后边高度）

})

表示当前div被点击后，先往左移动，再往下移动，再变宽度和高度，最后添加样式

12、下载jQuery插件

https://www.jq22.com/

13、jQuery组件的转换

在js中如果用传统的dom语法获取的组件，称为dom组件

let obj=document.getElementById("xx");

obj.innerHTML="123";

如果采用jQuery语法获取的组件，称为jQuery组件

let $obj=$("选择器");

$obj.html("大家好！");

//这两组的语法不能直接混用，需要转换组件类型

组件转换

1、将dom组件转换成jQuery组件

let obj=document.getElementById("xx");

let $obj=$(obj);

$obj.html("123");

2、将jQuery组件转换成dom组件

let $obj=$("选择器");

var obj=$obj[0];

obj.innerHTML="1234";

14、jQuery操作节点

**什么是节点：**页面上每一个元素，都能看做是节点

通过jQuery可以对节点执行下列操作：

1、创建节点

2、添加节点

3、删除节点

4、替换节点

5、克隆节点

6、查询节点

1、创建节点

语法：

let $obj=$(创建节点的代码)

//新建节点

let $obj=$("

新节点

")

2、添加节点

//新建节点

let $obj=$("

新节点

")

向父节点的尾部添加：

子节点.appendTo(父节点);

$obj.appendTo("ol");

父节点.append(子节点);

$("ol").append($obj);

向父节点的头部添加：

子节点.prependTo(父节点);

$obj.prependTo("ol");

父节点.prepend(子节点);

$("ol").prepend($obj);

添加到指定节点之前

指定节点.before("新节点");

$("#mydiv").before($obj);

新节点.insertBefore("指定节点")

$obj.insertBefore("#mydiv");

添加到指定节点之后

指定节点.after("新节点");

$("#mydiv").after($obj);

新节点.insertAfter("指定节点")

$obj.insertAfter("#mydiv");

3、删除节点

//删除节点

指定节点.remove();

//删除列表最后一个节点，连位置都会被删除掉

$("li:last").remove();

//清空节点

指定节点.empty();

//alt+shift+f 自动格式化格式

//只会清空节点内容，但会保留位置

$("li:last").empty();

4、替换节点

//替换一个节点

指定节点.replaceWith(新节点);

//1、先创建一个新节点

let $obj=$("

新节点

")

//2、替换

$("li:first").replaceWith($obj);

//替换所有节点

新节点.replaceAll(指定节点);

//1、先创建一个新节点

let $obj=$("

新节点

")

//2、替换全部节点

$obj.replaceAll("li");

5、克隆节点

//克隆节点

let obj=指定节点.clone();

//克隆列表第一项li，并追加到列表的尾部

let $obj=$("li:first").clone();

$("ol").append($obj);

//合并为一步(先克隆在追加)

$("li:first").clone().appendTo("ol")

6、查询节点

//查找上级节点(上级)

let $变量=节点.parent();

//获得上级节点

let $obj=$("#mydiv").parent();

//获得节点的属性

let msg=$obj.attr("class");

//查找下级子节点(下级)

let objs=节点.children();//返回一个数组，包含所有的子节点

//所有子节点

let objs=$("ol").children();

//查找前一个节点(平级)

let obj=$("#mydiv").prev();

//前一个的前一个节点

let obj=$("#mydiv").prev().prev();

//查找后一个节点（平级）

let obj=$("#mydiv").next();

//查找所有与该节点的平级节点

let objs=节点.siblings();//返回的是一个数组

//遍历节点

$.each(节点数组,function(每一个节点的下标，每一个节点){

//此处获得节点是dom组件，需要转换节点

})

//获得li节点的数组

let objs=$("li");

$.each(objs,function(index,k){

//k的类型是dom组件

alert(k.innerHTML);

alert($(k).hrml());//转换jQuery

})

//从父节点中查找指定子节点

let obj=父节点.find("选择器");

//获取父节点下的子节点

let obj=$("ol").find("#mydiv");

//从父节点中找到列表项下标为1的控件

let obj=$("ol").find("li:eq(1)");

15、动态向下拉列表中添加选项

请选择：

16、购物车