jQuery的基本使用

jQuery

jQuery是一个javaScript库。
作用：简化了javascript编程

1. 获取元素
   选择器获取 id,class,tags等
   $(选择器) 这种形式来获取元素对象

 <ul id="first">
     <li>item1</li>
     <li>item2</li>
     <li>item1</li>
     <li>item2</li>
     <li>item1</li>
 </ul>
<script>
const first=$("#first");
</script>

2.js对象转为jquery对象
$(js对象) 就可以转为jquery对象使用jquery方法

$(document.body).css("background","lightgtreen");
3.jquery转为js对象

• 使用…spread扩展
  [...$(document.querySelectorAll("li"))];
• 使用get(下标)方法将某一个转为js对象
  $(document.querySelectorAll("li")).get(2).style.backgroundcolor="red";
  • 使用[n]直接来转换
    $(document.querySelectorAll("li"))[0].style.backgroundcolor="red";

4.html文本生成dom元素
$("<li>你好！</li>").appendTo(document.querySelector("#first"));
5.$(callback回调函数)

$(function (){
  $("<li>你好！</li>").appendTo($("#first"));
});
表示在页面加载完毕后，执行这个回调函数

jquery一些方法

1. attr()获取/设置元素属性

 <div id="attrs" name="diving" class="divclass">
       <p>你<em style="color:blue;">好</em></p> 
 </div>
//获取属性值
const att=$("#attrs");
//获得name的值
console.log(att.attr("name"));
//设置name的值
console.log(att.attr("name","log"));
console.log(att.attr("name"));
//也可以传递函数
att.attr("class",()=>{
    let method=att.attr("class");
    return method;
});

2.css设置属性值
('body').css('background',"lightgreen");
3.text()方法和 html()方法
text()是获得纯文本，html()将元素也获得了

const pa=$("#attrs p");
console.log(pa.text());
//html()html元素也被读取出来了
console.log(pa.html());