当前位置: 首页 > 工具软件 > jquery-koala > 使用案例 >

Jquery简述——write less do more

公孙锋
2023-12-01

Jquery是一款原生的js库

jQuery入口函数

jQuery(document).ready(function(){

})

可简写为:

$(function({

}))

原生js的入口函数:

document.οnlοad=function(){

}

原生js与jquery入口函数的区别:

  1. 原生js的入口函数只能有一个,编写多个时后面的会覆盖前面的;而jQuery的入口函数可以有很多
  2. 原生js等网页完全加载完成才会执行,包括文档、图片等的加载,而jQuery的入口函数不会等待图片的加载,网页DOM加载结束就会执行

jQuery$符冲突

符 发 生 冲 突 时 , 需 要 释 放 J q u e r y 的 符发生冲突时,需要释放Jquery的 Jquery符给别人用,此时使用jQuery.noConflict()命令来释放 , 并 用 j Q u e r y 代 替 ,并用jQuery代替 jQuery符进行编码,或者可以自定义替代:

var J = jquery.noConflict();

则在编码中可使用J代替$:

J(function({
    alert("hello world!");
}))

jQuery核心函数

$()就是jQuery的核心函数,它可以接收:

  1. 函数——入口函数

  2. 接收一个字符串

    2.1 接收字符串选择器

    2.2 接收字符串的代码片段

  3. 接收DOM元素

jquery核心函数会将获取到的DOM元素包装成一个jQuery对象返回。

jQuery对象

jQuery对象时一个伪数组

伪数组:

  1. 有0-(length-1)个元素
  2. 有length属性

Js静态方法和实例方法

// 定义一个js类(构造函数)
function Koala(){
    
}
// 添加静态方法
Koala.staticMethod=function(){
    alert("Koala's static method");
}
// 静态方法的调用
Koala.staticMethod();
// 添加实例方法(prototype)
Koala.prototype.sleep=function(){
    alert("sleepping")
}
// 实例方法的调用
var koala = new Koala();
koala.sleep();

$.each()和Object.forEach()

js的forEach方法

array.forEach(functon(data,index){

})

forEach只能遍历数组,不能遍历伪数组

jQuery的$.each()

$.each($(".class"),function(index,data){
    
}) 

$.each可以遍历伪数组和数组

map方法

原生js的map方法:

array.map(functon(data,index,array){

})

不能遍历伪数组

jQuery的map方法

$.map(obj,function(value,index){
    
})

each和map的区别:

  1. each的默认返回值是遍历的对象;map的默认返回值是一个空的数组;

  2. each遍历中无法改变遍历对象,而map可以在回调函数中通过return来对遍历的数组进行处理

其他常见静态方法

trim——去除字符串两边的空格
$.isWindow(obj)——判断当前元素是不是window
$.isArray()——判断是不是Array(真数组)
$.isFunction(Obj)——判断是不是函数

$.isFunction(jQuery):true,表明jQuery事实上就是一个函数(没有函数名,是一个立即执行的函数——匿名函数)

$.holdReady()控制入口函数的执行

$.holdReady(true)——暂停
$.holdReady(false)——启用

jQuery选择器

待补充

内容选择器

:empty——内容为空项(没有文本和子元素)
:parent——有文本或子元素(作为parent的项)
:contents(“text”)——有对应文本内容(包含)
:has(dom)——包含对应子元素的项
 类似资料: