JQ学习笔记

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;

,下一张图淡入)

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

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

[外链图片转存中…(img-3hNTZtlA-1614485683819)]

png的背景设为透明

background-color:transparent;
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 1024 设计师:白松林 返回首页