jQuery
一、jQuery
- 获取dom元素
// 1.获取 DOM 元素
// 操作方法：JQ 选择器（根据选择器类型快速获取需要的元素）
$([selector],[context])
$('#box')
$('.imgBox')
$('.box a')
$('a',box)
...
/*JQ 支持的选择器：传统 CSS3 中的大部分都支持、还支持一些自己独有的
* :eq(n) 获取集合中索引为 n 的
* :gt(n) 大于这个索引的
* :lt(n) 小于这个索引的
*/
// ------------------------------
// 节点之间关系的属性：用 JQ 选择器获取的元素，我们设置变量名的时候一般都以$开始
// 还可以再设置对应的选择器进行二次筛选
let $box = $('.box');
$box.children('a'); // 获取对应的子元素
$box.find('a'); // 获取对应的后代元素
$('a').filter('.active'); // 同级筛选（在所有的A中筛选出具备 CLASS='ACTIVE' 样式类的 A）
$box.prev();
$box.prev('p'); // 获取它上一个标签名为 P 的哥哥
$box.prevAll();
$box.next();
$box.nextAll('.link');
$box.siblings(); // 获取所有的兄弟
$box.index(); // 获取索引
$box.parent(); // 获取父元素
$box.parents(); // 获取所有的祖先元素，一直到 document
- dom增删改
let str = `<div id="box" class='box'>
...
</div>`;
$('body').append(str); // 追加到容器 BODY 的末尾
$('body').html(str); // 等价于 innerHTML $('body').html()不传参是获取 BODY 中的 HTML 内容，除了这个方法还有 text 方法，等价于 innerText
$A.insertBefore($B); // 把 $A 放到 $B 的前面（注意点：$A,$B 都是页面中已经存在的元素）
$A.insertAfter($B); // 把 $A 放到 $B 的后面
$(`<div id="box" class='box'>
哈哈
</div>`).insertBefore($A); // 需要把新增加元素放到 $A 前面，需要把字符串用 $() 包起来，相当于创建了一个元素
$A.appendTo($B); // $B.append($A) 在 $B 容器的末尾追加 $A
$A.prependTo($B); // $B.prepend($A) 在 $B 容器的开头追加 $A
$A.clone(); // 实现元素的克隆
$A.remove(); // 实现元素的删除
// 操作表单元素的内容
$inp.val() // 获取表单元素内容
$inp.val('AAA') // 设置表单元素内容
// html和text方法是操作非表单元素内容的
- 操作自定义属性
$box.attr('data-type') // 获取自定义属性值
$box.attr('data-type','B') // 设置自定义属性值
$box.attr({
'type':1,
'name':'AA'
}); // 批量设置
$box.removeAttr('data-type'); // 移除自定义属性
// 表单元素操作内置或者自定义属性一般使用 prop 和 removeProp
$radio.prop('checked')
$radio.prop('checked',true)
- 操作CSS样式（盒子模型属性）
// 设置样式
$box.css('width',200); // css 方法是设置或者批量设置样式（原理是设置 STYLE 行内样式）
// $box.css({ width:200,height:200 })，写的值不加单位，方法会帮我们自动设置上 px 单位
$box.addClass('active');// 设置样式类（原理是对 className 的操作），removeClass 是移除，hasClass 验证是否存在某个样式类，toggleClass 之前有就是移除，没有就是新增
// 获取样式
$box.css('width'); // 不设置值的时候就是获取（原理是 getComputedStyle，所有经过计算的样式都可以获取）
$box.offset(); // 当前元素距离 BODY 的左偏移和上偏移
$box.position(); // 当前元素距离父参照物的左偏移和上偏移
$box.innerWidth/.innerHeight/.outerWidth/.outerHeight() // 等价于 clientWidth / Height 和
offsetWidth / Height
$(document).scrollTop([val]); // 可以获取或者设置 scrollTop 的信息，对应的方法 .scrollLeft
- 其它有助于项目开发的方法
// 事件处理
// $元素.on([event type],[function])
// $元素.off([event type],[function])
// $元素.bind() $元素.unbind() $元素.delegate() ...
// $元素.click() .mouseover .mouseout ...等常用事件的快捷绑定
$box.on('click',function(){});
$box.click(function(){});
// 动画处理
// .animate([目标样式],[总时间],[运动方式],[运动完做的事情])
// .stop / .finish
$box.stop().animate({
top:100,
left:200
},1000,'linear',function(){});
// AJAX 请求处理
let _DATA=null;
$.ajax({
url:'json/product.json',
method:'GET',
async:false,
dataType:'json',
success:result=>{
// result:当请求成功执行 success 函数，result 就是从服务器获取的结果
_DATA=result;
}
});
// 常用的工具方法
$.each([数组、类数组、对象],function(index, item){
// 遍历数组中的每一项 index:索引 item:当前循环这一项（对象：index 是属性名 item 属性值）
});
$('A').each(function(index,item){});
// $.toArray()转换为数组 $.merge()数组合并 $.makeArray() 把类数组转换为数组 $.uniqueSort() 去重加排序 $.type数据类型检测 ...
- jq的动画
// 1. animate()
// $(selector).animate(target, duration,easing动画效果, after)
let $btn = $('.btn');
$btn.click(function () {
// 这个事件函数中，如果你要用 this，就不要用箭头函数
$('.animate').animate({
width: 400,
height: 400
}, 2000)
});
// 2. stop() 停止元素当前正在执行的动画，不管它是否执行完；（用来清除动画），一般用来动画开始前先清除之前的动画；
$btn.click(function () {
// 这个事件函数中，如果你要用 this，就不要用箭头函数
$('.animate').animate({
width: 400,
height: 400
}, 2000);
setTimeout(() => {
$('.animate').stop();
}, 1000);
});
// 3. finish() 结束当前动画，忽略当前动画的时间，直接到终点；
$btn.click(function () {
// 这个事件函数中，如果你要用 this，就不要用箭头函数
$('.animate').animate({
width: 400,
height: 400
}, 2000);
setTimeout(() => {
$('.animate').finish();
}, 800);
});
- jq 绑定事件
// 1. 把事件名中的 on 去掉，变成 jq 对应的方法，事件函数以回调的形式传给对应的方法；如原生的 onclick 事件，在 jq 中变成 click(事件函数) 方法
let $btn2 = $('.btn2');
/*$btn2.click(function () {
console.log(this); // this 还是绑定当前事件的元素，并且原生的元素对象；
$(this).css({
backgroundColor: 'red'
});
});*/
// 2. jq 中提供了一个 on 方法，on 方法有两个参数，第一个是去掉 on 的事件名，第二个参数是事件函数
$btn2.on('click', function () {
console.log(this); // this 是绑定当前事件的元素对象（原生）
});
// 3. off() 方法，解绑事件（移除事件）
// $btn2.off('click');
// 4. trigger() 用代码触发事件执行；
$btn2.trigger('click');
- ajax 方法
// ajax 方法是 jQ 的静态方法；ajax 定义在 jQ 自己身上，没有定义在原型上，只有 jQuery 自己能调用
$.ajax({
url: 'json/data.json', // 接口
method: 'GET', // http method 请求方式，默认'GET'
async: true, // 是否异步，默认值 true,表示异步；
dataType: 'json', // 数据类型，因为 jq 的 ajax 帮我们格式化数据，所以告诉它数据类型
data: {
id: '17',
price: 1000
}, // POST 请求的参数，是发送给服务器的数据
success (data) {
// 如果 ajax 请求成功会调用这个函数；这个 data 就是请求回来的数据，并且jq会帮我们处理成对象，不用我们再 JSON.parse()
console.log(data);
},
error (err) {
// 如果 ajax 请求失败，会调用这个函数
console.log(err);
}
});
- each
// jq 的 each 可以用来遍历数组和对象
// 1. 遍历一个数组：
let ary = [1, 2, 3, 4, 5];
$.each(ary, function (index, item) {
// console.log(index, item);
});
// 2. 遍历一个对象
let obj = {
name: 'mabin',
age: 18,
title: 'Commander'
};
$.each(obj, function (key, value) {
// console.log(key, value);
});
// 3. jq 隐式调用 each 方法
$('.header li').click(function () {
// $('.header li') 获取来的是一个集合，jq 默认调用 each 方法，给集合中的每一个都绑定事件；
console.log($(this).index());
});
- 原型挂载原理
(function () {
var version = '1.1.3',
jQuery = function (selector, context) {
return new jQuery.prototype.init(selector, context);
};
// 函数有三种角色，其中一种是对象，把 jQuery 当成一个对象，为这个对象增加一个 fn 属性，这个属性的值是 jQuery 的原型；
jQuery.fn = jQuery.prototype = {
jquery: version,
constructor: jQuery, // 给原型重定向后需要重新制定 constructor 属性
// .... 很多方法
};
// 给 jQuery 自身和 jQuery 的原型增加一个属性 extend，值都是一个函数；
jQuery.extend = jQuery.fn.extend = function () {
// .....
}; // extend 是用来给 jQuery 自身或者原型上增加方法的
var init = jQuery.fn.init = function () {
// ...
};
init.prototype = jQuery.fn; // 让 init 的原型也指向了 jQuery 的原型；此时，init 的实例同样可以访问 jQuery 的原型，此时 init 的实例相当于是 jQuery 的原型；
window.jQuery = window.$ = jQuery;
})();
307
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
