第五章jQuery
DOM文档加载的步骤
- 解析HTML结构。
- 加载外部脚本和样式表文件。
- 解析并执行脚本代码。
- DOM树构建完成。
- 加载图片等外部文件。
- 页面加载完毕。
执行时间不同
window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。
编写个数不同
window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个
$(document).ready()可以同时编写多个，并且都可以得到执行
简化写法不同
window.onload没有简化写法
$(document).ready(function(){})可以简写成$(function(){});
基础选择器
1.id选择器
console.log($('#brother'));
$('#brother').css('color','red');
//2.标签选择器
//设置一个值
// $('a').css('color','yellow')
// 设置多个值 设置多个值得时候使用对象存储 key:value
$('a').css({'color':'yellow','font-size':'24px'});
//3.类选择器
$('.li3').css('background','green');
//4.通配符选择器 * 使用不是很频繁
console.log($('*'));
//清空整个界面的dom元素
$('*').html('');
//1.后代选择器 div p
$('#box p').css('color','red');
//2.子代选择器 div > p
$('#box>p').css('color','yellow')
//3.毗邻选择器 匹配素所有紧接着选中元素的兄弟 +
$('#father+p').css('font-size','30px');
//4.兄弟选择器 ~
$('#father~p').css('background','blueviolet');
console.log($('li'));
//5.获取第一个元素
$('li:first').css('font-size','50px');
//6.获取最后一个元素
$('li:last').css('font-size','50px');
$('li:eq(3)').css('font-size','50px');
基本过滤选择器：
//获取第一个 :first ,获取最后一个 :last
//奇数
$('li:odd').css('color','red');
//偶数
$('li:even').css('color','yellow');
//选中索引值为1的元素 *
$('li:eq(1)').css('font-size','100px');
//大于索引值1
$('li:gt(1)').css('font-size','50px');
//小于索引值1
$('li:lt(1)').css('font-size','12px');
属性选择器：
标签名[属性名] 查找所有含有id属性的该标签名的元素
$('li[id]').css('color','red');
//匹配给定的属性是what值得元素
$('li[class=what]').css('font-size','30px');
//[attr!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素
$('li[class!=what]').css('font-size','50px');
// 匹配给定的属性是以某些值开始的元素
$('input[name^=username]').css('background','gray');
//匹配给定的属性是以某些值结尾的元素
$('input[name$=222]').css('background','greenyellow');
//匹配给定的属性是以包含某些值的元素
$('button[class*=btn]').css('background','red')
jquery和DOM之间的转换：
//dom==>jquery对象
var oDiv = document.getElementById('box');
console.log($(oDiv));
$(oDiv).click(function(){
// alert(111);
})
//第一种方式 jquery ===>DOM对象
console.log($('button')[0]);
//第二种方式
console.log($('button').get(0));
var isShow = true;
$('button').get(0).onclick = function(){
// alert(222);
show和hide方法
/*
$('#btn').click(function(){
if(isShow){
$('#box').show('slow',function(){
// alert(111);
$(this).text('盒子出来了');
isShow = false;
$('#btn').text('显示');
})
}else{
$('#box').hide(2000,function(){
// alert(111);
$(this).text(' ');
isShow = true;
$('#btn').text('隐藏');
})
}
})
*/
//toggle 开关 如果元素显示则隐藏 ，反之亦然
$('#btn').click(function(){
$('#box').toggle(3000,function(){
alert(111);
});
})
动画效果：
$('#btn').click(function () {
$('#box').animate({width:'0px',height:'0px'},'fast').animate({width:'300px',height:'300px'})
})
右下角小广告效果：
$(function(){
$('#box').slideDown('normal').slideUp('fast').fadeIn(1000).click(function () {
$(this).fadeOut(1000)
});
})
属性操作:
attr 是为jquery操作
prop 是为DOM的属性操作
3.addClass() removeClass() 添加类 和删除类，可以通过此方法实时添加和删除标签里的类
$('span').addClass('span2 span3')
$('span').removeClass('span2')
var isBig = true;
$('span').click(function(){
if(isBig){
$(this).addClass('active');
isBig = false;
}else{
$(this).removeClass('active');
isBig = true;
}
})
4.值属性的操作 text() html() val()
//仅仅是获取文本
console.log($('#box2').text());
//获取的所有，包括<a></a>这些标签
console.log($('#box2').html());
//获取值
console.log($('input').val());
$('input').val('嘿嘿你个大头鬼')
$('#btn').click(function(){
var val = $('input').val();
$("#box2").text(val);
})
//表单控件使用的一个方法
$('input').change(function(){
console.log($(this).val());
})
//追加元素 $('ul').append('<li><a href="#">luffy</a></li>');
$('ul').append(oLi);
//如果直接的内容是当前页面中的某些元素，那么这些元素将从原位置上消失。简言之，就是一个移动操作
$('ul').append($('span'));
//appendTo()
$('<a href="#">路飞2</a>').appendTo($('ul'));
// prepend 插入到被选中的元素的第一个位置
$('ul').prepend('<li>我是第一个元素</li>')
$('<li>我是第0个元素</li>').prependTo($('ul'))
//after before
$('ul').after('<h3>我是一个三级标题</h3>');
//insertAfter
$('<a href="#">第一个</a>').insertAfter($('ul'));
$('ul').before('<h2>我是一个二级标题</h2>');
//insertBefore
//复制操作 clone()
$('button').click(function(){
//副本具有与真身一样的事件处理能力 完全克隆
$(this).clone(true).insertAfter($(this));
})
//替换
// $('h3').replaceWith('<button>替换的按钮</button>');
// $('<a href="#">替换超链接</a>').replaceAll('button');
//删除
//empty() 只是清空了被选的内容
// $('ul').empty();
// remove() 被选元素 也被删掉了 事件就没有 什么都没有
// $('ul').remove();
//detach() 移除匹配的节点元素 删除节点后 事件会保留
var $btn = $('button').detach();
console.log($btn[0]);
$('ul').append($btn[0]);
//1.获取匹配元素的相对父元素的偏移 position
console.log($('p').position().left);
console.log($('p').position().top);
var offsetTop = $('p').position().top + 50 + 'px';
$('#btn').click(function(){
$('p').animate({top:offsetTop},1000);
})
//2.获取匹配元素 相对滚动条卷起的位置信息 scrollTop scrollLeft
// console.log($(document).scrollLeft());
// console.log($(document).scrollTop());
$(document).scroll(function(){
console.log($(document).scrollLeft());
console.log($(document).scrollTop());
})
// offset 获取匹配元素在当前视口的相对偏移 相对于浏览器,包含了padding内充距离
console.log($('#box').offset());
console.log($('p').offset().top);
console.log($('p').offset().left);
console.log($('#btn').offset().top);
//获取元素的宽高
console.log("宽"+$('#box').width());
console.log("高"+$('#box').height());
//设置宽高
$('#box').width(400);
//innerWidth / outerWidth
淘宝导航栏
$(function () {
var h = $('.top').height();
$(document).scroll(function () {
var scrollTop = $(document).scrollTop();
if (h<scrollTop){
$('.nav').css({'display':'block','position':'fixed','top':0})
}else{
$('.nav').css('display','none')
}
})
})
siblings筛选:筛选给定的同类同胞元素
$(function () {
$('li').hover(function () {
console.log('123');
// $(this).css({'color':'red','font-size':'20px'}).siblings('li').css({'color':'black','font-size':'12px'});
$(this).addClass('active').siblings('li').removeClass('active');
})
})
时间流：
“DOM2级事件”规定的事件流包括三个阶段：
① 事件捕获阶段；
② 处于目标阶段；
③ 事件冒泡阶段
阻止事件冒泡：
//1.阻止事件冒泡
ev.stopPropagation();
阻止默认事件
ev.preventDefault();
ev.stopPropagation();
事件的绑定和移除：
绑定：
function add(){
console.log('click');
}
function add2(){
console.log('over');
}
$('#box').bind({
"click":add,
"mouseover":add2
})
//添加的事件不能发生在未来==》动态生成的元素不能直接添加对象 里面的事件不能发生了 ==>事件代理
事件代理：
//事件代理 自己完成不了当前的点击事件，交给父级元素来做这件事件
//父级.on('事件名字'，'点击当前的标签元素'，fn)
$('ul').on('click','li',function () {
alert('新来的');
})
$('ul').append('<li>我是新来的</li>');
自定义事件：trigger
$('button').bind('myClick',function(ev,a,b,c){
alert(111);
alert(a);
alert(b);
})
//触发自定义的事件
$('button').trigger('myClick',[1,2,3])
鼠标事件：
$("#box").click(function(){
console.log('click')
})
//双击事件
$("#box").dblclick(function(){
console.log('dbclick')
})
*/
/*
//鼠标按下不松开
$("#box").mousedown(function(){
console.log('mousedown');
})
//鼠标松开
$("#box").mouseup(function(){
console.log('mouseup');
})
*/
被选元素和子元素被选中时 会触发函数 移入和移出
/*
$('#box').mouseover(function(){
console.log('mouseover');
})
$('#box').mouseout(function(){
console.log('mouseout');
})
*/
/*
//只有被选元素移入的时候 才会触发
$('#box').mouseenter(function(){
console.log('mouseenter');
})
$('#box').mouseleave(function(){
console.log('mouseleave');
})
*/
/*获取焦点
$('input[type=text]').focus(function(){
console.log($(this).val())
})
/*失去焦点
$('input[type=text]').blur(function(){
console.log($(this).val())
})
*/
键盘按下：
$('input[type=password]').keydown(function(e){
console.log(e.keyCode);
if(e.keyCode == 13){
console.log('enter被按下了')
}
// console.log($(this).val())
})
键盘松开
$('input[type=password]').keyup(function(){
console.log($(this).val())
})
表单事件：
$(function() {
//change()s事件
//此事件仅限于input元素 textarea select
$('select').change(function(){
console.log($('select option:selected').text());
$('.show').text($('select option:selected').text());
})
// select() 仅限于用在 input type=text textarea
$('#other').select(function(){
console.log($(this).val());
})
$('form').submit(function(e){
//
//阻止默认事件
e.preventDefault();
//跟服务端有很大挂钩 下节课 咱们简单的来玩一下ajax技术
alert(1111);
})
ajax：
//get请求
$.ajax({
url:'./data.json',
type:'get',
// dataType:'json',
success:function(data){
console.log(data);
},
error:function(){
}
})
*/
/*
//注意：post请求无法演示 马上学django 就可以演示了
$.ajax({
url:"/course",
type:'post',
data:{
username:'zhangsan',
password:'123'
},
success:function(data){
if(data.state == 'ok'&& data.status =='200'){
//登录成功
}
},
error:function(err){
console.log(err);
}
})
*/
