jquery

Posted 2021-03-12 tao7

$(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

筛选器

 

 

---