JQ

2024-02-29 15:46:34

JQ学习笔记

JQuery函数库:对外暴露度是函数，函数，函数，函数是整个框架中最为重要的一个函数，可以获取节点，支持链式语法，连续打点【永远是$函数开头】

JQuery函数库:支持我们曾经学习过得全部选择器，用来获取响应节点

css函数，也是jq函数库提供的，用来设置匹配节点的行内样式

JQduixiang(类数组)才可以使用JQ里面的方法

下载源码地址:http://www.jq22.com/jquery-info122

学习手册:https://jquery.cuishifeng.cn/

//标签选择器
$("li").css("color","red");

//类选择器
$('.classname').css("color","red");

//id选择器
$('#idname')

//通配符
$('*')

2.1JQuery独有的选择器

可查中文手册

2.1.1 ：first||：last

概述：这两者选择器，是jq框架独有的。作用是可以获取匹配节点的第一个节点和最后一个节点

语法格式：

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

2.1.2 selector:odd||selector:even

odd-计数

even-偶数

2.1.3 selector:gt(index)|| selector:it(index)

:gt(index)大于索引值

:it(index)小于索引值

$("ul li:gt(3)").css("color",'white');

2.1.4 :eq(index)

匹配某一个准确的索引值节点

$("ul li:eq(3)").css("color",'white');

2.1.5实现练习

解决td元素之间的缝隙

border-collapse:collapse;

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

2.2css方法

是jq框架提供的，作用是设置匹配节点的添加行内样式

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

这种智能添加一个样式，所以不适用

同时设置多个样式

传递JSON数据格式，可以省略px单位，中间带有-的样式变为驼峰写法

$("div").css({
	color:'blue',
	background:'cyan',
	fontSize:30,
	opacity:3
});

2.3attr方法

attribute属性

原生没有该方法，作用是获取||设置节点属性

//获取节点属性值
console.log($("input:eq(1)").attr("type"));
//动态设置节点属性值
$("input:eq(1)").attr("type","text");

2.4操作节点文本的方法

操作文本节点的两种情况：

非表单（非input）元素文本-使用的是innerHTML属性，html方法

表单（input）元素文本-使用的是value属性，val方法

获取表单元素的文本
console.log($("input").val());
修改表单元素的文本
$("input").val("我是curry");
获取||设置非表单元素文本
console.log($("div").html());
$("div").html("又是我curry");

2.5特效函数

2.5.1slideDown||slideUp滑动（向下拉，向上卷）

语法格式：

$("selector").slideDown(time,callBack)

第一个参数：每一个动画的时间（可选）

第二个参数：回调函数，当动画结束以后立即执行一次（可选）

匹配第一个按钮：绑定单机事件
$("button:eq(0)").click(function(){
	//匹配div，将div(class=cur)进行卷起操作
	$(".cur"),slideUp(2000,function(){
		//当前这个函数，当动画结束后立即执行一次
		console.log('动画结束');
	});
});

正方形变圆形

borderRadius:50%

2.5.2fadeOut||fadeIn淡入淡出

语法格式

$(selector).fadeIn(time,callback)

$("button:eq(2)").click(function(){
	$(".cur").fadeOut(2000,function(){
		//回调函数
		console.log("animation结束了");
	});
});

2.6事件绑定

js有的事件，jq都支持

2.7淡入淡出轮播图案例

业务分析：

1、左右按钮需要绑定单机事件

2、利用特效函数淡入淡出（当前现实的这张图淡出之后，下一张图淡入）

变量外层不能加引号，不然就是字符串了

var idx=0；
错误：$("li:eq(idx)").
正确：$("li:eq("+idx+")").

png的背景设为透明

background-color:transparent;

，下一张图淡入）