HTML5第五次培训(jQuery)
1. 修改样式,$("").css()
//一次性使用多个样式*/
//参数是一个json格式
<body>
<div id="mydiv">
</div>
<scripttype="text/javascript"src="jquery-1.12.3.min.js"></script>
<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
<div id="mydiv">
<p>hello<span>world</span></p>
</div>
<scripttype="text/javascript" src="jquery-1.12.3.min.js"></script>
<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>
<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>
<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>
<div id="desk">
<divclass="card"></div>
</div>
<scripttype="text/javascript"src="jquery-1.12.3.min.js"></script>
<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>
<div></div><div></div>
$("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()方法
<script>
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自动执行
<input type="button" />
<scriptsrc="js/jquery-1.12.3.min.js"></script>
<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();