• 什么是JQ
• JS的升级版，写越少的代码，做越多的事情
• 学习JQ的基础
• HTML CSS Javascript 后台（了解）
• JQ官网
• http://jquery.com/
• 如何使用JQ
• 官网下载jquery.js文件
引入JQuery
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="jquery/jquery.js"></script>
选择元素
$()
css()
JQ的$()选择符和CSS()
//document.getElementById('div1').style.color= 'red';
//document.getElementsByTagName('div')[0].style. color = 'red';
//document.getElementsByClassName('box')[0].style. color = 'red';//JQ选择元素的风格跟CSS风格特别类似
//$('#div1').css('color', 'red');
//$('div').css('color', 'red);
//$('.box').css('color', 'red);省略原生的循环操作
JQ省略循环
<ul>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li></ul>var aLi = document.getElementsByTagName('li');
/*
for(){
aLi[i].style...
}
*/
//$('li').css('background', 'red'); //JQ省略原生当中的循环的操作
jQuery('li').css('background', 'red'); //$ == jQuery 一个大名一个小名$ == jQuery
事件 click()
• click()
内容 html()
• html()
例子：选择颜色填充方块
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>选择颜色填充方块</title>
<style>
div { width: 100px; height: 100px; border: 1px solid #000; float: left; margin: 10px; } </style>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="jquery-1.11.1.js"></script></head><body>
<span>red</span>
<span>yellow</span>
<span>green</span>
<span>blue</span>
<br>
<div></div>
<div></div>
<div></div>
<div></div>
<script>
var color = '';
$('span').click(function(){
color = $(this).html()
});
$('div').click(function(){
$(this).css('background', color);
}); </script></body></html>取值与赋值的关系
• 通过参数决定
取值与赋值的关系
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>取值与赋值的关系</title>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="jquery-1.11.1.js"></script></head><body>
<div id="div1" class="box">aaaaa</div>
<script>
// oDiv.innerHTML; //获取
// oDiv.innerHTML = 'bbbbb'; //赋值
//$('#div1').html(); //获取
//$('#div1').html('bbbbbb'); //赋值
$('#div1').css('color', 'red'); //赋值
alert($('#div1').css('color')); //获取div的color属性的属性值
</script></body></html>属性 attr()
• attr()
值 val()
• val()
attr()和val()
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>取值与赋值的关系</title>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="jquery-1.11.1.js"></script></head><body>
<div id="div1" class="box" miaov="miaov">aaaaa</div>
<input type="text" value="123">
<input type="text" value="456">
<script>
//操作属性attr()
$('#div1').attr('class', 'box2'); //用attr改class属性
$('#div1').attr('title', 'hello'); //添加原本没有的属性
alert($('#div1').attr('class')); //获取属性值
alert($('#div1').attr('miaov')); //也可以获取自定义的属性
//val()
//alert($('input').val()); //获取
//$('input').val('7777'); //针对多个input的value值进行设置
alert($('input').val()); // 针对集合进行获取操作，只获取第一个
</script></body></html>强大的$()
加载
• $(function(){});
属性选择
• [=]
• [^=] 以……起始
• [$=] 以……结束
• [*=] 包含……的
• 引号的问题
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>加载和通配符选择</title>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="jquery-1.11.1.js"></script>
<script>
$(function(){
//$('input[value]').css('background', 'red'); //input有value属性的才背景变红
//$('input[value=123]').css('background', 'red'); //value必须等于123的input才背景变红
//$('input[value^=123]').css('background', 'red'); //value以123为起始的input元素
//$('input[value$=444]').css('background', 'red'); //value以123为结束的input元素
//$('input[value*=3]').css('background', 'red'); //value中有3的input元素
$('div[class="box box2"]).css('color', 'red'); //这种情况下，box box2必须要用引号引起来
}); </script></head><body>
<div id="div1" class="box box2" miaov="妙味">aaaaaa</div>
<input type="text" value="123_444">
<input type="text" value="123_555">
<input type="text" value="777_888"></body></html>用$(function(){});来加载<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>加载</title>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="jquery-1.11.1.js"></script>
<script>
/*
window. = function(){
};
*/
$(function(){
}); </script></head><body>
...</body></html>
作者：piziyang12138
链接：https://www.jianshu.com/p/4b95bb33244a
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦