jQuery基础知识（一）

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>