当前位置：网站首页 > 热门文章 > 正文

JavaWeb18-jquery学习笔记(Java全栈开发)

bigegpt 2024-10-24 09:02 11 浏览

jquery

一.筛选

筛选与之前的选择器雷同,筛选提供的都是函数.

1. 过滤

eq(index|-index):获取指定索引的元素.如果是正数,索引从0开始;若是负数,倒着数从1开始.

first():第一个

last():最后一个

hasClass(...):判断元素是否含有特定的样式

filter(...):筛选出与指定表达式匹配的元素集合

is(...):判断元素是否符合指定的选择器

has(...):含有特定后代的元素

not(...):删除与指定表达式匹配的元素

slice(start,end):从给定的数组中，按照范围截取元素。 [start,end)

map(fn):将一组元素转换成其他数组

过滤:

eq(index):索引等于

获取指定索引的元素.如果是正数,索引从0开始;若是负数,倒着数从1开始.

//<input type="button" value=" 选择索引值等于3的div元素" id="b1"/>

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

$("div").eq(3).css("background-color","#ff0");

});

first():第一个

// <input type="button" value=" 选择第一个div元素" id="b2"/>

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

$("div").first().css("backgroundColor","#f0f");

});

last():最后一个

// <input type="button" value=" 选择最后一个可见的div元素" id="b3"/>

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

//$("div:visible").last().css("backgroundColor","#3ff");

$("div").last().css("backgroundColor","#3ff").show(1000);

});

hasClass('class值'):是否含有指定的class属性

// <input type="button" value=" 判断id为one的div的样式是否为one" id="b4"/>

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

//alert($("#one").hasClass("one"));

alert($("#one").is(".one"));

});

filter('selecter'):过滤

// <input type="button" value=" 选择class为none的所有div并展示出来" id="b5"/>

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

$("div").filter(".none").css("backgroundColor","#3ff").show();

});

is('selecter'): 是否匹配选择器表达式

// <input type="button" value=" 判断样式为hide的div 下一个兄弟是否是span" id="b6"/>

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

alert($("div.hide").next().is("span"));

//alert($("div.hide+span").is("span"));

});

has('selecter'):后代中含有指定选择器的

// <input type="button" value=" 选择所有div中含有div的" id="b7"/>

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

$("div").has("div").css("background-color","#ff0");

});

not('selecter'):排除匹配的选择器

// <input type="button" value=" 选择样式为one的div没有title属性的div" id="b8"/>

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

$("div.one").not("[title]").css("background-color","#ff0");

});

slice(startindex,endindex):截取

// <input type="button" value=" 选择索引号为3,4的div" id="b9"/>

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

$("div").slice(3,5).css("background-color","#ff0");

});

2. 查找

children([...]):获取他的所有孩子

closest(...):从元素本身开始，逐级向上级元素匹配，并返回最先匹配的元素

find(...):查找后代

next():下一个兄弟

nextAll():后面所有的兄弟

nextUntil(...):从下一个兄弟开始,直到指定元素结束

parent():获取父元素

parents():匹配元素的祖先元素的元素(不包含根元素)

prev():上一个兄弟

prevAll():前面的所有兄弟

prevUntil():从上一个兄弟开始,直至指定元素结束

siblings():所有的兄弟

查找:

带有until了解下

☆children():孩子

例如:选择 id=two 所有子元素

$("#two").children()

☆find():查找后代

例如:选择 id=two 子元素含有title=other 元素

$("#two").find("[title='other']")

☆next():下一个兄弟

例如: $("#two").next();

nextAll():小弟们

例如: $("#two").nextAll();

nextUntil():直到那个结束

☆parent():父元素

例如:选择 id=two 父元素

$("#two").parent();

parents():先辈

☆prev():上一个兄弟

例如: $("#two").prev();

prevAll():前面的所有兄弟

prevUntil():从上一个兄弟开始,直至指定元素结束

☆siblings():所有的兄弟

例如: $("#two").siblings();

$(document).ready(function(){

//<input type="button" value=" 选择 id=two 所有子元素" id="b1"/>

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

$("#two").children().css("background-color","#ff0");

});

// <input type="button" value=" 选择 id=two 子元素title=other 元素 " id="b2"/>

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

$("#two").find("[title='other']").css("background-color","#ff0");

});

// <input type="button" value=" 选择 id=two 下一个兄弟" id="b3"/>

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

$("#two").next().css("background-color","#ff0");

});

// <input type="button" value=" 选择 id=two 后面的所有兄弟" id="b4"/>

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

$("#two").nextAll().css("background-color","#ff0");

});

// <input type="button" value=" 选择 id=two 上一个兄弟" id="b5"/>

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

$("#two").prev().css("background-color","#ff0");

});

// <input type="button" value=" 选择 id=two 前面的所有兄弟" id="b6"/>

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

$("#two").prevAll().css("background-color","#ff0");

});

// <input type="button" value=" 选择 id=two 所有兄弟" id="b7"/>

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

$("#two").siblings().css("background-color","#ff0");

});

// <input type="button" value=" 选择 id=two 父元素" id="b8"/>

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

$("#two").parent().css("background-color","#ff0");

});

</script>

closest和parents的主要区别是：

1，前者从当前元素开始匹配寻找，后者从父元素开始匹配寻找；

2，前者逐级向上查找，直到发现匹配的元素后就停止了，后者一直向上查找直到根元素，然后把这些元素放进一个临时集合中，再用给定的选择器表达式去过滤；

3，前者返回0或1个元素，后者可能包含0个，1个，或者多个元素。

3. 串联

A.add(B) 将A和B拼凑在一起，等效 $(A,B)

A.children().andSelf() 所有孩子，再添加自己

A.children().end()... 使用end后将返回A位置

contents() 获得所有节点（子元素、文本） <div>abc<a></a> xxx</div>

串联:

add(e|e|h|o[,c]) 相当与 $("#id,.class")

例如:选择 id=one和two 的div

$("#one").add("#two")

andSelf() 把自己添加进入

例如:选择id=one 所有的孩子，以及one自己

$("#one").children().andSelf()

(了解)contents()

☆end() 往回退一步

$("#two").next().css().end()

$(document).ready(function(){

//<input type="button" value=" 选择 id=one和two 的div" id="b1"/>

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

$("#one").add("#two").css("background-color","#c3f");

});

// <input type="button" value=" 选择id=one 所有的孩子，以及one自己" id="b2"/>

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

$("#one").children().andSelf().css("background-color","#ff0");

});

// <input type="button" value=" 选择id=one 所有的孩子，设置颜色为红，设置one自己为黄" id="b3"/>

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

$("#one").children().css("background-color","#f00").end().css("background-color","#ff0");

});

// <input type="button" value=" 获得id=two 子节点个数" id="b4"/>

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

alert($("#two").contents().length);

});

</script>

二.事件

1. 常见事件

重点掌握(5)

click:单击

focus:获取焦点

blur:失去焦点

submit:表单提交

<html>

<head>

<title>Insert title here</title>

#e02{

border: 1px solid #000000;

height: 200px;

width: 200px;

}

</style>

$(document).ready(function(){

$("#e01").blur(function(){

$("#textMsg").html("文本框失去焦点：blur");

}).focus(function(){

$("#textMsg").html("文本框获得焦点：focus");

}).keydown(function(){

$("#textMsg").append("键盘按下：keydown");

}).keypress(function(){

$("#textMsg").append("键盘按住：keypress");

}).keyup(function(){

$("#textMsg").append("键盘弹起：keyup");

}).select(function(event){

//支持谷歌

var sub = $(this).val().substring(event.target.selectionStart,event.target.selectionEnd);

$("#textMsg").html("文本内容被选中：select ， " + sub);

});

var i = 0;

$("#e02").mouseover(function(){

$("#divMsg").html("鼠标移上：mouseover");

}).mousemove(function(){

//$("#divMsg").html("鼠标移动：mousemove , " + i++ );

}).mouseout(function(){

$("#divMsg").html("鼠标移出：mouseout");

}).mousedown(function(){

$("#divMsg").html("鼠标按下：mousedown");

}).mouseup(function(){

$("#divMsg").html("鼠标弹起：mouseup");

});

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

$("#buttonMsg").html("单击：click");

}).dblclick(function(){

$("#buttonMsg").html("双击：dblclick");

});

</script>

</head>

<body>

<hr/>

<hr/>

</body>

</html>

focus和focusin 得到焦点

focus 获得焦点

foucsin 获得焦点。可以在父元素上检测子元素获取焦点的情况

blur和focusout 失去焦点

$(document).ready(function(){

var i=1;

//$("#outerDiv").focus(function(){

// $("#showSpan").html(i++);

//});

$("#outerDiv").focusin(function(){

$("#showSpan").html(i++);

});

</script>

mouseover 和 mouseenter 移进

mouseover , 如果鼠标指针穿过任何子元素，同样会触发 mouseover 事件

mouseenter ,如果鼠标指针穿过任何子元素，不会触发 mouseenter 事件

mouseout和mouseleave 移除同上

$(document).ready(function(){

var i= 0;

//$("#outerDiv").mouseover(function(){

// $("#showSpan").html(i++);

//});

$("#outerDiv").mouseenter(function(){

$("#showSpan").html(i++);

});

</script>

2. 页面载入

ready(fn):页面载入,在一个页面中可以使用多次

常用格式1:

$(document).ready(function(){

....

})

常用格式2: 格式1的简化版

$(function(){

......

});

常用格式3:完整版

jQuery(document).ready(function(){

......

});

3. 事件处理和委派

Jquery对象.事件(fn)

on:绑定多个事件

one: 绑定一次事件 one()

bind和unbind

bind:绑定事件,一直使用,直到解绑

例如:$btn1.bind(“click”,function(){}); ===$btn1.click(function(){});

unbind:解绑事件

绑定的时候可以指定别名,格式: 事件.别名

例如:

bind(“click.c1”,fn);

unbind(“click.c1”);

trigger和triggerHandler

trigger() 触发所有的事件（包括浏览器默认的）

triggerHandler() 触发所有的事件（不包括浏览器默认的）

委派

live jQuery 给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的也有效,例如给A标签添加事件，之后再追加a标签都具有相同的事件。

die 解绑

4. 事件切换

hover 在mouseover和mouseout之间进行切换

toggle 点击事件切换，点击第一次执行 fn，点击第二次执行fn2.....

$(function(){

$("#e02").hover(function(){

$("#textMsg").html(1);

},function(){

$("#textMsg").html(2);

});

$("#e02").mouseover(function(){

$(this).html(3);

}).mouseout(function(){

$(this).html(4);

})

$("#e01").toggle(function(){

$("#textMsg").html("函数1")

},function(){

$("#textMsg").html("函数2")

},function(){

$("#textMsg").html("函数3")

});

</script>

三.效果

基本：改变高和宽

show(速度，[fn]) 显示当显示成功后触发fn

hide() 隐藏

toggle(speed [,fn]) 切换,如果隐藏就显示，如果显示就隐藏。

滑动：改变高度

slideDown ，显示（从上往下）

slideUp，隐藏（从下往上）

slideToggle() 切换

淡入淡出：改变透明度

fadeIn 显示

fadeOut 隐藏

fadeToggle 切换

fadeTo 指定对象透明度

效果:

基本:宽和高都变

show([毫秒值],[fn]) 展示

hide([毫秒值],[fn]) 隐藏

toggle([毫秒值],[fn]) 切换显示效果若显示则隐藏若隐藏则显示

滑入滑出:高

slideDown([毫秒值],[fn]):从上到下滑入

slideUp([毫秒值],[fn]):从下到上滑出

slideToggle([毫秒值],[fn]):切换若有则滑出,若无则滑入

淡入淡出

fadeIn([毫秒值],[fn]):淡入

fadeOut([毫秒值],[fn]):淡出

fadeTo([毫秒值],小数,[fn]):在指定的时间内,颜色淡化到指定的数字

fadeToggle([毫秒值],[fn]):切换若有则淡出,若无则淡入

$(document).ready(function(){

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

//$("#b1Div").hide(2000);

$("#b1Div").toggle(1000);

});

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

//$("#b2Div").slideUp(2000);

$("#b2Div").slideToggle(2000);

});

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

//淡出

//$("#b3Div").fadeOut(2000);

//颜色淡化指定值

//$("#b3Div").fadeTo(2000,0.4)

$("#b3Div").fadeToggle(2000);

});

</script>

案例:抽奖信息显示

$(document).ready(function(){

//创建5个div

for(var i=1;i<6;i++){

createDiv();

}

//周期性的变化

var timer=setInterval(showDiv,100);

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

clearInterval(timer);

});

var i=1;

//创建一个div

function createDiv(){

$div=$("<div>"+(i++)+"</div>");

$div.css({

"width":400,

"height":100,

"border":"1px solid #000",

"margin":5,

}).appendTo($("body"));

}

//div变化

function showDiv(){

//把第一个div滑出完成之后将其淡入到最后一个

$("div").first().slideUp(100,function(){

$(this).appendTo($("body")).fadeIn(100);

});

}

</script>

四.ajax

1. load

要求:

jquery对象调用

格式:

load(url,[data],[callback])

参数:

url:请求路径

data:请求参数格式为json

若有此参数,请求方式为post

若无此参数,请求方式为get

callback:成功之后回调,具有三个参数

2. $.get

发送get请求

格式:

$.get(url,[data],[callback],[type]);

参数:

type:返回内容的格式有如下取值

xml,html,script,json,text,_default

3. $.post

发送post请求

格式:

$.post(url,[data],[callback],[type]);

4. $.ajax

底层是原始的ajax请求方式

格式1:

$.ajax(url,[settings])

格式2:setting可以使用json格式

jQuery.ajax(settings)

参数:

async 设置是否异步，true：表示异步（ajax）默认 true

type 设置请求方式。例如：get、post

url 设置请求路径

data 请求参数

dataType 设置数据转换类型，例如：xml, html, script, json

success 成功回调 fn

error 错误回调 fn

例如:

$.ajax({

"async":true,

"type":"POST",

"url":url,

"data":params,

"success":function(data){

alert(data);

"error" : function(){

alert("错误");

}

});

5. 表单序列化

erialize() 将表单中所有内容转成字符串。

所有内容：有name，有值（非空）--文本有数据，单选多选选中，下拉列表选中等

字符串：key=value&key=value&....

serializeArray()将表单中所有内容转成json数组

6.可以在前台将所有参数编码成utf-8

encodeURL.....

jquery鼠标移入移出

上一篇：前端面试题《JQuery》前端js面试题2020
下一篇：jQuery基础教程学习笔记(五)事件的绑定和解绑

JavaWeb18-jquery学习笔记(Java全栈开发)

jquery

一.筛选

二.事件

三.效果

四.ajax

相关推荐

idea本地配置连接远程hadoop集群的一些网络问题解决汇总

无缓存不行?例行升级的入门级阿斯加特AN2 SSD装机点评

Ceph运维手册(基于P版本)

Docker 命令大全（docker命令大全记录表）

替代Docker build的Buildah简单介绍

Docker Desktop安装使用指南:零基础教程

大数据开发前要做什么准备?8台Hadoop服务器进行集群规划前配置

Tensorflow分类loss函数总结 tensorflow绘制loss曲线

R语言学习笔记(七) -离散型数据的模型预测2

iOS Runtime详解