jq学习总结之方法
三、方法 1、length 2、index()3、get() reverse()4、not()5、filter()6、find()7、each()8、addBack()9、attr()10、toggleClass()
11、append()12、after()/before()13、on()14、one()15、hover()16、text()/html()17、animate()18、hide()show()19、prop()等显示隐藏
1.获取元素个数length
$("img").size();
size()方法1.8以后版本已废弃，改用length
--》
<style type="text/css">
div {
border:1px solid green;
background:yellow;
margin:5px;
padding:20px;
text-align:center;
height:20px;
width:20px;
float:left;
}
</style>
<body>
页面中一共有<span>0</span>个div块。点击鼠标添加div。
<script>
$(function () {
document.onclick = function () {
var i = $("div").length + 1;
$(document.body).append($("<div>" + i + "</div>"))
$("span").html(i);
}
})
</script>
</body>
2、index()
div{
border:1px solid #003a75;
background:#fcff9f;
margin:5px; padding:5px;
text-align:center;
height:20px; width:20px;
float:left;
}
<div>0</div><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
<script>
$(function(){
$("div").click(function(){
var idx = $("div").index(this);
$("span").html(idx.toString());
})
})
</script>
3.get() reverse()
div {
border:1px solid green;
color:aquamarine;
margin:5px;
padding:5px;
height:20px;
width:20px;
float:left;
}
<div style="background:#FFFFFF">1</div>
<div style="background:#CCCCCC">2</div>
<div style="background:#999999">3</div>
<div style="background:#666666">4</div>
<div style="background:#333333">5</div>
<div style="background:#000000">6</div>
<script>
function disp(divs) {
for (var i = 0; i < divs.length;i++){
$(document.body).append($("<div style='background:"+divs[i].style.background+";'>"+divs[i].innerHTML+"</div>"));
}
}
$(function () {
var aDiv = $("div").get(); //转化为div对象数组
disp(aDiv.reverse()); //反序，传给处理函数
})
</script>
4、not()方法
div{
background:#fcff9f;
margin:5px; padding:5px;
height:40px; width:40px;
float:left;
}
.green{ background:#66FF66; }
.gray{ background:#CCCCCC; }
#blueone{ background:#5555FF; }
.myClass{
border:2px solid #000000;
}
<body>
<div></div>
<div id="blueone"></div>
<div></div>
<div class="green"></div>
<div class="green"></div>
<div class="gray"></div>
<div></div>
$(function(){
$("div").not(".green, #blueone").addClass("myClass");
});
</body>
$("li[title]").not("[title*=isaac]") //所有设置了title 属性的li标记，但不包括title值中任意匹配字符串isaac的。
注意：not()方法所接受的参数不包含特定的元素，只能是通用的表达式。
5、过滤 filter()方法
div{
margin:5px; padding:5px;
height:40px; width:40px;
float:left;
}
.myClass1{
background:#fcff9f;
}
.myClass2{
border:2px solid #000000;
}
<body>
<div></div>
<div class="middle"></div>
<div class="middle"></div>
<div class="middle"></div>
<div class="middle"></div>
<div></div>
<script>
$(function(){
$("div").addClass("myClass1").filter("[class*=middle]").addClass("myClass2");
});
</script>
</body>
$("li").filter("[title*=isaac]") 等同 $("li[title*=isaac]") //注意：filter中的参数，不能直接是等于匹配，只能是前匹配^= 后匹配&=，任意匹配*=
div{
margin:5px; padding:5px;
height:40px; width:40px;
float:left;
}
.myClass1{
background:#fcff9f;
}
.myClass2{
border:2px solid #000000;
}
<div id="first"></div>
<div id="second"></div>
<div id="third"></div>
<div id="fourth"></div>
<div id="fifth"></div>
$(function(){
$("div").addClass("myClass1").filter(function(index){
return index == 1 || $(this).attr("id") == "fourth";
}).addClass("myClass2");
});
6、find()
.myClass{
background:#ffde00;
}
<body>
<p><span>Hello</span>, how are you?</p>
<script>
$(function(){
$("p").find("span").addClass("myClass");
});
</script>
</body>
7、each() 遍历
img{
border:1px solid #003863;
}
<img src="01.jpg" id="Tsinghua01">
<img src="02.jpg" id="Tsinghua02">
<img src="03.jpg" id="Tsinghua03">
<img src="04.jpg" id="Tsinghua04">
<img src="05.jpg" id="Tsinghua05">
<script language="javascript">
$(function(){
$("img").each(function(index){
var i= parseInt(index)+1;
this.title = "这是第" + i+ "幅图，id是：" + this.id;
});
});
</script>
8、andSelf()已废弃 改为addBack() 把之前的元素集添加到当前集合中
.myBackground{
background:#ffde00;
}
.myBorder{
border:2px solid #0000FF;
}
p{
margin:8px; padding:4px;
font-size:12px;
}
<div>
<p>第一段</p>
<p>第二段</p>
<script>
$(function(){
$("div").find("p").addClass("myBackground").andSelf().addClass("myBorder");
});
</script>
</div>
9、attr()设置或返回被选元素的属性和值
<div>第0项 <span></span></div>
<div>第1项 <span></span></div>
<div>第2项 <span></span></div>
$(function(){
$("div").attr("id",function(){
return "div-id"+index;
}).each(function(){
$(this).find("span").html("(id='"+this.id+"')");
})
})
更换背景图
$("img").click(function () {
var i = $(this).attr("src");
$("body").css("background-image", "url(" + i + ")");
})
10、toggleClass() //对添加和移除类进行切换
<p>高亮？</p>
$(function(){
$("p").click(function(){
$(this).toggleClass("highlight");
}) })
也可用on方法
$("p").on("click",function(){
$(this).toggleClass("highlight");
})
11、append() //在被选元素的结尾插入指定的内容
<p>从前有一只大<em title="Dinosaur">恐龙</em>...</p>
<p>在树林里面<em>跑啊跑</em>...</p>
$(function(){
$("p").eq(1).append("<b>直接添加</b>")
})
12、after() //在被选元素后插入指定内容 before() //在被选元素前插入指定的内容
<a>要被添加的链接1</a>
<a>要被添加的链接2</a>
<p>从前有一只大恐龙</p>
<p>在树林里面跑啊跑</p>
$(function(){
$("p:eq(0)").after($("a:eq(1)"));
})
13、bind()向元素添加事件处理程序目前用on() //想被选元素添加一个或多个事件处理程序，以及当事件发生时运行的函数
on() 方法是 bind()、live() 和 delegate() 方法的新的替代品
语法：$(selector).on(有效事件,childSelector,data,事件发生时运行的函数
hahaha--->
.intro{color:red;}
<p>hahaha</p>
$(function(){
$("p").on("mouseover mouseout",function(){
$("p").toggleClass("intro")
})
})
点击 ------》 
<p>点击</p>
<div></div>
$(function(){
$("p").on("click",function(){
$("div").append("<p>点击事件</p>")
})
})
14.one() //被选元素添加一个或多个事件处理程序，并规定当事件发生时运行的函数，每个元素只能运行一次事件处理程序函数
语法：$(seletor).one(event,data,function)
div{
border:1px solid #000;
background:#fffd77;
height:50px;width:50px;
padding:8px;margin:5px;
text-align:center;float:left;
}
$(function(){
for(var i=0;i<10;i++){
$("body").append($("<div>Click<br>Me!</div>"));
var iCounter=1;
$("div").one("click",function(){
$(this).css({backaground:"red",color:"#fff"}).html(iCounter++);
})
}
})
15.hover() //当鼠标指针悬停在被选元素上时要运行的两个函数。方法触发 mouseenter和 mouseleave事件。
-----> 
<img src="12.jpg">
$(function(){
$("img").hover(function(){$(this).css("opacity",".5")},function(){$(this).css("opacity","1.0")});
})
16、text() //设置或返回被选元素的文本内容
<button>设置所有p元素的文本内容</button>
<p>这是一个段落。</p>
$(document).ready(function(){
$("button").click(function(){
$("p").text("Hello <b>world!</b>");
});
});
<button>修改所有P元素的内容</button>
<p>这是一个段落。</p>
$(function(){
$("button").click(function(){
$("p").html("Hello<b>world!</b>");
})
})
17、animate() //执行 CSS 属性集的自定义动画
语法：(selector).animate({styles},speed,easing,callback)
easing：默认swing 开头/结尾慢，中间快 ；liner 匀速
$("#d1").animate({ "top": "400px", "left": "400px" }, 1000, function () {
$("#d1").animate({ "top": "0px", "left": "800px" }, 1000);
});
18、显示隐藏 hide\show伸缩式 ,slideUp/slideDown上下式,fadeOut/fadeIn渐变式
$("#d1").hide();$("#d1")show()
hide(1000);show(1000);
hide(1000,function(){alert("haha")});
19、prop()方法设置或返回被选元素的属性和值
$("#xy").click(function () {
if (this.checked) {
$("[class=xy]").prop("checked", true);
} else {
$("[class=xy]").prop("checked",false);
}
})
jq学习总结之方法的更多相关文章
- STM32环境搭建/学习观点/自学方法 入门必看
文章转自armfly开发板V4软件开发手册,分享学习~ 今天有幸看到armfly的开发板软件开发手册,开头的基础知识,真的很有用,还好有看到,一切都不迟,感悟很多,摘抄部分,学习分享~ 关于开发环境的 ...
- 怎么学习AOPR使用方法
Advanced Office Password Recovery作为一款专业级别的Office密码破解工具,对十几种office文档的密码都可以有效的破解.一些用户朋友才开始接触Advanced O ...
- JQ中的clone()方法与DOM中的cloneNode()方法
JQ中的clone()方法与DOM中的cloneNode()方法 cloneNode()定义和用法 cloneNode()方法创建节点的拷贝,并返回该副本. 语法: node.cloneNode(de ...
- Unity 3D游戏开发学习路线（方法篇）
Unity 3D本来是由德国的一些苹果粉丝开发的一款游戏引擎,一直只能用于Mac平台,所以一直不被业外人士所知晓.但是后来也推出了2.5版,同时发布了PC版本,并将其发布方向拓展到手持移动设备.Uni ...
- 深度学习课程笔记（十三）深度强化学习 --- 策略梯度方法（Policy Gradient Methods）
深度学习课程笔记(十三)深度强化学习 --- 策略梯度方法(Policy Gradient Methods) 2018-07-17 16:50:12 Reference:https://www.you ...
- 学习Java的方法
许多人在刚开始学习Java时,会因为学习方法的不正确,而丧失信心,从而半途而废.所以,今天,巩固就要教教大家学习Java的方法. 1.多练习 编程其实是一个非常抽象的东西,要想学好它,就不能只是看看书 ...
- jq中的isArray方法分析，如何判断对象是否是数组
<!DOCTYPE html> <html> <head> <title>jq中的isArray方法分析</title> <meta ...
- Java学习笔记之---方法和数组
Java学习笔记之---方法与数组 (一)方法 (1)什么是方法? 方法是解决一类问题的步骤的有序组合 方法包含于类或对象中 方法在程序中被创建,在其他地方被引用 (2)方法的优点 使程序变得更简短而 ...
- 【强烈推荐】可能是最适合你的 Java 学习路线和方法
如遇链接无法打开,建议使用 https://github.com/Snailclimb/JavaGuide/blob/master/docs/questions/java-learning-path- ...
随机推荐
- UVA10173 Smallest Bounding Rectangle 最小面积矩形覆盖
\(\color{#0066ff}{题目描述}\) 给定n(>0)二维点的笛卡尔坐标,编写一个程序,计算其最小边界矩形的面积(包含所有给定点的最小矩形). 输入文件可以包含多个测试样例.每个测试 ...
- P3398 仓鼠找sugar 树上路径相交判断
\(\color{#0066ff}{题目描述}\) 小仓鼠的和他的基(mei)友(zi)sugar住在地下洞穴中,每个节点的编号为1~n.地下洞穴是一个树形结构.这一天小仓鼠打算从从他的卧室(a)到餐 ...
- 洛谷 P2982 [USACO10FEB]慢下来Slowing down
题目描述 Every day each of Farmer John's N (1 <= N <= 100,000) cows conveniently numbered 1..N mov ...
- shell脚本安装jdk
#!/bin/bash BASE_SERVER=192.168.1.11 yum install -y wget wget $BASE_SERVER/soft-all/jdk-7u45-linux-x ...
- Apache 403 错误。。
两个方面.. 一: httpd.conf 是否有 <directory '/www'></directory> 是否有 Deny from all 或者 Require l ...
- Python十大应用领域与就业方向
参考链接:https://baijiahao.baidu.com/s?id=1604847283884842928&wfr=spider&for=pc 正文: 近些年,编程语言Pyth ...
- HDU-Digital Roots(思维+大数字符串模拟)
The digital root of a positive integer is found by summing the digits of the integer. If the resulti ...
- codeforces-777E Hanoi Factory （栈+贪心）
题目传送门 题目大意: 现在一共有N个零件,如果存在:bi>=bj&&bj>ai的两个零件i,j,那么此时我们就可以将零件j放在零件i上.我们现在要组成一个大零件,使得高度 ...
- linux系统延时和定时任务
系统延时任务延时任务:只做一次的at命令: 系统定时及延时任务 延时任务:**有输出任务**不会输出到终端上而是发送邮件给你/var/mail/root/执行 mail at 时间 ...
- java消息中间件
消息中间件介绍 消息队列 什么是消息队列 消息队列是消息中间件的一种实现方式. 什么是消息中间件? 将消息中间件需要理解一下什么是消息和中间件? 消息 消息是指软件对象之间进行交互作用和通讯利用的 ...