jQuery(一)

最新推荐文章于 2023-04-07 21:22:51 发布

jhkkk_

最新推荐文章于 2023-04-07 21:22:51 发布

阅读量114

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/linjiehuijh/article/details/83032850

版权

jQuery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文详细介绍了jQuery的基础知识，包括入口函数的执行时机对比、DOM对象与jQuery对象的区别与联系、$符号的本质及多种用法、基本选择器的使用、index()方法的功能，以及如何实现隔行换色效果。

摘要由CSDN通过智能技术生成

Tips

1.入口函数

js的入口函数执行要比jQuery的入口函数执行得晚一些。
jq的入口函数会等待页面的加载完成才执行，但是不会等待图片的加载。
js的入口函数会等待页面加载完成，并且等待图片加载完成才开始执行。

<script>
  window.onload = function () {
    console.log("我是js的入口函数");
  };
  
  //认识
  $(document).ready(function () {
    console.log("这是jQuery入口函数的第一种写法");
  });
  
  
  $(function () {
    console.log("这是jQuery入口函数的第二种写法");
  });
</script>

2.DOM对象（js对象）与jq对象

1. 什么是DOM对象(js对象):使用js的方式获取到的元素就是js对象（DOM对象）
var cloth = document.getElementById("cloth");
cloth.style.backgroundColor = "pink";

2. 什么是jq对象：使用jq的方式获取到的元素就是jq对象
var $li = $("li");
console.log($li);
$li.text("我改了内容");

3. jq对象与js对象的区别
js对象对象不能调用jq对象的方法
var cloth = document.getElementById("cloth");
cloth.text("呵呵");

4. jq对象与js对象的联系（jq对象其实就是js对象的一个集合，伪数组，里面存放了一大堆的js对象）（宏观上）

jquery对象能不能调用DOM对象的方法
var $li = $("li");
$li[0].setAttribute("name","hehe");

DOM无法调用jQuery对象的方法：为什么：因为是两个不同对象
DOM对象调用jQuery对象的方法。需要把DOM对象转换成jQuery对象。
var cloth = document.getElementById("cloth");

DOM对象就变成jQuery对象
$(cloth).text("呵呵");

jQuery对象怎么转换成DOM对象（取出来）
var $li = $("li");
$li[1].style.backgroundColor = "red";
$li.get(2).style.backgroundColor = "yellow";

3.$符号的实质

$其实就是一个函数，以后用$的时候，记得跟小括号 $()，等同于jQuery();
参数不同，功能就不同
3种用法：
1. 参数是一个function, 入口函数
$(function () {

});
console.log(typeof $);

2. $(domobj) 把dom对象转换成jquery对象
$(document).ready(function () {

});

3. 参数是一个字符串,用来找对象
$("div") $("div ul") $(".current")

<script>
  
  $(function () { 
    //jquery对象能不能调用DOM对象的方法
    //var $li = $("li");
    //$li[0].setAttribute("name","hehe");
    
    //DOM无法调用jQuery对象的方法：为什么：因为是两个不同对象
    //DOM对象调用jQuery对象的方法。需要把DOM对象转换成jQuery对象。
    var cloth = document.getElementById("cloth");
    
    //DOM对象就变成jQuery对象
    //$(cloth).text("呵呵");
    
    //jQuery对象怎么转换成DOM对象（取出来）
    var $li = $("li");
    $li[1].style.backgroundColor = "red";
    $li.get(2).style.backgroundColor = "yellow";

  });
 
  
</script>

4.基本选择器

jquery中设置样式
css(name, value)
name:样式名 value：样式值

id选择器 $("#id")
$("#four").css("backgroundColor", "red");

$(".green").css("backgroundColor", "green");

$("li").css("color", "red");


交集并集
$("#four,.green").css("backgroundColor", "pink");
$("li.green").css("backgroundColor", "red");
$(".green.yellow").css("backgroundColor", "pink");

$("s1,s2")// 并集选择器

$("li.green")
$("s1s2") //交集选择器

  子类选择器和后代选择器
$("s1 s2")// 后代选择器
$("s1>s2")// 子代选择器

$("#father>p").css("backgroundColor", "red");
$("#father p").css("backgroundColor", "red");

5.index()方法

index()会返回当前元素在所有兄弟元素里面的索引。

<script>
  $(function () {
    
    
    
    //index()会返回当前元素在所有兄弟元素里面的索引。
    $("li").click(function () {
      console.log($(this).index());
    });
    
    
  });
</script>

代码

1.jq中的隔行换色

<script>
  $(function () {
    
    //就这么写，会不会报错，会不会有效果
    var lis = $("li");
    for (var i = 0; i < lis.length; i++) {
      if (i % 2 == 0) {
        
        // lis:jq对象
        // lis[i]:DOM对象，通过下标取出来了
        lis[i].style.backgroundColor = "pink";
      } else {
        lis[i].style.backgroundColor = "hotpink";
      }
    }
    
  });
</script>

2.过滤选择器（隔行变色）

<script>
  
  $(function () {
    
    //下标为偶数，过滤
    $("li:even").css("backgroundColor", "red");
    $("li:odd").css("backgroundColor", "cyan");
    $("li:lt(1)").css("fontSize", "32px");
    
  });
  
</script>