jQuery基础

  jQuery是一种轻量级的,功能多样的,快速的JavaScript库。它使HTML文档遍历和操作(POM),事件处理,动画,还有Ajax用一个简单易用API接口来跨多个浏览器使用。jQuery结合了通用性和可扩展性来改变了数百万计的人写JavaScript代码的方式。

 一、入口函数

  jQuery入口函数的两种写法:

  其中第一种只需能看懂即可,用的不多

 1 $(document).ready(function () {
 2     console.log("这是jQuery入口函数的第一种写法");
 3 });
 4 
 5 
 6 ===============================
 7 
 8 
 9 $(function() {
10     console.log("这是jQuery入口函数的第二种方法");
11 });

开发用版本 .min.js

学习用版本 .js


  js的入口函数比jQuery的入口函数执行得晚一些,并且jQuery的入口函数不等页面的图片加载,但是这两种的入口函数都等待文档的加载。

jQuery推荐使用步骤:

  1. 引入jQuery库
  2. 入口函数
  3. 功能实现

写入口函数的好处是使代码更加灵活,可以放在HTML页面的任何位置。

二、jQuery对象与DOM对象(js对象)的区别

  DOM对象:使用js的方式获取到的元素就是js对象

var cloth = document.getElementById("cloth");
cloth.style.backgroundColor = "pink";

  jQ对象:使用jQ方式获取到的元素就是jQ对象

var $li = $(li);
$li.text("xxx");

  

  区别:

    • js对象和jQuery对象的方法不能混用
    • 他们不是一个对象

  联系:

    jq对象其实就是js对象的集合,伪数组jQuery.fn.init[ x ],里面存放了一大堆的js对象。它有自己的方法。

  

  jQuery对象转换为DOM对象:

    如果想用jQuery对象调用js对象的方法,可以从伪数组中取出来DOM对象,这样就可以调用了。

      $li[0]     /    $li.get(0)

  DOM对象转换为jQuery对象:

    如果想用js对象调用jQuery对象的方法,就花钱买(在DOM对象前加$)

      var cloth = document.getElementById("cloth");

      $(cloth).text("xxx");

  

三、$符号的实质  

  $其实是一种函数,用的时候记得加()。

  三种用法:

  1. 参数是一个function,那就是一个入口函数
  2. 把dom对象转换为jQuery对象,$(domobj)
  3. 参数是一个字符串
    • $("div") 标签选择器  $("#btn") id选择器  $(".current") 类选择器   

  

    

四、基本选择器

  jQuery的选择器返回的是jQuery对象,并提供一组方法,可以让我们更方便的找到页面种的元素。  

  jQuery提供很多种选择器,但是虽然很多,选择器之间可以相互替代,所以我们平时真正用到的只是少数的最常用的选择器。

<script>
        $(function(){
            $("#four").css("backgroundColor", "red");
        });

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

        $("li").css("color", "blue");
     
     // 并集
$("#four, .green").css("backgroundColor", "pink"); </script>

五、层级/过滤选择器

  • 子代选择器:$("ul > li") ,不会获取到孙子层级的元素
  • 后代选择器:$("ul li"),使用空格,代表后代选择器,包括孙子等层级。
  • :even
  • :odd
  • :lt ()
  • :gt()
  • :eq()
  • :first
  • :second
原文地址:https://www.cnblogs.com/summeryl/p/11117184.html