文章目录
- 一. JQuery介绍
- 二. JQuery使用
- 三. JQuery选择器
- 四. JQuery选择集过滤
- 五.JQuery选择集转移
- 六. JQuery获取和操作标签内容
- 七. JQuery获取和设置元素属性
- 八. JQuery事件
- 九.JQuery事件代理
一. JQuery介绍
- 定义: jquery是JS的一个函数库
- 作用: 负责网页交互
- 优点: 兼容主流浏览器, 简化JS编程过程, 提高开发效率
二. JQuery使用
<script src="JS/jquery-1.12.4.min.js"></script>
<script>代码
</script>
js对象 ----> jquery对象
oDiv ----> $(oDiv)Jquery对象 ----> js对象
$Div ----> $Div[0]
> var oDiv = document.getElementById('box')
undefined
> oDiv;
<div id="box"> 这是一个div </div>
> var $Div = $(oDiv)
undefined
> $Div
n.fn.init [div#box, context: div#box]
> $Div[0]
<div id="box"> 这是一个div </div>
> $Div[1]
undefined
三. JQuery选择器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="JS/jquery-1.12.4.min.js"></script><script>$(function(){var result = $('div');console.log(result.length); console.log($('#box').length); console.log($('.box').length); console.log($('div p').length); console.log($('div[class="box"]').length); });</script>
</head>
<body><div id="box" class="box">这是第一个div<p>好好学习</p></div><div >这时第二个div<p>天天向上</p></div>
</body>
</html>
四. JQuery选择集过滤
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="Js/jquery-1.12.4.min.js"></script><script>$(function(){$('div').css({'background': 'red'});$('div').has('p').css({'font-size': '28px', 'background': 'pink'});$('div').eq(1).css({'color': 'green'});});</script>
</head>
<body><div>这是第一个div<p>好好学习</p></div><div>这是第二个div <br>天天向上</div>
</body>
</html>
五.JQuery选择集转移
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="JS/jquery-1.12.4.min.js"></script><script>$(function(){$li = $('#box');$li.css({'background': 'red'});$li.prev().css({'background': 'green'});$li.prevAll().css({'color': 'blue'});$li.next().css({'background': 'yellow'});$li.nextAll().css({'color': 'orange'});$li.siblings().css({'font-size': '26px'});$('ul').parent().css({'background': 'pink'});$('div').children().css({'background': 'blue'});$('div').find('.c_p').css({'color': 'red'});$('div').has('.c_p').css({'font-size': '30px'});});</script>
</head>
<body><ul><li>文字1</li><li>文字2</li><li id="box">文字3</li><li>文字4</li><li>文字5</li><li>文字6</li><li>文字7</li><li>文字8</li></ul><div>this is div1<p>this is p1</p></div><div>this is div2<p class="c_p">this is p2</p></div>
</body>
</html>
六. JQuery获取和操作标签内容
- 获取标签内容:
标签对象.html() - 设置标签内容:
标签对象.html('内容') - 追加标签内容:
标签对象.append('内容')
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="js/jquery-1.12.4.min.js"></script><script>$(function(){var sResult = $('div').html();alert(sResult);$('div').html('good good study!');$('div').append('<a href="http://www.baidu.com">百度</a>');});</script>
</head>
<body><div>好好学习</div>
</body>
</html>
七. JQuery获取和设置元素属性
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="JS/jquery-1.12.4.min.js"></script><script>$(function(){var $A = $('a');alert($A.prop('href'));$A.prop({'href': 'https://www.csdn.net/', 'target': '_blank'});});function fnClick(){alert($('#box').prop('value'));};function fnAdd(){var result = $('#box').val();result = parseInt(result);$('#box').val(result + 10);};</script>
</head>
<body><div><a href="http://www.baidu.com">百度</a></div><div><input type="text" name="" id="box" value="10"><input type="button" value="点击获取 input 内容" onclick="fnClick()"><input type="button" value="点击, 对 input 的数字 + 10显示" onclick="fnAdd()"></div>
</body>
</html>
八. JQuery事件
- 鼠标点击:
click() - 失去焦点:
blur() - 获得焦点:
focus() - 鼠标进入:
mouseover() - 鼠标离开:
mouseleave() - 页面标签加载完成:
$(document).ready()
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 200px;height: 80px;background: red;font-size: 26px;}</style><script src="js/jquery-1.12.4.min.js"></script><script>$(function(){$('div').click(function(){console.log('鼠标点击了: ',$(this).html());});$('div').mouseover(function(){console.log('鼠标进入了');$(this).css({'background': 'blue'});});$('div').mouseleave(function(){console.log('鼠标离开了');$(this).css({'background': 'red'});});$('input').focus(function(){$(this).prop({'placeholder': ''});$(this).css({'font-size': '28px'});});$('input').blur(function(){$(this).prop({'placeholder': '请输入内容'});$(this).css({'font-size': ''});});});</script>
</head>
<body><div>这是一个div</div><input type="text" placeholder="请输入内容">
</body>
</html>
九.JQuery事件代理
- 事件代理: 使用事件冒泡的原理, 让父标签代理子标签的事件
$(父标签选择器).delegate(子标签选择器, 代理事件, 处理函数);
- 事件冒泡
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1{width: 300px;height: 300px;background: red;}.box2{width: 100px;height: 100px;background: pink;}</style><script src="js/jquery-1.12.4.min.js"></script><script>$(function(){$('div').click(function(){$(this).css({'background': 'blue'});});});</script>
</head>
<body><div class="box1">This is div <div class="box2">Good Good Study</div></div>
</body>
</html>
- 事件绑定的问题
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="js/jquery-1.12.4.min.js"></script><script>$(function(){$('li').click(function(){console.log($(this).html());});});function fnClick(){$('ul').append('<li>文字' + ($('li').length+1) + '</li>');};</script>
</head>
<body><ul><li>文字1</li><li>文字2</li><li>文字3</li><li>文字4</li><li>文字5</li></ul><input type="button" value="点击添加li标签" onclick="fnClick()">
</body>
</html>
- 事件代理
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="js/jquery-1.12.4.min.js"></script><script>$(function(){$('ul').delegate('li', 'click', function(){console.log($(this).html());});});function fnClick(){$('ul').append('<li>文字' + ($('li').length+1) + '</li>');};</script>
</head>
<body><ul><li>文字1</li><li>文字2</li><li>文字3</li><li>文字4</li><li>文字5</li></ul><input type="button" value="点击添加li标签" onclick="fnClick()">
</body>
</html>
