jQuery个人学习笔记

一、jquery：封装好的javascript类库
特点(面试容易问)：
1、抹平了各个浏览器之间的差异
2、可以链式操作DOM

JS中：
window.onload = function(){

}

//当文档加载完毕以后
jquery中： $(document).ready(function(){
})

//简单写法
$(function(){
})

以后写代码时
<script>
$(function(){
//这里书写代码
})
</script>

面试题：这两种写法的区别是什么？
前者是 当整个页面加载完毕以后，包括 html css js img
后者是 当文档加载完毕 不包括img
jquery中有一个特点： 任何东西都是方法，几乎没有属性

二、jquery选择器
注意：在jquery中不要通过数组下标的形式去取某一个元素，因为如果通过此方式取元素，当前元素就变成了一个原生JS对象
html:
<ul id = "list">
<li>111
<p>1-2</p>
</li>

<li class = "box">222</li>
<li>333</li>
<p>444</p>
</ul>
js:
之前：var olist = docuemnt.getElementById("list");
现在：
$(function(){
$("#list");//获取id元素
$("li");//获取标签元素
$(".box")//获取class
$("#list>p");//获取list下的p标签 层级选择器
$("#list>li>p");//获取list下的li下的p标签 层级选择器
$("li+p") //选择444
$("li~p")//选择li后所有的p标签




:first 获取选择器得到的 第一个 元素
console.log($("#list>li:first"))
console.log($("#list>li").first())

 

:last 获取选择器得到的 最后一个 元素
console.log($("#list>li:last"))
console.log($("#list>li").last())(常用)

(重要) :eq(index) 获取选择器得到的 指定下标 的元素
console.log($("#list>li:eq(4)")) //找到下标为4的li
console.log($("#list>li").eq(4))(常用)

 

:even 获取选择器得到的 下标为偶数的 元素
console.log($("#list>li:even"))
(even 和odd 一般做隔行换色时用)

:odd 获取选择器得到的 下标为奇数的 元素
console.log($("#list>li:odd"))

:gt(index) 获取选择器得到的 下标 > index 元素
console.log($("#list>li:gt(3)")) //找到大于下标为3的

:lt(index) 获取选择器得到的 下标 < index 元素
console.log($("#list>li:lt(3)"))//找到小于小标为3的

:not(selector) 找同级
console.log($("#list>li:not('.box')"));//找li中class不是box的li标签

:has(selector) 包含特定后代的元素，去掉那些不含有指定后代的元素。
console.log($("#list>li:has('p')")); ///找到li下的p元素标签(找子级)


})

 

 

三、设置css样式
<div id = box></div>

var oBox = $("#box");
//设置样式：元素.css("属性"，"属性值")
oBox.css("width","100");//px可以不写
//设置多个css样式：元素.css({
属性：属性值
属性：属性值
})
oBox.css({
"width":100,
"height":100,
"background":"red"
});
//获取css样式 元素.css("属性")
console.log(oBox.css("width"))

 

四、属性选择器

<ul id= "list">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li>555</li>
</ul>


<input type = "radio">
<input type = "checkbox">
js:
<script src = "引入jquery"></script>
<script>
var oList = $("#list"); //获取
console.log(oList.attr("id"))
//设置
oList.attr("data-id",20);
oList.attr("class","box");
oList.attr({
"data-url:"www",
"title":"哈哈哈"
"data-img":"abc"
});
//删除
oList.removeAttr("data-id")//只能一个一个删

</script>




1、对象.attr() 主要用在元素身上 用于获取或者设置元素的属性值
1、获取元素属性值 (getAttribute setAttribute)
对象.attr(属性名); $('p').attr('id'); $('p').attr('data-id');
2、给元素设置属性值
a、设置单个属性值
对象.attr(属性名,属性值);
b、设置多个样式值
对象.attr({
属性名1: 属性值1,
属性名2: 属性值2
});

对象.removeAttr(属性名); 删除元素的属性

 

var oList = $("#list");
//获取
console.log(oList.attr("id"))
//设置

oList.attr("data-id",20);
oList.attr("class",'box');
oList.attr({
"data-url":"www",
"title":"哈哈哈",
"data-img":"abc"
});

oList.removeAttr("data-id");

 

 

2、对象.prop() 主要用在表单身上 用法和attr一样
作用：用于获取或者设置元素的 selected/checked

console.log($("input[type='radio']").prop("checked")) 未选中 返回true false
console.log($("input[type='radio']").prop("checked",true)) 选中

console.log($("input[type='checkbox']").prop("checked")) 意思同上
console.log($("input[type='checkbox']").prop("checked",true))

 

3、对象.addClass(class名); 用于给元素添加class
对象.addClass('class1 class2');

对象.removeClass(class名); 用于给元素去除class

对象.toggleClass(class名); 如果元素存在需要添加的class，则去除，否则添加

var oList = $("#list");

oList.addClass("box box1 box2 box3");
oList.removeClass("box1");

//事件：
oList.click(function(){
oList.toggleClass("content"); //有content class名时 点击content就没有了
//用途：比如 点击切换颜色等等
})

4、对象.html() 获取或者设置元素的内容 //等价于innerHTML
对象.val() 获取或者设置文本框的值 // value
console.log($("input[type = 'text']").val())
对象.text() 获取或者设置元素的文本 //等价于innerText

 

五、节点选择器
<ul id="list">
<li>111</li>
<li class = "item2">222</li>
<li>333</li>
<li>444</li>
<li>555</li>
<li>
<p>
<a href = "##">百度</a>
</p>
</li>
</ul>

 

find();//查找后代元素 包括子孙级别 需要传参
console.log($("#list").find("a"));

children():查找所有后代元素
console.log($("#list").children());

siblings:查找除自己以外的同级元素
console.log($(".item2").siblings());

prev 上一个元素
console.log($(".item2").prev());

prevAll上面所有的元素
console.log($(".item2").prevAll());

next 下一个元素
console.log($(".item2").next());

nextAll 后面所有的元素
console.log($(".item2").nextAll());

parent()查找父级
console.log($(".item2").parent());

父级们
console.log($(".item2").parents());

面试题
this 与$this 的区别
前者是 原生JS的一个指向
后者是jquery对象的一个指向 后者是可以使用jquery方法的 前者不能使用
jquery的特点：链式操作DOM

 

六、节点操作
创建节点
var div = $("<div>111</div>")

插入节点(8种)
查找文本节点
console.log($("#list").contents())

内部插入
append(content|fn)
$("#list>.item2").append(div);

appendTo(content)
div.appendTo($("#list>.item2")) // 如果item2下设置一个span标签 append 和appendTo会插入到span之后

prepend(content|fn)
$("#list>.item2").prepend(div);

prependTo(content) // 如果item2下设置一个span标签 prepend 和prependTo会插入到span之前
div.prependTo($("#list>.item2"))

 

after(content|fn)
$("#list>.item2").after(div); //插入到item2同级之后

before(content|fn)
$("#list>.item2").before(div); //插入到item2同级之前

insertAfter(content)
div.insertAfter($("#list>.item2"));// 插入到item2同级之后

insertBefore(content)
div.insertBefore($("#list>.item2"));// 插入到item2同级之前

移除
$("#list>.item2").remove();//将item2删除

替换
$("#list>.item2").replaceWith(input);//将item2替换为input框

克隆
var item2 = $("#list>.item2").clone(true);
$("#list>.item2").before(item2);

如果加true则代表的是克隆事件，如果没有加true则不会克隆事件

 

七、尺寸获取
<style>

*{margin:0;padding: 0}

#parent{
position: relative;
width: 400px;
height: 400px;
background: red;
margin-left: 30px;
padding: 10px;
border:1px solid #ccc;
}

.item1{
width: 200px;
height: 200px;
background: yellow;
margin-left: 30px;
position: relative;
}

.child{

width: 100px;
height: 100px;
background: pink;
position: absolute;
left:10px;
}
</style>
</head>
<body style="height: 3000px;">
<div id="parent">
<div class="item1">
<div class="child"></div>
</div>
</div>
</body>
</html>
<script src="jquery-1.11.3.js"></script>
<script>

获取元素的宽度 高度
width() height() content内容区
innerWidth innerHeight() content + padding
outerWidth outerHeight() content + padding + border
console.log($("#parent").width())
console.log($("#parent").innerWidth())
console.log($("#parent").outerWidth())

元素的偏移量
offset() 距离页面的便宜量
position(); 计算距离父级的偏移量 不会计算margin的值 只会计算定位后的left top值

 

滚动条滚动的距离
$(document).scroll(function(){
console.log($(document).scrollTop());
})

 

如何获取页面的高度

获取可视区的高度、宽度
console.log($(window).height());
console.log($(window).width());

获取整个页面的宽度和高度
console.log($(document).height());
console.log($(document).width());

 

八、基础动画

var aBtn = $("button");

aBtn.eq(0).click(function(){
$("#box").show(1000,function(){
alert(1);
})
})

aBtn.eq(1).click(function(){
$("#box").hide(1000)
})

aBtn.eq(2).click(function(){
$("#box").toggle(1000)
})

/*
参数1 速度
参数2 动画类型
参数3 回调

 

九、滑动动画
body>
<button>下滑</button>
<button>上滑</button>
<button>切换</button>
<div id="box"></div>
</body>

<script src="jquery-1.11.3.js"></script>
<script>
var aBtn = $("button");

aBtn.eq(0).click(function(){
$("#box").slideDown(2000)
})

aBtn.eq(1).click(function(){
$("#box").slideUp(2000)
})

aBtn.eq(2).click(function(){
$("#box").slideToggle(2000)
})

</script>

 

十、透明度
<body>
<button>fadeIn</button>
<button>fadeOut</button>
<button>fadeTo</button>
<button>fadeToggle</button>
<div id="box"></div>
</body>

<script src="jquery-1.11.3.js"></script>
<script>
var aBtn = $("button");

aBtn.eq(0).click(function(){
$("#box").stop().fadeIn(5000)
})

aBtn.eq(1).click(function(){
$("#box").stop().fadeOut(5000)
})

aBtn.eq(2).click(function(){
$("#box").stop().fadeTo(5000,0)
})

aBtn.eq(3).click(function(){
$("#box").stop(true).delay(3000).fadeToggle(1000)
})

/*
fadeIn: 操作 透明度 display
参数1 速度
参数2 动画类型
参数3 回调

fadeOut: 操作 透明度 display

参数1 速度
参数2 动画类型
参数3 回调

fadeTo: 只操作透明度(用于 淡入淡出轮播图)
参数1：速度
参数2：透明度
参数3：动画类型
参数4：回调

*/

</script>

 

十一、自定义动画
<body>
<button id="btn">点击</button>
<div id="box"></div>

</body>

<script src="jquery-1.11.3.js"></script>
<script>
$("#btn").click(function(){
$("#box").stop().animate({
"left":300,
"top":300,

},2000).stop().delay(2000).animate({
"width":400,
"height":400
})
})

/*
参数1：对象 需要变换的对象
参数2：动画时间
参数3：动画类型
参数4：回调

 

清空动画队列
stop：true

延迟：
delay 参数1 延迟时间
写在stop()之后

*/
</script>

 

 

一、jquery-ajax
综合语法：
$.ajax({
type:"请求的方式",
url:"请求的地址",
data:"{请求的参数}",
dataType："请求的类型",
json:"jsonp" 当前接口是jsonp接口
jsonp:"重写callback的key值",
success:"成功的回调",
error:"失败的回调",
cache:"是否请求缓存中的数据" 服务器的状态码 304 从缓存中读取数据
contentType:"appplication/jspn (不模拟表单) application/www-url-form-urlencode(模拟表单)"
})

 

二 bind()
bind() 事件的绑定

参数1：type事件类型
参数2：data值
参数3: 回调

 

事件解绑
unbind
参数1：事件类型
参数2：需要解绑的事件名称

<script>
function fn(e){
console.log(e.data)
}

function fn1(e){
console.log("1111")

}

 

$("#list>li").bind("click",{a:1,b:2},fn)
$("#list>li").bind("click",{a:1,b:2},fn1)
//$("#list>li").unbind("click")

 

var li = $("<li>444</li>");
$("#list").append(li);
</script>

三 live()
live() 事件的绑定

参数1：type事件类型
参数2：data值
参数3: 回调

 

事件解绑
die
参数1：事件类型
参数2：需要解绑的事件名称

function fn(e){
console.log("2222")
}

function fn1(e){
console.log("1111")

}

$("#list>li").live("click",fn)

$("#list>li").live("click",fn1)
$("#list>li").die("click",fn)

 

var li = $("<li>444</li>");
$("#list").append(li);

四、delegate()
delegate() 事件的绑定

参数1：type事件类型
参数2：data值
参数3: 回调

 

事件解绑
undelegate
参数1：事件类型
参数2：需要解绑的事件名称

 

它的事件是给子级进行绑定的


function fn(e){
console.log(e.data)
}

function fn1(e){
console.log("1111")

}

 

$("#list").delegate("li","click",{a:1,b:2},fn)
$("#list").delegate("li","click",{a:1,b:2},fn1)
//$("#list>li").unbind("click")

 

var li = $("<li>444</li>");
$("#list").append(li);

五、on()
on() 事件的绑定

参数1：events 通过空格可以给一个元素添加多个事件
参数2：data值
参数3: 回调

 

事件解绑
off
参数1：事件类型
参数2：需要解绑的事件名称

function fn(e){
console.log(e.data)
}

function fn1(e){
console.log("1111")

}

 

$("#list").on("click","li",{a:1,b:2},fn)
$("#list").off("click")

 

var li = $("<li>444</li>");
$("#list").append(li);

六、事件对象
e.type
e.button

e.data
e.which
e.stopPropagation();事件冒泡
e.preventDefault();组织默认事件
e.pageX
e.pageY
e.target 返回的对象是原生js对象

在jq里面没有
e.clientX
e.clientY
e.offsetX
e.offsetY

*/

$("#box").on("click",[1,2,3,4],function(e){
//console.log(e)
//console.log(e.type)
//console.log(e.button)
//console.log(e.data)
//console.log(e.which)
//e.stopPropagation();
//e.preventDefault();

console.log($(e.target))

七 jquery高级
如何给jquery元素添加方法
$.fn.extend()

在jquery中$ == jQuery

如何给jquery对象添加方法
$.ajax() $.get() $.post()

$.extend()

语法：
$.extend({
方法名称:function(){
....逻辑
}
})

$.proxy() == bind 可以理解成等价与bind

参数1：是需要代理的函数
参数2: context --- >上下文 参数1里面这个函数的作用域 this的指向

返回值是一个新的函数体

 

 

 

 

jQuery.fn.extend({
check: function() {
return this.each(function() { this.checked = true; });
},
uncheck: function() {
return this.each(function() { this.checked = false; });
}
});

 

$.fn.extend({
zyh:function(val){
return this.each(function(){
this.innerText = val;
})
}
})

$.fn.extend({
setStyle:function(options){
return this.each(function(){
for(var key in options){
if(key == "background"){
this.style[key] = options[key] ;
}else{
this.style[key] = options[key] + 'px';
}


}
})
}
})

$("#box").setStyle({
"width":100,
"height":100,
"background":"red"
})
*/

 

/*

$.extend({
numRandom:function(n,m){
return parseInt(n + Math.random()*(m+1-n));
}
})

console.log($.numRandom(3,5))

*/

 

// $(document).on("click",function(){
// console.log($(this))
// })

 

function fn(){
console.log(this);
}

$(document).on("click",$.proxy(fn,window))

 

 

$("#box").hover(
function(){
alert('移入')
},
function(){
alert("移除");
}
)