您的位置 首页 java

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

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();

<script type=”text/javascript”>

$(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()

<script type=”text/javascript”>

$(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>

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>

<title>Insert title here</title>

<style type=”text/css”>

#e02{

border: 1px solid #000000;

height: 200px;

width: 200px;

}

</style>

<script type=”text/javascript” src=”../js/jquery-1.8.3.js”></script>

<script type=”text/javascript”>

$(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>

<input id=”e01″ type=”text” /><span id=”textMsg”></span> <br/>

<hr/>

<div id=”e02″ ></div><span id=”divMsg”></span> <br/>

<hr/>

<input id=”e03″ type=”button” value=”可以点击”/><span id=”buttonMsg”></span> <br/>

</body>

</html>

focus和focusin 得到焦点

focus 获得焦点

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

blur和focusout 失去焦点

<script type=”text/javascript” src=”../js/jquery-1.8.3.js”></script>

<script type=”text/javascript”>

$(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 移除 同上

<script type=”text/javascript” src=”../js/jquery-1.8.3.js”></script>

<script type=”text/javascript”>

$(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…..

<script type=”text/javascript” src=”../js/jquery-1.8.3.js”></script>

<script type=”text/javascript”>

$(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]):切换 若有则淡出,若无则淡入

<!– 导入js库 ,注意:使用src属性之后,标签体中不能写入内容–>

<script type=”text/javascript” src=”../js/jquery-1.8.3.js”></script>

<script type=”text/javascript”>

$(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>

案例:抽奖信息显示

<!– 导入js库 ,注意:使用src属性之后,标签体中不能写入内容–>

<script type=”text/javascript” src=”../js/jquery-1.8.3.js”></script>

<script type=”text/javascript”>

$(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…..

文章来源:智云一二三科技

文章标题:JavaWeb18-jquery学习笔记(Java全栈开发)

文章地址:https://www.zhihuclub.com/192488.shtml

关于作者: 智云科技

热门文章

发表回复

您的电子邮箱地址不会被公开。

网站地图