第一天：
第二章&&第三章；如何安装JQuery，类选择器
去官网下载Jquery的文件，然后引用
<script src="jquery.js"></script>
<script src="main.js"></script>
JQuery使用$来表示
main.js
$("div")
.css("color","green");
$("div:first")
.css("border","1px solid blue");
$("#a P")
.css("border","2px solid");
$(".b")
.css("background","pink");
$('input[type="number"]')
.css("background","yellow");
index.html
<div id="a">A<p>A1</p></div>
<div id="b" class="b">A</div>
<input type="number">
<script src="jquery.js"></script>
<script src="main.js"></script>
---------------------我是分割线-----------------
第四章：过滤器
说明知识点：
filter:过滤器
容易犯错的地方：
$('#child1')
//指定找先辈，记得是负数
.parents('.grandpa')
.css('border','2px solid #333');
index.js
<style>
div{
padding:5px;
margin-bottom:2px;
background:rgba(0,0,0,.1);
}
</style>
<div class="grandpa">
<div class="pa">
<div id="child1" class="child not-gay"></div>
<div id="child1" class="child"></div>
<div id="child2" class="child"></div>
</div>
</div>
<script src="jquery.js"></script>
<script src="main2.js"></script>
main.js
$(".grandpa")
.find('.child')
.css('border','2px solid #999');
$('#child1')
.parent()
.css('border','2px solid #666');
$('#child1')
.parents('.grandpa')
.css('border','2px solid #333');
$('.child')
.filter('.not-gay')
.css('background','red');
---------------------我是分割线-----------------
第五章操作样式
知识点说明
.css({
color:'red',
//要是想要背景指定参数的话，1是驼峰命名法，用“”-“”会报错,2是加个引号，把它当成一个对象'background-color':
backgroundColor:'black',
border:'1px solid black'
});
代码说明：这个代码是做了一个广告牌的实例来说明本章的元素
index.html
<style>
/*.black{
background:#000;
}*/
#board.active{
color:red;
}
#board{
background:#000;
padding:5px;
display:inline-block;
}
</style>
<!--<div class="a b">A</div>-->
<div id="board">这里是哪里</div>
<script src="jquery.js"></script>
<script src="main3.js"></script>
main.js
//var a=$('.a')
////.css({
//// /*color:'red',
//// 'background-color':'black',
//// border:'1px solid black'*/
//// })
//// //添加类名
//// .addClass('black')
//// //移除类名
//// .removeClass('b')
//// ;
//// //判断这个是有某个类
////console.log(a.hasClass('black'))
////隐藏
//a.hide();
////a.show();
////a.fadeOut(5000);
////a.fadeIn(5000);
////缓缓上升
//a.slideUp(1000);
////缓缓下降
//a.slideDown(1000);
var board=$('#board');
function toggle(){
if(board.hasClass('active')){
board.removeClass('active');
}else{
board.addClass('active');
}
}
setInterval(toggle,200);
---------------------我是分割线-----------------
第六章操作DOM
知识点：讲了元素增删改查
html和css都可以获取到内容，不同的是html获取到的是有文字和标签，二text只是文字，把标签去掉，同时这两个可以改里面标签的内容
//$('#a').text('fdaes');
//$('#a').html('fds');
//最前面添加
$('#a').prepend
//最后面添加
$('#a').append
//移去标签
remove();
index.html
<div id="a">
<p>A</p>
<span>V</span>
</div>
<script src="jquery.js"></script>
<script src="main4.js"></script>
main.js
// JavaScript Document
//获取标签里面的内容
//var text=$('#a').text();
//console.log("text:"+text);
//修改标签里面的内容
//$('#a').text('fdaes');
////获取标签里面的内容
//var html=$('#a').html();
//console.log("html:"+html);
//$('#a').html('fds');
//在标签的子元最素前面添加元素
$('#a').prepend('<div>Prepend</div>');
//在标签的子元素最后添加元素
$('#a').append('<div>Append</div>');
//移去标签
//$('#a').remove();
//移去标签
$('#a p').remove();
---------------------我是分割线-----------------
第七章事件
知识点：
card.on('mouseenter',function(){
}
和js的写法有点不太一样，js是在html页面绑定了一个事件
main.js
var card=$('#card');
var cardTrigger=$('#card-trigger');
cardTrigger.on('click',
function(){
if(card.is(':visible')){
card.slideUp();
}else{
card.slideDown();
}
});
card.on('mouseenter',function(){
card.addClass('active');
})
index.html
<style>
#card{
display:none;
background:#eee;
padding:20px;
margin:10px 0;
}
h1{
margin:0;
}
#card.active{
background:#666;
color:#FFF;
}
</style>
<button id="card-trigger">显示/隐藏公告</button>
<div id="card">
<h1>公告</h1>
我是谁，我在哪里
</div>
<script src="jquery.js"></script>
<script src="main5.js"></script>
---------------------我是分割线-----------------
第八章操作属性
知识点：
主要说属性的修改，获取，删除,prop(),arrt()
index.html
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<a id="a" href="http://biaoyansu.com">表</a>
<script src="jquery.js"></script>
<script src="main1.js"></script>
main.js
//console.dir(document.getElementById('a'))
$('#a')
//修改属性的方法，attribute是显性的属性
//.attr('href','http://a.com')
//propery是隐形的的属性，因为DOM属性有很多,虽然看起来很复杂，其实可以改很多东西
//.prop('href','http://a.com')
//获取属性的值
//.prop('href');
//.attr('href')
//删除属性的值，但是不能和获取属性的代码并同，否则报错
.removeAttr('href')
//自己测试了一下貌似Prop是不能移除
;
//
---------------------我是分割线-----------------
第九章表单及输入
知识讲解
1.在调用事件的写法上可以是
$('login_trigger').click(function(){})
或
$('login_trigger').on('click',function(){})
2.怎么在一个事件里面触发另一个事件？下面是一个点击事件里面包含一个提交事件
$('login_trigger').click(function(){
$('#login').submit();
})
扩展：所以可以在一个事件里面可以写很多种事件的触发
index.html
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
//注意。这里有个action可以跳转到另一个页面
<form id="login" action="result.html">
用户名：<input type="text"/>
密码：<input type="password"/>
</form>
<button id="login_trigger">登陆提交</button>
<input id="nickname" value="王花花" type="text"/>
<script src="jquery.js"></script>
<script src="main2.js"></script>
result.html
<p>ok</p>
main.js
//获取input输入的内容用val，他不可以用html和text来获取，
//var nn=$('#nickname').val();
//修改input输入的内容用val
//var nn=$('#nickname').val('哟')
//高亮起来，聚焦在输入框内
//.focus()
//选中框内全部内容
//当focus里面包含函数，则是监听聚焦事件,要是不断出发focus事件，则会不断进行触发，比如按两次，则下面会打印两次
/*.focus(function(){
console.log('Yo')
})*/
//.select()
//不再foucus，也就是高亮
//.blur()
//当blur里面包含函数，则是监听不聚焦事件,要是不断触发blur事件，则会不断进行触发，比如按两次，则下面会打印两次
//.blur(function(){
// console.log('Yo')
//})
//;
//console.log(nn);
//$('#login').submit()
$('#login_trigger').click(function(){
$('#login').submit();
})
网友评论