jquery基础
jquery helloworld
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery helloworld</title>
<script type="text/javascript" src="js/jquery-1.10.1.js"></script>
<script type="text/javascript">
window.onload = function(){
document.getElementById("btn1").onclick = function (){
console.log(document.getElementById("username").value)
}
}
</script>
<script type="text/javascript">
$(function(){
console.log($() instanceof window)
$("#btn2").click(function(){console.log($("#username").val())})
});
</script>
</head>
<body>
用户名: <input type="text" id="username">
<button id="btn1">确定(原生版)</button>
<button id="btn2">确定(jQuery版)</button>
</body>
</html>
jQuery demo 两个函数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--使用cdn的吧-->
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script type="text/javascript">
console.log($, typeof $)
/**
* function ( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
// Need init if jQuery is called (just allow error to be thrown if not included)
return new jQuery.fn.init( selector, context );
*/
console.log(jQuery === $) //true
console.log(jQuery() instanceof Object) //true
console.log($() instanceof Object) //true
//jQuery 是如何封装的
// (function(window){
// var jQuery = function (){
// }
// window.$ = window.jQuery = jQuery
// })(window);
$(function() {
/**
* 需求1. 点击按钮: 显示按钮的文本, 显示一个新的输入框
需求2. 遍历输出数组中所有元素值
需求3. 去掉" my atguigu "两端的空格
*/
$("#btn").click(function() {
console.log($("#btn").html())
console.log($("#btn").text())
$('
').appendTo('div')
})
var arr = [1, 2, 3, 3, 3, 4, 5];
$.each(arr, function(index, value) {
console.log(index, value)
});
var stringtext = " asa ";
console.log($.trim(stringtext))
});
</script>
</head>
<body>
<div>
<button id="btn">测试</button><br />
<input type="text" name="msg1" /><br />
<input type="text" name="msg2" /><br />
</div>
</body>
</html>
jQuery 对象demo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--使用cdn的吧-->
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script type="text/javascript">
/**
* 需求1. 统计一共有多少个按钮
需求2. 取出第2个button的文本
需求3. 输出所有button标签的文本
需求4. 输出'测试三'按钮是所有按钮中的第几个
*/
$(function(){
console.log($('button').length);
//将jQuery对象转成dom 可以通过下标元素操作 或者get(i)
console.log($('button')[1].innerHTML);
console.log($('button').get(1).innerHTML);
$('button').each(function(){
console.log(this.innerHTML)
});
console.log($("#btn3").index())
var arr = [1,2,3,4,5];
arr.forEach(function(index,value){
console.log(index,value)
})
//伪数组 没有数组特别的方法: forEach(), push(), pop(), splice()
console.log($('button') instanceof Array) //fasle
});
</script>
</head>
<body>
<button>测试一</button>
<button>测试二</button>
<button id="btn3">测试三</button>
<button>测试四</button>
</body>
</html>
jQuery 基本选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--使用cdn的吧-->
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script type="text/javascript">
$(function() {
/*
需求:
1. 选择id为div1的元素
2. 选择所有的div元素
3. 选择所有class属性为box的元素
4. 选择所有的div和span元素
5. 选择所有class属性为box的div元素
*/
// $("#div1").css("background","red"); //id选择器
// $('div').css("background","red"); //元素选择器
// $('.box').css("background","red"); // class选择器
// $('div,span').css("background","red"); //组合选择器
// $('div.box').css("background","red"); //香蕉选择器
// $('*').css("background","red") // 选择所有
});
</script>
</head>
<body>
<div id="div1" class="box">div1(class="box")</div>
<div id="div2" class="box">div2(class="box")</div>
<div id="div3">div3</div>
<span class="box">span(class="box")</span>
<br>
<ul>
<li>AAAAA</li>
<li title="hello">BBBBB(title="hello")</li>
<li class="box">CCCCC(class="box")</li>
<li title="hello">DDDDDD(title="hello")</li>
</ul>
</body>
</html>
jQuery 层次选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--使用cdn的吧-->
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script type="text/javascript">
$(function(){
/*
需求:
1. 选中ul下所有的的span
2. 选中ul下所有的子元素span
3. 选中class为box的下一个li
4. 选中ul下的class为box的元素后面的所有兄弟元素
*/
// $('ul span').css("background","red"); //找子元素
// $('ul>span').css("background","red"); //找后代
// $('.box+li').css("background","red"); //挨着某个元素的元素
// console.log($('li')[0].style.background = "red") //使用原生js写样式 哈哈
$('ul .box~').css("background","red"); //该元素之后的所有
});
</script>
</head>
<body>
<ul>
<li>AAAAA</li>
<li class="box">CCCCC</li>
<li title="hello"><span>BBBBB</span></li>
<li title="hello"><span class="box">DDDD</span></li>
<span>EEEEE</span>
</ul>
</body>
</html>
jQuery 过滤选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--使用cdn的吧-->
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script type="text/javascript">
$(function(){
/*
需求:
1. 选择第一个div
2. 选择最后一个class为box的元素
3. 选择所有class属性不为box的div
4. 选择第二个和第三个li元素
5. 选择内容为BBBBB的li
6. 选择隐藏的li
7. 选择有title属性的li元素
8. 选择所有属性title为hello的li元素
*/
//推荐网址 https://www.runoob.com/jquery/jquery-ref-selectors.html 这里有更多的选择器
// $('div')[0].style.background="red"
// $('div :first').css("background","red")
// $('.box:last').css("background","red")
// $('div:not(.box)').css("background","red")
// $('ul li:eq(1)').css("background","red")
// $('ul li:eq(2)').css("background","red")
// $('li:contains("BBBBB")').css("background","red")
// console.log($('li:hidden').length, $('li:hidden')[0])
// $('li:hidden').show()
// $('li[title="hello"]').css("background","red")
$('li[title]').css("background","red")
});
</script>
</head>
<body>
<div id="div1" class="box">class为box的div1</div>
<div id="div2" class="box">class为box的div2</div>
<div id="div3">div3</div>
<span class="box">class为box的span</span>
<br/>
<ul>
<li>AAAAA</li>
<li title="hello">BBBBB</li>
<li class="box">CCCCC</li>
<li title="hello">DDDDDD</li>
<li title="two">BBBBB</li>
<li style="display:none">我本来是隐藏的</li>
</ul>
</body>
</html>
jQuery表单选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--使用cdn的吧-->
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script type="text/javascript">
$(function(){
/*
需求:
1. 选择不可用的文本输入框
2. 显示选择爱好 的个数
3. 显示选择的城市名称
*/
// $(':text:disabled').css("background","red")
// console.log($(':checkbox:checked').length)
// console.log($('select option:selected').html())
$(':submit').click(function(){
console.log($('select option:selected').html())
console.log($('select option:selected').index())
console.log($('select option:selected').val())
})
});
</script>
</head>
<body>
<form>
用户名: <input type="text"/><br>
密 码: <input type="password"/><br>
爱 好:
<input type="checkbox" checked="checked"/>篮球
<input type="checkbox"/>足球
<input type="checkbox" checked="checked"/>羽毛球 <br>
性 别:
<input type="radio" name="sex" value='male'/>男
<input type="radio" name="sex" value='female'/>女<br>
邮 箱: <input type="text" name="email" disabled="disabled"/><br>
所在地:
<select>
<option value="1">北京</option>
<option value="2" selected="selected">天津</option>
<option value="3">河北</option>
</select><br>
<input type="submit" value="提交"/>
</form>
</body>
</html>
</html>
jQuery 操作css
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--使用cdn的吧-->
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script type="text/javascript">
$(function(){
/*
需求:
1. 读取第一个div的title属性
2. 给所有的div设置name属性(value为AA)
3. 移除所有div的title属性
4. 给所有的div设置class='AA'
5. 给所有的div添加class='abc'
6. 移除所有div的AA的class
7. 得到最后一个li的标签体文本
8. 设置第一个li的标签体为"mmmmmmmmm
"
9. 得到输入框中的value值
10. 将输入框的值设置为atAAA
11. 点击'全选'按钮实现全选
12. 点击'全不选'按钮实现全不选
*/
// console.log($('div:first').attr('title'));
// $('div').attr('name','hello')
// console.log($('div:first').attr('name'));
// $('div').removeAttr('title')
// console.log($('div:first').attr('title'));
//$('div').attr('class','AA');
// $('div').addClass('abc')
// $('div').removeClass('AA');
// console.log($('li:last').html())
// console.log($('li:last').text()) //文本标签
// $('li:first').html('mmmmmmmmm
')
// console.log($(':text').val())
// $(":checkbox").attr('checked','checked')
/*
1. 得到第一个p标签的颜色
2. 设置所有p标签的文本颜色为red
3. 设置第2个p的字体颜色(#ff0011),背景(blue),宽(300px), 高(30px)
*/
// console.log($('p:first').css('color'))
// $('p').css('color','red')
});
</script>
</head>
<body>
<div id="div1" class="box" title="one">class为box的div1</div>
<div id="div2" class="box" title="two">class为box的div2</div>
<div id="div3">div3</div>
<span class="box">class为box的span</span>
<br/>
<ul>
<li>AAAAA</li>
<li title="hello" class="box2">BBBBB</li>
<li class="box">CCCCC</li>
<li title="hello">DDDDDD</li>
<li title="two"><span>BBBBB</span></li>
</ul>
<input type="text" name="username" value="BBBBClass"/>
<br>
<input type="checkbox">
<input type="checkbox">
<br>
<button>选中</button>
<button>不选中</button>
<p style="color: blue;">AAAAA</p>
<p style="color: green;">BBBBB</p>
</body>
</html>
jQuery 过滤
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--使用cdn的吧-->
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script type="text/javascript">
$(function () {
/*
需求:
1. ul下li标签第一个
2. ul下li标签的最后一个
3. ul下li标签的第二个
4. ul下li标签中title属性为hello的
5. ul下li标签中title属性不为hello的
6. ul下li标签中有span子标签的
*/
// console.log($('ul li:first').html());
// console.log($('ul li:last').html());
// console.log($('ul li:last').val());
// console.log($('ul li:eq(1)').html());
// console.log($('ul>li[title="hello"]').html());
// console.log($('ul>li.not[title="hello"]').length);
// $('ul>li[title!="hello"]').css('background', 'red');
// console.log($('ul>li').has('span').html());
/*
需求:
1. ul标签的第2个span子标签
2. ul标签的第2个span后代标签
3. ul标签的父标签
4. id为cc的li标签的前面的所有li标签
5. id为cc的li标签的所有兄弟li标签
*/
// console.log($('ul>li:eq(1)').html()) //第一个li
// console.log($('ul>li').children('span:eq(0)').html());
// console.log($('ul>li:eq(1)').find('span').html())
// console.log($('ul>li[title="hello"]').parent().html());
// console.log('前面的子节点个数:'+$('#cc').prevAll('li').length);
// console.log('子节点的所有brother个数:'+$('#cc').siblings('li').length); //没有他自己哈
});
</script>
</head>
<body>
<ul>
<li>AAAAA</li>
<li title="hello" class="box2">BBBBB <span>aaaa</span> </li>
<li class="box">CCCCC</li>
<li id='cc' title="hello">DDDDDD</li>
<li title="two"><span>BBBBB</span></li>
</ul>
<li>eeeee</li>
<li>EEEEE</li>
<br>
</body>
</html>
jQuery CRUD
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0px;
}
.div1 {
position: absolute;
width: 200px;
height: 200px;
top: 20px;
left: 10px;
background: blue;
}
.div2 {
position: absolute;
width: 100px;
height: 100px;
/*top: 50px;*/
background: red;
}
.div3 {
position: absolute;
top: 250px;
}
</style>
<!--使用cdn的吧-->
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script type="text/javascript">
$(function () {
/*
需求:
1. 向id为ul1的ul下添加一个span(最后)
2. 向id为ul1的ul下添加一个span(最前)
3. 在id为ul1的ul下的li(title为hello)的前面添加span
4. 在id为ul1的ul下的li(title为hello)的后面添加span
5. 将在id为ul2的ul下的li(title为hello)全部替换为p
6. 移除id为ul2的ul下的所有li
*/
// $('#ul1').append('追加的')
// $('追加的').appendTo($('#ul1'))
// $('#ul1>li:eq(0)').before('追加的')
// $('#ul1').prepend('追加的222')
// $('#ul1 li[title="hello"]').before('追加的333')
// $('#ul1 li[title="hello"]').after('追加的333')
// $('#ul1').children('li[title=hello]').before('before()添加的span')
// $('#ul2>li[title="hello"]').replaceWith('12121212
')
// $('#ul2>li').remove()
// $('#ul2').remove()
});
</script>
</head>
<body>
<ul id="ul1">
<li>AAAAA</li>
<li title="hello">BBBBB</li>
<li class="box">CCCCC</li>
<li title="hello">DDDDDD</li>
<li title="two">EEEEE</li>
<li>FFFFF</li>
</ul>
<br>
<br>
<ul id="ul2">
<li>aaa</li>
<li title="hello">bbb</li>
<li class="box">ccc</li>
<li title="hello">ddd</li>
<li title="two">eee</li>
</ul>
</body>
</html>
jQuery事件绑定和解绑
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0px;
}
.out {
position: absolute;
width: 200px;
height: 200px;
top: 20px;
left: 10px;
background: blue;
}
.inner {
position: absolute;
width: 100px;
height: 100px;
top: 50px;
background: red;
}
.divBtn {
position: absolute;
top: 250px;
}
</style>
<!--使用cdn的吧-->
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script type="text/javascript">
$(function() {
/*
需求：
1. 给.out绑定点击监听(用两种方法绑定)
2. 给.inner绑定鼠标移入和移出的事件监听(用3种方法绑定)
3. 点击btn1解除.inner上的所有事件监听
4. 点击btn2解除.inner上的mouseover事件
5. 点击btn3得到事件坐标
6. 点击.inner区域, 外部点击监听不响应
7. 点击链接, 如果当前时间是偶数不跳转
*/
// $('.out').click(function(){
// console.log('aaaa');
// });
$('.inner').on('click',function(event){
// event.cancelBubble = true;//取消事件冒泡
event.stopPropagation();//取消事件冒泡
console.log('aaaa');
});
// $('.inner').mouseenter(
// function() {
// console.log("enter")
// }
// ).mouseleave(function() {
// console.log("leave")
// })
// $('.inner').on('mouseenter',function(){
// console.log("enter")
// })
// $('.inner').on('mouseleave',function(){
// console.log("leave")
// })
// $('.inner').hover(function () {
// console.log('enter')
// }, function () {
// console.log('leave')
// })
// $('#btn1').click(function(){
// $('.inner').off();
// })
// $('#btn2').click(function(){
// $('.inner').off('mouseover');
// })
// $('#btn3').click(function(event){
// console.log(event.clientX+"," +event.clientY)
// console.log(event.offsetX+"," +event.offsetY)
// console.log(event.pageX+"," +event.pageY)
// })
$('#test4').click(function(event){
var flag = (new Date()).getTime()%2==0;
if(flag){
event.preventDefault();
}
})
});
</script>
</head>
<body style="height: 2000px;">
<div class="out">
外部DIV
<div class="inner">内部div</div>
</div>
<div class='divBtn'>
<button id="btn1">取消绑定所有事件</button>
<button id="btn2">取消绑定mouseover事件</button>
<button id="btn3">测试事件坐标</button>
<a href="http://www.baidu.com" id="test4">百度一下</a>
</div>
</body>
</html>
jQuery 事件的委托
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--使用cdn的吧-->
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script type="text/javascript">
$(function() {
/*
需求：
1. 点击 li 背景就会变为红色
2. 点击 btn 就添加一个 li
*/
// $('ul>li').click(function(){
// this.style.background = 'red';
// })
// $('ul').delegate('li', 'click', function(event) {
// // this.style.background = 'red';
// $(event.target).css('background','red');
// });
// $('ul').on( 'click','li', function() {
// $(this).css('background','red');
// });
$('ul li').bind('click', function() { //不能添加后置事件绑定
$(this).css('background', 'red');
});
$('#btn').click(function() {
$('ul').append(' 2222 ')
})
$('#btn2').click(function(event) {
// $(event.target).undelegate('click');
// $('ul').undelegate('click');
$('ul').off('click');
})
});
</script>
</head>
<body>
<ul>
<li>11111</li>
<li>1111111</li>
<li>111111111</li>
<li>11111111111</li>
</ul>
<br>
<button id="btn">添加新的li</button>
<br>
<button id="btn2">删除ul上的事件委托的监听器</button>
</body>
jQuery 简单动画
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0px;
}
.div1 {
position: absolute;
width: 200px;
height: 200px;
top: 50px;
left: 10px;
background: red;
}
</style>
<!--使用cdn的吧-->
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script type="text/javascript">
$(function(){
/*
需求：
1. 点击btn1, 慢慢淡出
* 无参
* 有参
* 字符串参数
* 数字参数
2. 点击btn3, 慢慢淡入
3. 点击btn3, 淡出/淡入切换，动画结束时提示“动画结束了”
*/
// $('#btn1').click(function(){
// $('.div1').fadeOut(1000,function(){
// console.log('慢慢淡出')
// });
// })
// $('#btn2').click(function(){
// $('.div1').fadeIn(1000,function(){
// console.log('慢慢淡入')
// });
// })
// $('#btn3').click(function(){
// $('.div1').fadeToggle(1000,function(){
// });
// })
/*
需求：
1. 点击btn1, 向上滑动
2. 点击btn2, 向下滑动
3. 点击btn3, 向上/向下切换
*/
// $('#btn1').click(function(){
// $('.div1').slideUp(1000)
// })
// $('#btn2').click(function(){
// $('.div1').slideDown()
// })
// $('#btn3').click(function(){
// $('.div1').slideToggle();
// })
/*
需求:
1. 点击btn1, 立即显示
2. 点击btn2, 慢慢显示
3. 点击btn3, 慢慢隐藏
4. 点击btn4, 切换显示/隐藏
*/
// $('#btn1').click(function(){
// $('.div1').show()
// })
// $('#btn2').click(function(){
// $('.div1').show(1000)
// })
// $('#btn3').click(function(){
// $('.div1').hide(1000)
// })
// $('#btn4').click(function(){
// $('.div1').toggle()
// })
/*
需求：
1. 逐渐扩大
1). 宽/高都扩为200px
2). 宽先扩为200px, 高后扩为200px
2. 移动到指定位置
1).移动到(500, 100)处
2).移动到(100, 20)处
3.移动指定的距离
1). 移动距离为(100, 50)
2). 移动距离为(-100, -20)
4. 停止动画 stop
*/
// $('#btn1').click(function(){
// $('.div1').animate({
// width:300,
// height:500
// },1000)
// })
$('#btn1').click(function(){
$('.div1').animate({
width:300
},1000).animate({height:500},1000)
})
});
</script>
</head>
<body>
<button id="btn1">btn1</button>
<button id="btn2">btn2</button>
<button id="btn3">btn3</button>
<button id="btn4">btn4</button>
<div class="div1"></div>
</body>
</html>