kiddkid的jQuery要点笔记

JQuery

语法

• jq里的对象.行为(处理函数)

  • css()

    • ​ css() 里面写属性名则为 获取 属性值

    • ​ css() 里面写key,value 设置key属性的值为value

    • ​ css() 里面写{k1:v1,k2:v2,k3:v3} 同时设置k1 k2 k3三个属性

    • ​ css() 里面还可以写key,function() 则 设置 key属性的值为 函数的返回值

      jq里可以进行链式编程,原因是css函数 返回值是对象本身

• jq文件的引入

<!-- 引入jquery的文件 -->
<!-- js文件的导入 可以在html的任何位置 -->
<script src="js/jquery-3.7.1.js"></script>

• jq与js

  对象转换

  • **js->jq : **使用$()包裹即可

  • jq->js : jq对象 一般是 选择器 方式 获取的 ,它获取到的是一个类似数组的对象

  • jq对象使用下标获取到 数组里的单个 js对象

    • p1[0].innerText = "first P!"
      

  • jq对象使用get行为来获取指定下标的 数组里的单个 js对象

    • ps.get(1).innerText = "33 段落!"
      

  • jq->jq :

    • jq对象使用eq行为来获取制定下标的 数组里的单个 jq对象

      • ps.eq(0).text("jq对象设置的文本内容");
        

  一些jq里的js对象

$("input:hidden").each(function (i) {
   
   
    //this指jq对象集合里的元素 对应的js对象
    console.log(i+"---"+$(this).val());//可以直接this.xxxx
 })

$("input:hidden").each(function (i,obj) {
   
   
  //obj 也是 jq对象集合里的每一个元素 对应的 js对象
  console.log(i+"---"+$(obj).val()+"===="+obj.value);
})

取值

• js里取对象的值 使用 value
  jq里取对象的值 使用 val() — 获取匹配元素集合里的第一个对象的值

  ​ val()获取时 只获取第一个
  ​ text() 获取时 获取所有复合的

举例:

<script>
    window.onload = function () {
   
   
        document.getElementById("h21").style.backgroundColor = "pink"
    }
---- ready()是 文档准备完毕的行为
    //行为(处理函数)
    //事件源 事件 处理函数
    $(document).ready(function () {
   
   
        //$()里面 使用 选择器 来 选择 html 元素
        $("#h22").text("jq更改后的内容!")
        $("#h22").css("backgroundColor","skyblue")
    })
</script>

选择器

选择器是指$("")双引号内部的

基本选择器

• id选择器 #id

$("#b1").click(function () {
   
   
    let attrs = {
   
   backgroundColor:"#0000FF",border:"2px solid red"};
    //$("#one").css("backgroundColor","#0000FF");
    //$("#one").css(attrs);
    $("#one").css("backgroundColor",function () {
   
   
        return "red";
    })
})

• 类选择器 .class

//类
$("#b2").click(function () {
   
   
    $(".mini").css("backgroundColor","#FF0033")
})

• 属性选择器 属性

$("#b3").click(function () {
   
   
    $("div").css("backgroundColor","#00FFFF")
})

• 所有选择器 *

$("#b4").click(function () {
   
   
    $("*").css("backgroundColor","#00FF33")
})

• 并列选择器 选择器,选择器

$("#b5").click(function () {
   
   
    $("span,#two").css("backgroundColor","#3399FF")
})

可见性选择器

• 可见 :visible

$("#b1").click(function () {
   
   
$("div:visible").css("backgroundColor","#0000FF")
})

• 不可见 :hidden

$("div:hidden").css("backgroundColor","#0000FF").show