jquery学习
jquery和原生js的区别
<script type="text/javascript">
// 1.通过原生的js入口函数可以拿到DOM元素
window.onload=function(e){
var img=document.getElementsByTagName('img')[0];
// 2.通过原生的js入口函数可以拿到DOM元素的宽高
var width=window.getComputedStyle(img).width;
console.log('onload:\t'+img+'\n'+width);
}
// 原生js和jquery入口函数的加载模式不同
// 原生js会等到DOM元素加载完毕,并且图片也加载完成
// jquery会等到DOM元素加载完毕,但不会等到图片也加载完毕并执行
$(document).ready(function(){
// 1.通过jquery入口函数也可以拿到DOM元素
var $img=$('img');
console.log($img);
// 2.通过jquery入口函数不可以拿到DOM元素的宽高
var $width=$img.width();
console.log('ready',$width);
});
</script>
jquery的入口函数其他写法
<script type="text/javascript">
// 第一种
$(document).ready(function(){
alert('hello');
});
// 第二种
$(function(){
alert('$hello');
});
// 第三种
jQuery(function() {
alert('JQueryhello');
});
jQuery(document).ready(function() {
alert('jQuery(document) hello');
});
</script>
jquery的冲突问题
<script type="text/javascript">
// 1.释放$的使用权
// 注意点:释放操作必须在编写其它jquery代码之前
// jQuery.noConflict();
// jQuery(function(){
// alert('hello jQuery');
// })
// 2.自定义符号
var k=jQuery.noConflict();
k(function(){
alert('hello jQuery');
})
</script>
jQuery核心函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script type="text/javascript">
// $():就代表调用jQuery的核心函数
// 1.接收一个函数
$(function() {
alert('hello jjjj');
// 2.接收一个字符串选择器
// 返回一个jQuery对象，对象中保存找到的DOM元素
var $div = $('div');
console.log($div);
// 2.2接收一个字符串代码片段
var $p = $('<p>11111</p>');
console.log($p);
$div.append($p);
// 3.接收一个DOM元素
会被包装成一个jquery对象返回给我们
var span = document.getElementsByTagName('span')[0];
console.log(span);
var $span = $(span);
console.log($span);
})
</script>
</head>
<body>
<div>
</div>
<span>
</span>
</body>
</html>
静态方法和实例方法
<script type="text/javascript">
// 1.定义一个类
function AClass(){
}
// 2.给这个类添加一个静态方法
// 直接添加给类就是静态方法
AClass.staticMethod=function(){
alert('staticMethod');
};
// 静态方法通过类名调用
AClass.staticMethod();
// 3.给这个类添加一个实例方法
AClass.prototype.instanceMethod=function(){
alert('instanceMethod');
}
// 实例方法通过类的实例调用
var t=new AClass();
// 通过实例调用实例方法
t.instanceMethod();
</script>
each方法
<script type="text/javascript">
var arr=[1,3,4,6,7,3]
var obj={
0:1,
1:3,
2:4,
5:66,
length:5,
}
// 利用jquery的each静态方法遍历数组
$.each(obj,function(value,index){
console.log(index,value);
})
// 原生的forEach方法只能遍历数组,不能遍历伪数组
obj.forEach(function(value,index){
console.log(index,value);
})
</script>
map方法
<script type="text/javascript">
var arr = [1, 3, 4, 6, 7, 3]
var obj = {
0: 1,
1: 3,
2: 4,
5: 66,
length: 5,
}
// 利用jquery的each静态方法遍历数组
$.map(obj, function(value, index) {
console.log(index * 5, value);
})
// 原生的forEach方法只能遍历数组,不能遍历伪数组
arr.forEach(function(value, index, array) {
console.log(index, value);
})
</script>
jQuery中的each和map方法的区别
each静态方法默认的返回值就是遍历谁就返回谁
map静态方法默认返回值是一个空数组
each静态方法不支持在回调函数中对遍历的数组进行处理
map静态方法可以在回调函数中通过return对遍历的数组进行处理然后生成新数组返回
内容选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>内容选择器</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
<style type="text/css">
div{
width:50px;
height:100px;
background:red;
margin: 10px 0;
}
</style>
<script type="text/javascript">
// :empty作用:找到既没有文本内容也没有子元素的指定元素
// var $div=$('div:empty');
// console.log($div);
// :parent作用:找到有文本内容或有子元素的指定元素
// var $div=$('div:parent');
// console.log($div);
// :contains(text)作用:找到包含指定文本内容的指定元素
// var $div=$('div:contains("我是div")');
// console.log($div);
// :has(selector)作用:找到包含指定子元素的指定元素
var $div=$('div:has("span")');
console.log($div);
</script>
</head>
<body>
<div></div>
<div>我是div</div>
<div>它们警告框</div>
<div><span></span></div>
<div><p></p></div>
</body>
</html>
属性节点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script type="text/javascript">
$(function() {
// 1.attr(name|pro|key,val|fn)
// 作用:获取或设置属性节点的值
// 传递一个参数,代表获取属性节点的值
// 传递两个参数,代表设置属性节点的值
// 注意点:无论找到多少个元素,都只会返回第一个元素指定的属性节点的值
$("span").attr('class', 'box');
console.log($('span').attr('class'));
// 2.removeAttr()
// $('span').removeAttr('class');
$('span').removeAttr('class name');
})
</script>
</head>
<body>
<span class="span1" name="t">
</span>
<span class="span2" name="t2">
</span>
</body>
</html>
prop方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script type="text/javascript">
$(function() {
$("span").eq(0).prop('demo','test');
$("span").eq(1).prop('demo','sssss');
console.log($('span').prop('demo'));
$('span').removeProp('demo');
// 注意点:prop方法不仅能操作属性,还能操作属性节点
$('span').prop('class','prop');
})
</script>
</head>
<body>
<span class="span1" name="t">
</span>
<span class="span2" name="t2">
</span>
</body>
</html>
类操作方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
<style type="text/css">
.class {
width: 100px;
height: 50px;
border: 1px solid black;
margin: 5px;
background-color: brown;
}
.class1 {
width: 100px;
height: 50px;
border: 1px solid #FF0000;
margin: 5px;
background-color: aqua;
}
.class2 {
width: 200px;
height: 100px;
border: 1px solid skyblue;
margin: 10px;
background-color: #87CEEB;
}
.class3 {
width: 300px;
height: 150px;
border: 1px solid greenyellow;
margin: 15px;
background-color: antiquewhite;
}
</style>
<script type="text/javascript">
/*
1.addClass(class|fn)
作用：添加一个类
如果要添加多个，多个类名之间用空格隔开
2.removeClass([class|fn])
作用：删除一个类,默认删除当前class
如果想删除多个，多个类名之间用空格隔开
3.toggleClass(class|fn[,sw])
作用：切换类
有就删除，没有就添加
*/
$(function() {
var btns = document.getElementsByTagName('button');
console.log(btns);
btns[0].onclick = function() {
$('div').addClass('class1 class2');
};
btns[1].onclick = function() {
$('div').removeClass();
};
btns[2].onclick = function() {
$('div').toggleClass('class3');
};
});
</script>
</head>
<body>
<button>添加类</button>
<button>删除类</button>
<button>切换类</button>
<div class="class">54</div>
</body>
</html>
文本值操作方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script type="text/javascript">
$(function() {
var btns = document.getElementsByTagName('button');
btns[0].onclick = function() {
$('div').html('<p>我是一个段落<span>我是span</span></p>');
};
btns[1].onclick = function() {
console.log($('div').html());
};
btns[2].onclick = function() {
$('div').text('<p>我是一个段落<span>我是span</span></p>');
};
btns[3].onclick = function() {
console.log($('div').text());
};
btns[4].onclick = function() {
$('input').val('<p>我是一个段落<span>我是span</span></p>');
};
btns[5].onclick = function() {
console.log($('input').val());
};
});
</script>
</head>
<body>
<button>设置HTML</button>
<button>获取HTML</button>
<button>设置text</button>
<button>获取text</button>
<button>设置value</button>
<button>获取value</button>
<div class="class"></div>
<input type="text">
</body>
</html>
操作样式方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script type="text/javascript">
$(function() {
// 1.逐个设置
// $('div').css('width',100);
// $('div').css('height',100)
// $('div').css('background','blue');
// 2.链式设置
// $('div').css('width','150px').css('height','150px').css('background','red')
// 3.批量设置
$('div').css({
width:'200px',
height:'200px',
background:'green'
});
// 4.获取css样式
console.log($('div').css('width'));
});
</script>
</head>
<body>
<div></div>
<div></div>
</body>
</html>
尺寸和位置操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
<style type="text/css">
*{
margin:0;
padding:0;
}
.father{
width:200px;
height:200px;
background:red;
border:50px solid #000;
margin-left: 50px;
position: relative;
}
.son{
width:100px;
height:100px;
background:blue;
position: absolute;
left:50px;
top: 50px;
}
</style>
<script type="text/javascript">
$(function() {
var btns=document.getElementsByTagName('button');
btns[0].onclick=function(){
console.log($('.father').css('width'));
// offset([coordinattes])
// 作用:获取元素距离窗口的偏移位
console.log($('.son').offset().left);
}
btns[1].onclick=function(){
$('.father').css('width','450px');
$('.son').offset({
'left':10
})
}
});
</script>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<button type="button">获取</button>
<button type="button">设置</button>
</body>
</html>
scrollTop方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
<style type="text/css">
*{
margin:0;
padding:0;
}
.scroll{
width: 100px;
height: 100px;
border: 1px solid red;
overflow: auto;
}
</style>
<script type="text/javascript">
$(function() {
var btns=document.getElementsByTagName('button');
btns[0].onclick=function(){
// 获取滚动的偏移位
console.log($('.scroll').scrollTop());
// 获取网页滚动的偏移位
console.log($('body').scrollTop()+$('html').scrollTop());
}
btns[1].onclick=function(){
// 设置滚动的偏移位
$('.scroll').scrollTop(500);
// 设置网页滚动的偏移位
$('body,html').scrollTop(500);
}
});
</script>
</head>
<body>
<div class='scroll'>我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看我是就看看</div>
<button type="button">获取</button>
<button type="button">设置</button>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html>
事件绑定和解绑
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script type="text/javascript">
$(function() {
// jquery中有两种绑定事件方式
// 1.eventName(fn)
// 编码效率高/部分事件jquery没有实现,所以不能添加
$('button:first').click(function(){
alert('hello,world');
});
// 注意点:可以添加多个相同或不同类型的事件,不会覆盖
// 2.on(eventName,fn);
// 编码效率略低/所有js事件都可以添加
$('button:last').on('click',function(){
alert('2.on(eventName,fn);');
});
// 鼠标移入事件
$('button:last').mouseenter(function(){
alert('222.on(eventName,fn);');
});
function test(){
alert('这是手写的函数');
};
$('button:last').click(test);
// off()如果不传递参数,会移除所有的事件
// $('button:last').off();
// off()如果传递一个参数,会移除所有指定类型的事件
$('button').off('mouseenter');
// off()如果传递两个参数,会移除所有指定类型的事件
// $('button').off('click',test);
});
</script>
</head>
<body>
<button type="button">我是按钮</button>
<button type="button">我不是按钮</button>
</body>
</html>
事件冒泡和默认行为
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
<style type="text/css">
*{
margin:0;
padding:0;
}
.son {
width: 100px;
height: 100px;
background: #0000FF;
}
.father {
width: 200px;
height: 200px;
background: red;
}
</style>
<script type="text/javascript">
$(function(){
// 事件冒泡
$('.son').click(function(event){
alert('我是son');
// return false;
event.stopPropagation();
})
$('.father').click(function(){
alert('我是father');
})
// 默认行为
$('a').click(function(event){
alert('弹出注册框');
// return false;
event.preventDefault()();
})
})
</script>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
<a href="http://www.baidu.com">注册</a>
<form action="http://www.taobao.com" method="post">
<input type="text" />
<input type="submit" value=""/>
</form>
</html>
事件自动触发
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
<style type="text/css">
*{
margin:0;
padding:0;
}
.son {
width: 100px;
height: 100px;
background: #0000FF;
}
.father {
width: 200px;
height: 200px;
background: red;
}
</style>
<script type="text/javascript">
$(function(){
// 使用trigger自动触发事件,会触发事件冒泡
$('.son').trigger('click');
// 使用triggerHandler自动触发事件,不会触发事件冒泡
// $('.son').triggerHandler('click');
$('input[type="submit"]').click(function(event){
alert('淘宝欢迎您');
})
// 使用trigger自动触发事件,会触发默认行为
// $('input[type="submit"]').trigger('click');
// 使用triggerHandler自动触发事件,不会触发默认行为
$('input[type="submit"]').triggerHandler('click');
})
</script>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
事件委托
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
<style type="text/css">
*{
margin:0;
padding:0;
}
.son {
width: 100px;
height: 100px;
background: #0000FF;
}
.father {
width: 200px;
height: 200px;
background: red;
}
</style>
<script type="text/javascript">
$(function(){
// 事件委托是利用事件冒泡，只指定一个事件处理程序来管理某一类型的所有事件。
// $('ul').delegate('li','click',function(){
// console.log($(this).html());
// })
$('ul>li').click(function(){
console.log($(this).html());
})
$('button').on('click',function(){
$('ul').append('<li>我是新增的li</li>')
})
})
</script>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
<ul>
<li>我是1个li</li>
<li>我是2个li</li>
<li>我是3个li</li>
<li>我是4个li</li>
<li>我是5个li</li>
</ul>
<button>新增</button>
</html>
移入移出事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
<style type="text/css">
*{
margin:0;
padding:0;
}
.son {
width: 100px;
height: 100px;
background: #0000FF;
}
.father {
width: 200px;
height: 200px;
background: red;
}
</style>
<script type="text/javascript">
$(function(){
// mouseover/mouseout事件，子元素被移入移出也会触发父元素的事件
// $('.father').mouseover(function(){
// console.log('移入事件');
// })
// $('.father').mouseout(function(){
// console.log('移出事件');
// })
// 同时监听移入移出事件
$('.father').hover(function(){
console.log('father移入事件');
},function(){
console.log('father移出事件');
})
})
</script>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
如果把成才比作登天，自学便是成才的天梯。
