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- ...
随机推荐
- c#静态方法和非静态方法区别
c#静态方法和非静态方法区别 C#的类中可以包含两种方法:C#静态方法与非静态方法.那么他们的定义有什么不同呢?他们在使用上会有什么不同呢?让我们来看看最直观的差别:使用了static 修饰符的方法为 ...
- 微信小程序小结（4） -- 分包加载及小程序间跳转
分包加载 某些情况下,开发者需要将小程序划分成不同的子包,在构建时打包成不同的分包,用户在使用时按需进行加载(主要是空间不够用,哈哈~). 在构建小程序分包项目时,构建会输出一个或多个功能的分包,其中 ...
- forEach，for in，for of循环的用法
一.一般的遍历数组的方法: var array = [1,2,3,4,5,6,7]; for (var i = 0; i < array.length; i) { console.log(i,a ...
- 加快 hive 查询的 5 种方法
1. 使用 Tez set hive.execution.engine=tez; 2. 使用 ORCFILE.当有多个表 join 时,使用 ORCFile 进行存储,会显著地提高速度. CREATE ...
- flink学习笔记-快速生成Flink项目
说明:本文为<Flink大数据项目实战>学习笔记,想通过视频系统学习Flink这个最火爆的大数据计算框架的同学,推荐学习课程: Flink大数据项目实战:http://t.cn/EJtKh ...
- SP8222 NSUBSTR - Substrings
\(\color{#0066ff}{ 题目描述 }\) 你得到一个字符串,最多由25万个小写拉丁字母组成.我们将 F(x)定义为某些长度X的字符串在s中出现的最大次数,例如字符串'ababaf'- F ...
- Tarjan+树形DP【洛谷P2515】[HAOI2010]软件安装
[洛谷P2515][HAOI2010]软件安装 题目描述 现在我们的手头有N个软件,对于一个软件i,它要占用Wi的磁盘空间,它的价值为Vi.我们希望从中选择一些软件安装到一台磁盘容量为M计算机上,使得 ...
- luogu4240 毒瘤之神的考验(毒瘤乌斯反演)
link 题意:求出\(\sum_{i=1}^n\sum_{j=1}^m\varphi(ij)\),对998244353取模 多组数据,\(T\le 10^4,n,m\le 10^5\). 前置知识: ...
- kuangbin专题十二 POJ3186 Treats for the Cows （区间dp）
Treats for the Cows Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 7949 Accepted: 42 ...
- 安装lombok
1. lombok的jar包路径 wangfei@DESKTOP-8AT8HRO MINGW64 /d/gradle-3.4.1/caches/modules-2/files-2.1/org.proj ...