JQuery基本知识汇总；JQuery常用方法；浅入了解JQuery

Posted 2021-01-28 gzy-tw

一、jQuery对象与javascript对象

　　①JavaScript入口函数比jQuery入口函数执行的晚一些；

　　JQuery的入口函数会等页面加载完成才执行，但是不会等待图片的加载；

　　JavaScript入口函数需要等待页面加载和图片加载完成才执行；

　　JavaScript入口函数：window.onload = function(){}；

　　JQuery入口函数：①$(document).ready(function(){});

　　　　　　　　　    ②$(function(){});

　　②JQuery对象与Dom（JavaScript对象）对象的区别：

　　　　DOM对象：使用JavaScript方式获取到的元素是DOM对象。

　　　　JQuery对象：使用JQuery方式获取到的元素是JQuery对象。

　　③JQuery对象与DOM对象的联系：

　　　　1、JQuery对象其实就是JavaScript对象的集合，JQuery对象里面存放了一大堆JavaScript对象。

　　　　2、JQuery对象不能与Dom对象相互调用{$("li").setAttribute("name","he");   //代码报错

　　　　　　　　　　　　　　　　　　　　　document.getElementById("section").show();//代码报错　　

　　　　}

　　　　3、DOM对象转JQuery对象：

　　　　　　　　var cloth = document.getElementById("cloth");    //这是DOM对象

　　　　　　　　$(cloth).innerText("测试");

　　　　　 JQuery对象转DOM对象：

　　　　　　　　var $li = $("li");

　　　　　　　　$li[0].style.backgroundColor = "red";  //利用取下标的方式将JQuery对象转换成DOM对象

　　　　　　　　或者$li.get(0).style.backgroundColor = "red";   //利用get()方法也能达到同样效果

二、JQuery常用方法

　　①index()方法：返回当前元素在所有兄弟元素当中的索引

　　　　<li><a>1</a></li>

　　　　<li><a>2</a></li>

　　　　<li><a>3</a></li>

　　　　$(function(){

　　　　　　$("li").click(function(){

　　　　　　　　console.log($(this).index());

　　　　　　});

　　　　});

　　②CSS操作

　　　　隐式迭代：设置操作的时候会给JQuery内部的所有对象都设置上相同的值，获取的时候只返回第一个元素对应的值。

　　　　addClass()：添加一个类，不影响之前存在的类。

　　　　removeClass()：移除一个类。

　　　　hasClass()：判断一个类是否存在。

　　　　toggleClass()：切换类，如果类存在就移除，没有就添加。

　　③属性操作

　　　　attr(name,value):使用方法$("img").attr("alt","图片不存在");

　　　　对于布尔值类型的属性，不使用attr()放法，应该使用prop()放法，用法与attr()一样。

　　④动画操作

　　　　show(): 可以传参数，也可不传参数；不传参数则没有动画效果，参数可以是好毫秒值，也可以是字符串：fast=200ms、normal=40ms、slow=60ms。

　　　　hide()：隐藏。

　　　　slideDown():向上滑入可接收两个参数，slideDown(1000,function(){})。

　　　　slideUp()：向上滑出。

　　　　slideToggle()：如果是滑入状态就滑出，反之。

　　　　fadeIn()：淡入。

　　　　fadeOut():淡出。

　　　　fadeToggle()：切换淡入淡出。

　　　　自定义动画animate()

　　　　　　1、第一个参数，必填：是一个对象，需要动画的样式。

　　　　　　2、第二个参数：执行时间。

　　　　　　3、第三个参数：动画执行效果。

　　　　　　4、第四个参数：回调函数。

　　　　stop()方法：停止当前执行的动画，一般写在动画前面停止别人的动画立即执行自己的动画。

　　　　　　1、例如：.stop.slideDown();    //立即执行slideDown()

　　　　　　2、第一个参数：是否清除动画队列，ture是；false否。

　　　　　　3、第二个参数：是否跳转到当前动画的最终状态效果：true是，false否。

　　　　音乐播放是DOM对象，不能调用eq()，需要使用get()获取。

　　⑤创建JQuery对象

　　　　append()：添加节点到子元素的最后面。

　　　　prepend()：添加节点到子元素的最前面。

　　　　appendTo()：把节点添加到父元素中，参数是父元素。

　　　　perpendTo()：把节点添加到父元素中的最前面，参数是父元素。

　　　　after():添加到父元素的后面。

　　　　before()：添加到父元素的前面。

　　　　empty()：清空一个元素的内容，并且会把对应的事件也清空。

　　　　html("")：把元素内容设置为空，不会清除内容上的事件。

　　　　remove()：删除节点，与empty()是清除子节点；remove是清除自己和后代节点。

　　　　clone(): 参数false不会复制内容绑定事件，true同时复制内容绑定事件。

　　　　val()：获取内容。