jQuery入门

最新推荐文章于 2025-08-15 22:56:20 发布

weixin_33937913

最新推荐文章于 2025-08-15 22:56:20 发布

阅读量65

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5bdad6555188257f7f1383bf

jQuery的优势

DOM操作方便。
解决了浏览器的兼容性问题：（浏览器宽高，event,监听等）

学习路线

常用方法
高级方法
熟练使用
理解原理

安装方式

download到本地
npm/yarn 包管理
引入CDN

获取DOM

与CSS选择器比较类似，选择的是一个类数组，$('div')[0]才代表DOM元素；
注意区分DOM对象和jQuery对象，例如：$('this')才是jQuery对象，才可以使用jQuery方法；
$('')里面可以放以下几类东西：
- CSS选择器
- 原生DOM，可以是一个数组，也可以是单个DOM
- function，相当于$(document).ready(function)，自动执行函数，DOM文档解析完成后立即执行，解决了异步问题
- null，返回空对象

文本属性text，html和val

text(): 取值赋值都是一组，拼接字符串
html(): 取值只取第一个，赋值赋一组
val(): 取值只取第一个，赋值赋一组，主要用于表单元素

属性attr和prop

attr即attribute，既可以获取和设置DOM固有的属性（如：id/class/href 等）也可以设置自定义的新增属性：

$('div').attr('id'); //获取id
$('div').attr('id', 'navbar'); //设置单个属性
$('div').attr({         //传入对象（键值对），设置多个属性
    id:'navbar',
    age: '18'
})
复制代码

prop即property，仅支持DOM固有属性，语法与attr一致；

删除属性：

removeAttr('id');
removeProp('age'); //不能删除id/class等自带属性；
复制代码

prop可以动态的获取，attr不能动态的获取

添加和删除class

addClass('container') 支持链式操作，（一般设置类方法都会返回this）
removeClass('container')
hasClass('container') 不支持链式操作，返回布尔值
toggleClass('container') 开关式操作

CSS样式获取和操作

$('div').css('width') 返回值是'100px'字符串，而$('div').width返回数值，获取多个样式时，可以传数组，返回值是对象；
$('div').css('width','100px')设置样式，如果设置多个样式，可以传入对象；
关于width：

$('div').width   //content
$('div').innerWidth  //content+padding
$('div').outerWidth  //content+padding+border
$('div').outerWidth(ture) // content+padding+border+margin
复制代码

关于position：

$('div').offset()  //相对于文档而言的位置，可以传值{top:100px,left:100px}
$('div').position()  //相对于父级（有定位的父级），不可以传值
复制代码

关于scroll：

$(document).scrollTop();
$(document).scrollLeft();
复制代码

DOM筛选和遍历

筛选方法

$('li').find('.container');
$('li:first'); //同样用法还有last/odd/even/eq(2)
$('li').first(); //同样用法还有last()/eq(2), 不包括odd/even
$('li:eq(2)').prev(); //返回上一个标签，还有prevAll()/next()/nextAll()/siblings()
$('li').filter(function(index,ele){return true/false} //选取返回值为true的元素
$('li').not('.test');
$('li').is('.test'); //返回布尔值
$('li').slice(2,4); //选取第二三号元素，取头不取尾[start,stop)
复制代码

each: 只是遍历，返回的还是之前的DOM不做筛选

$('li').each(fucntion(index,ele){
    var arr= [];
    arr.push($(this).find('.name').text()); //find 方法查找元素
    }
arr.join(',');
复制代码

map: 遍历，并筛选DOM，返回筛选后的对象

$('li').map(fucntion(index,ele){
    if($(ele).find('.age').text()>15)
    return ele;
    }
复制代码

$('li').has('p')查找有p子元素的li

jQuery 整体架构封装思想

如何全局使用jQuery： window.jQuery=window.$=jQuery;
无new操作：再套一层 init();
改变原型：init.prototype = jQuery.prototype
链式操作： return this;