程序员

JQuery笔记

2018-09-06  本文已影响4人  android小菜鸡一枚

1.入口函数

// 原生JS入口函数
window.onload = function(){
}
//jquery入口函数
$(document).ready(function(){
});
$(function(){
});

Dom对象和jq对象不同，Jq对象相当于一个数组，里面包含了Dom对象
$(Dom对象)  Dom对象转换为jq对象
$li.get(0)或$li[0] 将jq对象转换为Dom对象
原生JS和jQuery入口函数的加载模式不同：
jQuery入口函数的多种写法：
jQuery冲突问题：
核心函数：

$();就代表调用jQuery的核心函数

jQuery对象

jQuery对象是一个伪数组

静态方法和实例方法
//1.定义一个类
function AClass(){
}
//2.给这个类添加一个静态方法，直接添加给类的就是静态方法
AClass.staticMethod = function(){}
//静态方法通过类名调用
AClass.staticMethod();
//3.给这个类添加一个实例方法
AClass.prototype.instanceMethod = function(){}
//实例方法通过类的实例调用
// 创建一个实例（创建一个对象），调用实例方法
var a = new AClass();
a.instanceMethod();

var arr=[1,2,3,4];
$.each(arr, function(index,value){});
jQuery的each方法可以遍历数组和伪数组

第一个参数：要遍历的数组
第二个参数：没遍历一个元素之后执行的回调函数
回调函数参数：
第一个参数：遍历到的元素
第二个参数：遍历的索引
$.map(arr, function(value, index){} );

each静态方法默认的返回值就是，遍历谁就返回谁，map静态方法默认的返回值是一个空数组。
each方法不支持在回调函数中对遍历的数组进行处理，map方法可以自回调函数中通过return对遍历的数组 $.map(arr, function(value, index){ return value + index;} );

去除字符串两端的空格
返回值：去除空格之后的字符串
var res = $.trim(str);

判断传入的对象是否为window对象

判断传入的对象是否为真数组

判断传入的对象是否为函数
jQuery框架本质上是一个函数$.isFunction(jQuery);

暂停ready的执行，恢复时$.holdReady(false);

通过webstorm简化操作

2.选择器

2.1 基本选择器
$("#four")  ID选择器
$(".green") 类选择器
$("li") 标签选择器
$("#four,.green") 并集选择器
$("li.green") 交集选择器
2.2 层级选择器
$("#father>p") 子代选择器
$("#father p") 后代选择器
2.3 过滤选择器
$("li:first").css("backgroundColor","red");
:first :last
:eq(index)
:gt(index) :lt(index)
:odd :even
2.4 筛选选择器(方法)

children("ul")
parent()
next() prev()
siblings()
find("li")
eq(index)

2.5 内容选择器

3.属性操作

属性

属性和属性节点
attr方法
prop方法
CSS类
HTML代码/文本/值

4.CSS

CSS
位置和尺寸

5.事件

事件绑定

jQuery中有两种绑定事件方式
1.eventName(fn)
编码效率略高，部分事件jQuery没有实现，所以不能添加
2.on(eventName,fn)
编码效率略低，所有js事件都可以添加
可以添加多个相同或者不同类型的事件，不会覆盖

事件移除

$(''button").off()
off不传参数会移除所有的事件
$("button").off("click")
off方法如果传递一个参数，会移除所有指定类型的事件

jQuery事件冒泡和默认行为
$(".son").click(function(){
  return false;
});
//或者
$(".son").click(function(event){
  event.stopPropagation();
});

$("a").click(function(){
  return false;
});
//或者
$("a").click(function(event){
  event.stopPropagation();
});
自动触发事件

$(".father").trigger("click");
用trigger自动触发事件，会触发事件冒泡，会触发默认行为
$(".son").triggerHandler("click");
用triggerHandler自动触发事件，不会触发事件冒泡，不会触发默认行为

自定义事件

想要自定义事件，必须满足两个条件
事件必须通过on绑定的，事件必须通过trigger来触发
$(".son").on("myClick",function(){ });
$(".son").trigger("myClick");

jQuery事件命名空间

事件是通过on来绑定的，通过trigger触发事件
$(".son").on("click.zs",function(){});
$(".son").on("click.ls",function(){});
$(".son").trigger("click.zs");
利用trigger触发子元素带命名空间的事件，那么父元素带相同命名空间的事件也会被触发，而父元素没有命名空间的事件不会被触发
利用trigger触发子元素不带命名空间的事件，那么子元素所有相同类型的事件和父元素所有相同类型的事件都会被触发

事件委托

在jQuery中，如果通过核心函数找到的元素不止一个，那么在添加事件的时候，jQuery会遍历所有找到的元素，给所有的找到的元素添加事件，$("ul>li").click(function() {});
$("ul").delegate("li","click",fn);

jQuery移入移除事件

mouseover/mouseout子元素被移入移出也会触发父元素的事件
mouseenter/mouseleave子元素的移入移出不会触发父元素的事件（推荐）
hover(fn,fn);可以同时监听移入移出

6.效果

5.节点操作

特殊属性操作
val()方法
html()和text()方法
width()和height()方法
获取页面可视区的宽高：$(window).width() 和 $(window).height()
width()//width
innnerWidth()//padding+width
outerWidth()//padding+width+border
outerWidth(true)//padding+width+border+margin
scrollTop()和scrollLeft()

$("html,body").animate({scrollTop:0},3000);

offset()和position()

offset();//获取元素的相对于document的位置
position();//获取元素相对于有定位的父元素的位置

上一篇下一篇

猜你喜欢

热点阅读