jQuary教程3: jQuery语法1
Posted autoxingjy
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuary教程3: jQuery语法1相关的知识,希望对你有一定的参考价值。
//html <div id="box"></div> //js $("#box").css("background","gray");//将背景色修改为灰色 //js代码运行完毕的结果 <div id="box" style="background: gray"></div>
设置多个样式:
//html <div id="box"></div> //js $("#one").css({ "background":"gray", "width":"400px", "height":"200px" }); //js执行完毕的结果 <div id="box" style="background:gray; width:400px; height:200px"></div>
2 获取行内样式
//html <div id="box" style="background: gray width:100px"></div> $("#box").css("background-color"); //返回的是 rgb(128, 128, 128) --> gray $("#box").css("width"); //返回100px
2.1
//html <div id="box" ></div> //js $(‘#box‘).addClass(‘one‘); //执行完之后的结果 <div id="box" class="one"></div>
如果想要同时添加多个
//如果想要同时添加多个 //html <div id="box" ></div> //js $(‘#box‘).addClass(‘two three‘); //结果 <div id="box" class="two three"></div>
2.2
-1 如果不传参数,那么会移除所有的类名
//html <div id="box" class="one two three"></div> //js $(‘#box‘).removeClass(); //执行完毕的结果 <div id="#box" class></div>
-2 如果传入参数,删除指定的类名
//html <div id="box" class="one two three"></div> //js $(‘#box‘).removeClass(‘one‘); //执行完毕的结果 <div id="#box" class="two three"></div> //====================================================================================== //如果想同时删除多个类名 //html <div id="box" class="one two three"></div> //js $(‘#box‘).removeClass(‘one three‘); //结果 <div id="#box" class="two"></div>
-3
//html <div id="box" class="one"></div> //js $(‘#box‘).hasClass(‘one‘); //返回 true $(‘#box‘).hasClass(‘two‘); //返回 false
-4
如果有这个类名,则移除该样式,如果没有,添加该类名。
//html <div id="box"></div> //js $(‘#box‘).toggleClass(‘one‘); //执行完的结果 <div id="box" class="one"></div> //此时再执行一次toggleClass(‘one‘); $(‘#box‘).toggleClass(‘one‘); //执行完的结果 <div id="box" class></div>
3 jQuery中的隐式迭代: jQuery内部会帮我们遍历DOM对象,然后给每一个DOM对象实现具体的操作.
以上是关于jQuary教程3: jQuery语法1的主要内容,如果未能解决你的问题,请参考以下文章
前端2jquary(选择器),bootstrap(布局容器),vue(创建实例)