jQuery学习笔记(一)初识jQuery【入门必看】

什么是jQuery?

jQuery是一个优秀的JavaScript库,是一个凭借简洁的语法和跨平台的兼容性,极大地简化了JavaScript开发人员遍历HTML文档,操作DOM,处理事件,执行动画和开发Ajax的操作。jQuery封装了很多预定义的对象和函数。

jQuery使用方式

直接在官网BootCDN >> jquery找到你需要的版本资源,复制< script>标签,然后导入到代码中 。

jQuery学习笔记(一)初识jQuery【入门必看】_第1张图片

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js">script>

一般我们在下载或者使用cdn资源的时候,都会让我们选择jquery.js 与 jquery.min.js版本,它们的区别在于jquery.min.js是经过压缩的,体积更小,适用于部署环境。而jquery适用于源码研究,我们对于jquery的学习,应该要上升到源码层次。

jQuery初体验


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>体验jQuerytitle>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js">script>
    <style type="text/css">
        div{
            background-color: brown;
            width: 100px;
            height: 100px;
        }
    style>
    <script type="text/javascript">
        $(function(){
            $('div').css('background-color','pink')
            $('div').html('hello world')
        })
    script>
head>
<body>
    <div>div>
body>
html>

jQuery函数

jQuery库只提供了一个叫jQuery的函数,该函数中以及该函数的原型中定义了大量的方法,方便jQuery对象和jQuery函数调用。

jQuery函数具有四种参数:

  • $(选择器)
    通过选择器选择到符合条件的Element元素,将其保存到jQuery对象。
  • $(html片段)
    将html片段转换成Element元素,然后再封装成一个jQuery对象。
  • $(Element元素)
    将Element元素转换成一个jQuery对象。
  • $(匿名函数)
    匿名函数在文档加载完毕以后执行。

jQuery对象

jQuery对象是jQuery函数的一个实例,该对象可以调用jQuery原型中的方法,也就是我们后面学的很多方法,比如each,map,slice,first,find,filter,not,on,off,css等方法。

jQuery对象是一个类数组对象,数组中存放的是DOM对象。jQuery对象的获取通常是使用选择器来获取。比如,获取所有class为one的元素:$(“.one”)

jQuery选择器&过滤器

jQuery选择器有核心选择器、层次选择器、属性选择器,使用规则与CSS选择器一样,这里就不细述了,需要了解的童鞋请移步–>HTML&CSS >> CSS选择器。下面给大家介绍一下jQuery过滤器(伪类选择器)。

  • 基本过滤器
过滤器 描述
:first 获取第一个元素
:last 获取最后一个元素
:even 获取索引为偶数的元素
:odd 获取索引为奇数的元素
:eq(index) 获取索引为index的元素
:lt(num) 获取索引值小于num的元素
:gt(num) 获取索引值大于num的元素
:not(selector) 获取除了selector以外的元素
:header 获取标题元素
  • 内容过滤器
过滤器 描述
:contains(text) 获取文本中包含text的元素
:empty 获取没有子节点的元素
:parent 获取有子节点的元素
:has(selector) 获取包含selector的元素
  • 可见性过滤器
过滤器 描述
:visible 选择占据屏幕空间的元素(visibility:hidden、透明度为0)
:hidden 选择不占据屏幕空间的元素(display:none、< input type=“hidden”>)
<div class="one">onediv>
<div class="two">twodiv>
<style type="text/css">
    .one{
        display: none;
    }
    .two{
        visibility: hidden;
    }
style>
<script type="text/javascript">
    $(function(){
        $('div:hidden').css('display','block')
        $('div:visible').css('visibility','visible')
        $('div').css('background','coral')
    })
script>
  • 表单过滤器
过滤器 含义
:focus 选择当前获取焦点的元素
:checked 选取所有复选框、单选框或者是下拉框勾选的元素
:selected 选取被选中的选项元素,只适用于< option>
:disabled 选取所有被禁用的元素,只适用于disabled属性的元素
:enabled 选择所有未被禁用的元素
:text 选取所有的单行文本框
:password 选取所有的密码框
:button 选取所有按钮元素和类型为按钮的元素
<script type="text/javascript">
    $(function(){
        $('input:disabled').css('background','red')
        $("input").click(function(){
               $(":focus").css('background','red')    
        })
    })
script>
<form action="#">
    <input type="text" name="" disabled="">
    <input type="text" name="">
form>
  • 后代过滤器
过滤器 含义
:nth-child(index) 获取索引为index的子元素(index从1开始)
:first-child 获取每个父元素的第一个子元素
:last-child 获取每个父元素的最后一个子元素
:only-child 每个父元素如果只有一个孩子元素,获取该元素
:first-of-type 获取每种类型子元素中的第一个
:last-of-type 获取每种类型子元素中的最后一个

你可能感兴趣的:(jQuery学习笔记(一)初识jQuery【入门必看】)