jQuery笔记 (完整详细版)-CSDN博客

本文链接：https://blog.csdn.net/weixin_43473773/article/details/119575925

第一章初识jQuery

一、jQuery简介

是什么是jQuery？
jQuery是一个优秀的JavaScript库，是一个凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档，操作DOM，执行动画和开发Ajax的操作。jQuery封装了很多预定义的对象和函数。其理念：write less,do more.
2.常见的javascript库?

入口函数

JQuery()和$()都称之为jq选择器环境，在里面添加上相关的选中器即可，就可以获取匹配元素

原生：windows.onload=function(...){}
JQuery:$(document).ready(function(){...})
$(function(){....})

jquery中的选择器（元素获取）

基础选择器

//id选择器
$('#box')
//类选择器
$('.box')
//标签选择器
$('input')
//通配符选择器
$('*')
//兄弟选择器
$('div,.box')
//后代选择器
$('from input')
//父子选择器
$('div>span')

基本筛选选择器

//获取匹配第一个元素
$(li:first)
//匹配最后一个元素
$('li:last')
//匹配所有索引值为偶数的元素
$('tr:even')
//匹配所有索引值为奇数的元素
$('tr:odd')
//匹配一个给定的索引值的元素
$('tr:eq(2)')
//匹配所有小于给定值的元素
$('tr:lt(3)')
//匹配所有大于给定索引值的元素
$('tr:gt(0)')
//匹配页面中所有的标题
$(':header')
//匹配所有正在执行的动画
$('div:not(:animated)')
//匹配当前获取焦点的元素
$( "#content" ).delegate( "*", "focus blur", function( event ) {
    var elem = $( this );
    setTimeout(function() {
       elem.toggleClass( "focused", elem.is( ":focus" ) );
    }, 0);
});

jquery中的隐式迭代

隐式迭代：把匹配到的使用的元素进行遍历循环，给每个元素添加CSS这个方法

//给四个div设置背景颜色为粉色，jquery镀锡不能使用style
$('div').css('backgroun','pink')
//隐式迭代就是把所有元素内部进行循环，给每个元素添加css这个方法
$('ul li').css('color','red')

事件

js代码

//注意：js的代码都是写在==后面，jquery的代码基本上写在()里面，
//jquery入口函数
$(function(){
    //js代码
    var btn = document.getElementById('btn')
    btn.onclick = function(){
        alert('按键被点击了。。。')
    }
 })

Jquery代码

//注意：js的代码都是写在==后面，jquery的代码基本上写在()里面，
//jquery入口函数
jquery(function(){
    //jquery 代码：
    $('btn').click(function(){
        alert('按钮点击了。。。')
        })
)

原生js与Jquery互相转换

js转jQuery对象

<body>
    <input type="button" value="按钮" id="btn" />
</body>

<script src="../js/jquery-3.3.1.min.js"></script>
<script>
    // jquery 入口函数 :
    $(function () {
 
        // JS 对象转 jquery 对象
        var btn = document.getElementById("btn");
        // JS 对象调用 jquery 的方法. (行不通)
        /*btn.click(function () {
            alert("按钮被点击了...");
        });*/
 
        // 需求 : 将 JS 对象转成 jquery 对象. 给点钱就行了.
        $(btn).click(function () {
            alert("按钮被点击了...");
        });
    });
</script>

jQuery转js对象

<script src="../js/jquery-3.3.1.min.js"></script>
<script>
    // jquery 入口函数 :
    $(function () {
 
        // jquery 对象 转 JS 对象
        /*$("#btn").onclick = function () {
            alert("按钮被点击了...");
        }*/
：jq对象[索引] 或 jq对象.get(索引)
        // 方式一 : [下标]
        /*$("#btn")[0].onclick = function () {
            alert("按钮被点击了...");
        }*/
 
        // 方式二 : get(下标)
        $("#btn").get(0).onclick = function () {
            alert("按钮被点击了...");
        }
    });
</script>

控制class

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background: pink;
        }
        .bgcolor{
            background: skyblue;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <input type="button" value="新增class" />
    <input type="button" value="移除class" />
    <input type="button" value="切换class" />
    <input type="button" value="判断是否有class" />
</body>
</html>
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
    $(function () {
        var inputs = $("input");
 
        // 添加 class
        inputs.eq(0).click(function () {
            $(".box").addClass("bgcolor");
        });
 
        // 移除 class
        inputs.eq(1).click(function () {
            $(".box").removeClass("bgcolor");
        });
 
        // 切换 class
        inputs.eq(2).click(function () {
            $(".box").toggleClass("bgcolor");
        });
 
        // 判断是否存在 class
        inputs.eq(3).click(function () {
            var result = $(".box").hasClass("bgcolor");
            alert("result = " + result);
        });
    });
</script>

jquery中的动画

jQuery样式相关方法
宽度=width+2padding+2border+2margin

   //获取视口区的宽高：
   1、$(window).height()
   2、$(window).width()

   //获取内容区的宽高：
      $('div').width(); 
      $('div').height();

   //获取内容+padding区的宽高：
   3、$('div').innerHeight()
   4、$('div').innerWidth()

   //获取内容+padding+border区的宽高：
   5、$('div').outerHeight()
   6、$('div').outerWidth()

   //获取内容+padding+border+margin区的宽高： 
    $('div').outerWidth(true); 
    $('div').outerHeight(true);

   //获取相对于文档的偏移
   7、.offset()

   //获取相对于定位父元素的偏移
   8、.position()

   //横向滚动条左侧的偏移
   9、.scrollLeft()

   //横向滚动条上侧的偏移
   10、.scrollTop()

   //获取离它最近的父定位元素  
   11、.offsetParent()

二、效果

    1.基本效果
      1）隐藏 hide()
      2）显示 show()
      3）隐藏与显示 toggle()

    2.淡入淡出效果
      1）淡入  fadeIn()
      2）淡出  fadeOut()
      3）淡入到 fadeTo()
      4）淡入与淡出 fadeToggle()

    3.滑动效果
      1）滑下 slideDown()
      2）滑上 slideUp()
      3）滑上与滑下 slideToggle()

    4.自定义效果
      animate()

jQuery中常用的API

1.jQuery中的html(),text(),val()方法

   html()
           无参：获取html的值
           有参数html：设置html的值

   text()
           无参：获取文本值
           有参数text：设置文本值
   val()
           无参：获取value的值
           有参数value：设置value的值

2.jQuery中的工具方法

   1) get();  //以数组的形式返回DOM节点。
        console.log($('div').get());
        
   2) toArray();  //返回一个包含jQuery对象结合中的所有DOM元素数组。
        console.log($('div').toArray());

   3) eq(index);  //返回index位置上的jQuery对象。
        console.log($('div').eq(1).get(0));

   4) filter(function(index,item){});   //过滤器函数，返回jQuery对象。
        var $result = $('div').filter(function(index,item){
        return index == 2;
      });
         
   5) map(function(index,item){});   //用于获取或设置元素集合中的值。
        var $result = $('div').map(function(index,item){
        return $(item).html()
      });
    
   6) each(function(index,item){});  //遍历一个jQuery对象。
          $('div').each(function(index,item){
        console.log(index,'--',item);
      });

   7) slice(0,3);  //截取
        var $result = $('div').slice(0,3);
      console.log($result.get());
   }); 

  8) not() 
  9) first()
  10) last()
  11) is()
  12) has()

3.jQuery中属性设置函数

   //获取属性值
       attr(key)
       prop(key)
    //删除属性   
       removeAttr(attributeName)
       removeProp(propertyName)
    //批量设置属性   
       css(key)
    //添加类   
       addClass(className)
    //判断有没有指定的类，有，返回true，否则返回false   
       hasClass(className)
    //删除类   
       removeClass(className)