jQuery基础知识（一）

最新推荐文章于 2023-10-25 19:46:17 发布

棋炜的小宝贝

最新推荐文章于 2023-10-25 19:46:17 发布

阅读量161

点赞数

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/XWen_ING/article/details/108928001

版权

jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

JavaScript 库
是一个封装好的特定的集合（方法和函数）。比如动画animate、hide、show、获取元素等

简单理解：是一个js文件，里面对原生js代码进行封装，存放到里面。我们使用时只需调用即可。

jQuery的概念

1.快速、简洁的JavaScript库。
2.封装了JavaScript常用的功能代码，优化了DOM操作、事件处理、动画设计和Ajax交互，以及深复制、浅复制。
3.学习jQuery的本质：就是学习调用这些函数和方法。

jQuery的入口函数

$(function(){
                ... //此处是页面DOM加载完成的入口
 });

$(document).ready(function(){
        ...  //此处是页面DOM加载完成的入口
 });

1.等着DOM结构渲染完毕即可执行内部代码,不必等到所有外部资源加载完成， jQuery帮我们完成了封装。
2.相当于原生js中的DOMContentLoaded.
3.不同于原生js中的load事件是等页面文档、外部的is文件、css文件、图片加载完毕才执行内部代码。

jQuery的顶级对象$

1、$是jQuery的别称。
2、$是jQuery的顶极对象。相当于原生JavaScript中的window。

冲突问题的解决方式

冲突问题的解决方式1
jQuery框架中释放 $ 符号的使用权
注意点：释放操作必须在编写其他jQuery代码之前编写
释放之后就不能用$,改为使用jQuery

jQuery.noConflict();
jQuery(function () {         
  alert("hellow")
});

冲突问题的解决方式 2
自定义访问符号

<script>
        var $jn = jQuery.noConflict();
        $jn("div").hide();
          $jn(function(){
            alert("jn是自定义访问符号")；
        });
</script>

jQuery对象

1.DOM对象：用原生js获取过来的对象就是DOM对象.

jQuery对象：用jquery方式获取过来的对象是jQuery对象。
jQuery对象本质是：利用$对DOM对象包装后产生的对象(伪数组形式存储)。
jQuery 对象只能使用jQuery 方法，DOM对象则使用原生的JavaScirpt 属性和方法。

约定：如果获取的是 jQuery 对象, 那么要在变量前面加上 $.
var $variable = jQuery对象
var variable = DOM对象

DOM对象与jQuery对象之间的相互转换：

DOM对象转化成jQuery对象： $(DOM对象)

jQuery对象转化成DOM对象(两种方式)：$(‘选择器’)[index] 和 $(‘选择器’ ).get(index);

1. DOM对象转换为jQuery对象

(1)使用原生js获取过来DOM对象

var myDiv = document.querySelector( 'div');
$m = $(myDiv);

2. jQuery对象转换为DOM对象
(1) 直接从jQuery对象身上通过下标获取元素

 $('div' )[0];

(2) 通过jQuery提供的get()方法加一个下标获取对应的元素

$('div' ).get(0);

jQuery的原型

$.prototype、jQuery.prototype、$.fn、jQuery.fn

<script type="text/javascript">  
        var $ = jQuery = function(){  
            return jQuery.fn.init();        // 调用原型 init()  
        };  
          
        jQuery.fn = jQuery.prototype = {  
            init: function(){               // 在初始化原型方法中返回实例的引用  
                this.length = 0;  
                this.test = function(){  
                    return this.length;  
                }  
                return this;  
            },  
            jquery: "1.3.2",                // 原型属性  
            length: 1,  
            size: function(){               // 原型方法  
                return this.length;  
            }  
        };  
          
        console.log($().jquery);          // 返回 "1.3.2"  
        console.log($().test());          // 返回 0  
        console.log($().size());          // 返回 0  
    </script>

ready

ready事件是jQuery自己定义的，在页面的DOM结构加载完毕之后就会执行,而window.onload事件是BOM规定对的，它在页面的所有资源加载完毕才会执行。

 $(document).ready(function(){code....})

简化写法：

  $(function(){
      console.log("ready");
   })

注意：此案例必须处于服务器环境下    
    console.log(1);
        window.onload = function(){
            console.log("load");
        }
        $(document).ready(function(){
            console.log("ready")
        })

jQuery基础选择器

$(“选择器" ) //里面选择器直接写CSS选择器即可，但是要加引号
在这里插入图片描述

jQuery层级选择器

在这里插入图片描述

jQuery设置样式

1.传两个参数，分别是属性名和属性值
$(‘div’).css(‘属性’, ‘属性值’);

 $("div").css("background", "pink");

2.传一个参数，可以是一个对象
$(‘div’).css({‘属性’, ‘属性值’})；

$("div").css({
     width: "100",
     height: 100,
     background: "pink"
  });

jQuery筛选选择器

在这里插入图片描述

$(function() {
	$("ul li:first" ).css("color", "red");
	$("ul li:eq(2)").css("color", "blue");
	$("ol li:odd" ).css("color",“skyblue");
	$("ol li:even" ).css("color", "pinkf );
})

jQuery筛选方法（重点）

在这里插入图片描述

<script>
//注意一下都是方法带括号
	$(function() {
		 //1.父parent() 返回的是最近一 级的父级元素亲爸爸
		console .log($(".son" ).parent());
		//2.子
		// (1)亲儿子 children()  子代选择器 ul>li
		// $(".nav"). children("p" ).css("color", "red");
		// (2) 可以选里面所有的孩子包括儿子和孙子 find() 类似于后代选择器
		$(" .nav").find("p").css("color", "red");
	}
</script>

<script>
//注意一下都是方法带括号
	$(function() {
		// 1.兄弟元素siblings除了自身元素之外的所有亲兄弟
		$("ol.item" ).siblings("1i").css("color", "red");
		
		// 2.第n个元素
		// (1) 我们可以利用选择器的方式选择
		// $("ul 1i:eq(2)").css("color", "blue" );
		// $("ul 1i:eq(“+ index +”)").css("color", "blue" );
		
		// (2) 我们可以利用选择方法的方式选择
		//$("ul 1i").eq(2).css("color", "blue");
		//$("ul 1i").eq(index).css("color", "blue");
	};
</script>

$(this)

jQuery获取当前元素，this不要加引号

隐式迭代（重要)

遍历内部DOM元素(伪数组形式存储)的过程就叫做隐式迭代。
简单理解：给匹配到的所有元素进行循环遍历,执行相应的方法,而不用我们再进行循环,简化我们的操作,方便我们调用。

<script>
	$(function() {
		// 1.隐式迭代给所有的按钮都绑定了点击事件
		$("button"). click(function() {
		// 2.当前的元素变化背景颜色
		$(this).css("background", "pink");
		// 3.其余的兄弟去掉背景颜色隐式迭代
		$(this).siblings("button" ).css( "background","");
		});
	})
</script>