HTML5第五次培训（jQuery）

来源：互联网发布：网络心理咨询平台推荐编辑：程序博客网时间：2024/05/21 07:57

HTML5第五次培训（jQuery）

1. 修改样式，$("").css()

//一次性使用多个样式*/

//参数是一个json格式

<body>

</div>

<scripttype="text/javascript"src="jquery-1.12.3.min.js"></script>

var w="200px";

var h="200px";

$("#mydiv").css(

{

"width":w,

"height":h,

"background-color":"red"

}

)

</script>

2. html()和text()方法

html()类似js中innerHTML

text()类似JS中innerTEXT

<p>hello<span>world</span></p>

</div>

<scripttype="text/javascript" src="jquery-1.12.3.min.js"></script>

//alert($("#mydiv").html());//<p>hello<span>world</span></p>

//$("#mydiv").html("<inputtype='text' />")//修改内容，变成一个文本框

//alert($("p").text());//helloworld

alert($("p").html());//hello<span>world</span>

</script>

3. val()方法

类似JS中value

<divid="mydiv">

<inputtype="text" value="hello" />

</div>

<scripttype="text/javascript"src="jquery-1.12.3.min.js"></script>

alert($("#mydivinput").val());//hello

//alert($("#mydivinput").val("world"));//修改为world

</script>

4. each()方法实现遍历

<div>

hello

</div>

<div>

world

</div>

<div>

<p>neusoft</p>

</div>

<scripttype="text/javascript"src="jquery-1.12.3.min.js"></script>

//alert($("div").length);//3

$("div").each(function(index){//遍历DIV

if(index!=1)

{

alert($(this).text());//将js变成jq包装起来

}

});

</script>

遍历特定的参数为index，从0开始

$("div").each(function(index){

if(index!=1)

{

alert($(this).text());//hello neusoft

}

});

5. clone()复制，克隆

<style>

.card

{

width: 80px;

height: 120px;

background-color:red;

border-radius: 10px;

float: left;

margin: 30px;

}

</style>

</head>

<body>

<divclass="card"></div>

</div>

<scripttype="text/javascript"src="jquery-1.12.3.min.js"></script>

var$div=$(".card");//用变量将复制前的card保存起来

for(var i=0;i<19;i++)

{

//$div.clone().appendTo("#desk");

$("#desk").append($div.clone());//两种方法一样效果

}

</script>

注意：

for(vari=0;i<19;i++)

{

$(".card").clone().appendTo("#desk");//这种情况会出现无数个card,因为复制的是每次的card第一次复制1个，变成2个，再复制2个，变成4个，以此循环，19次，会复制出无限个，所以讲变量存储起来很重要

}

6. appendTo与append（放到后面） prependTo与prepend（放到前边）

before()与after()方法

注意与原生的:insertBefore和insertAfter作对比

//$div.clone().appendTo("#desk");

$("#desk").append($div.clone());//两种方法一样效果

Append：向每个匹配的元素内部追加内容。

这个操作与对指定的元素执行appendChild方法，将它们添加到文档中的情况类似。

向所有段落中追加一些HTML标记。

<p>I would like to say: </p>

$("p").append("<b>Hello</b>");

结果：<p>I would like to say: <b>Hello</b></p>

appendTo把所有匹配的元素追加到另一个指定的元素元素集合中。

<p>I wouldlike to say: </p>

$("p").appendTo("div");

结果：

<div><p>I would like to say: </p></div>

<div><p>I would like to say:</p></div>

prepend

向每个匹配的元素内部前置内容。

这是向所有匹配元素内部的开始处插入内容

<p>I wouldlike to say: </p>

$("p").prepend("<b>Hello</b>");

结果：

<p><b>Hello</b>Iwould like to say: </p>

before()在每个匹配的元素之前插入内容。

<p>I wouldlike to say: </p>

$("p").before("<b>Hello</b>");

结果：

<b>Hello</b><p>Iwould like to say: </p>

注意查看以上几个结果的区别，区分具体元素的使用

7. attr方法()与data()方法

alert($(".card").attr("class"));//attr可取任何属性

alert($(".card").attr("ss","1234"));//创建属性

$(".card").data("su","1234");//存值也是创建属性 data存隐藏值属性的控制以及存储一些隐藏的值

//存值在界面上是看不到的，存在data节点里面

alert($(".card").data("su"));//取值

</script>

//自己存下值自定义属性可以藏值

8. find与filter方法

$("#desk").find("p");

$("#deskp").filter(".selected");

Find:

搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

Filter:

筛选出与指定表达式匹配的元素集合。

这个方法用于缩小匹配的范围。用逗号分隔多个表达式

9. 事件链中使用end()和andSelf()实现定位

//回到事件联的起点end()

$("#desk").find("p").end();//在父级中查找

//父级和自己都会查找到andSelf();

$("#desk").find("p").andSelf();

end():

回到最近的一个"破坏性"操作之前。即，将匹配的元素列表变为前一次的状态。

andSelf()

加入先前所选的加入当前元素中

对于筛选或查找后的元素，要加入先前所选元素时将会很有用。

描述:

选取所有div以及内部的p，并加上border类

HTML 代码:

<div><p>FirstParagraph</p><p>Second Paragraph</p></div>

jQuery 代码:

$("div").find("p").andSelf().addClass("border");

结果:

<divclass="border">

<p class="border">FirstParagraph</p>

<p class="border">SecondParagraph</p>

</div>

10. One职能点击一次

Trigger自动执行

<scriptsrc="js/jquery-1.12.3.min.js"></script>

//只能点击一次

/* $('input').one("click",function(){

alert("hello");

});*/

//click自动执行

$('input').click(function(){

alert("hello");

});

$('input').trigger("click");

</script>

11. jquery方法的扩展

$.extend({

aaa:function(){alert('hello');}

});

$.aaa();

//对选择器做扩展通常用在

$.fn.extend({

aaa:function(){alert('hello');}

});

$("input").aaa();

0 0