$(function(){
}); ;
是由$();
和function(){
} 的组合。这是为了防止文档在完全加载之前运行jquery代码。就不会出现获益一个还没有加载好的图片的情况,还有另一种写法就是$(document).ready(function(){});它也是由两个部分组成,$(document).ready(); 和function(){}
jQuery通过$("#id")就可以获取元素节点。document.getElementById获得的是DOM里的元素节点,而通过$("#id")获取到的是一个jQuery对象
<script src="https://how2j.cn/study/jquery.min.js"></script> <script> $(function(){ $("#b1").click(function(){ $("#d").hide(); }); $("#b2").click(function(){ $("#d").show(); }); }); </script> <button id="b1">隐藏div</button> <button id="b2">显示div</button> <br> <br> <div id="d"> 这是一个div </div>
<script src="https://how2j.cn/study/jquery.min.js"></script> <script> $(function(){ $("#b1").click(function(){ $("#d").addClass("pink"); }); }); </script> <button id="b1">增加背景色</button> <br> <br> <style> .pink{ background-color:pink; } </style> <div id="d"> Hello JQuery </div>
通过css函数 直接设置样式
css(property,value)
第一个参数是样式属性,第二个参数是样式值
css({p1:v1,p2:v2})
参数是 {} 包含的属性值对。
属性值对之间用 逗号,分割
属性值之间用 冒号 :分割
属性和值都需要用引号 “
<script src="https://how2j.cn/study/jquery.min.js"></script> <script> $(function(){ $("#b1").click(function(){ $("#d1").css("background-color","pink"); }); $("#b2").click(function(){ $("#d2").css({"background-color":"pink","color":"green"}); }); }); </script> <button id="b1">设置单一样式</button> <button id="b2">设置多种样式</button> <br> <br> <div id="d1" > 单一样式,只设置背景色 </div> <div id="d2" > 多种样式,不仅设置背景色,还设置字体颜色 </div>
jquery有多个选择器,可以按照元素、id、类、层级、先后、奇偶、属性、表单对象、表单对象属性、当前元素(this 关键字)等进行选择
https://how2j.cn/k/jquery/jquery-selector/468.html#nowhere
筛选器
原来以前老师使用的是BootStrap 啊,我去这玩意挺强大的, 可以在实例中美化页面