目录
jQuery入口函数和window.onload入口函数的区别
什么是jQuery？
jQuery是一个优秀的JavaScript库，是一个凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档，操作DOM，执行动画和开发Ajax的操作。jQuery封装了很多预定义的对象和函数。其理念：write less,do more.
原生JS的缺点
- 入口函数只能有一个，如果有多个，后面的会将前面的给覆盖掉
- 兼容性的问题 低版本的ie不支持textContent
- 原生js的API比较复杂
- 容错性比较差，之前有一行如果报错的话，则后面的代码都不会执行
<body>
<input type="button" value="设置边框" id="btnOne"/>
<input type="button" value="设置文本" id="btnTwo"/>
<div></div>
<div></div>
<div></div>
<script>
//入口函数
window.onload = function (){
var btnOne = document.getElementById("btnOne");
var btnTwo = document.getElementById("btnTwo");
var divs = document.getElementsByTagName("div");
//2.给btnOne按钮设置点击事件
btnOne.onclick = function () {
for(var i = 0 ; i < divs.length; i++){
divs[i].style.border = '1px solid red';
}
}
//3.给btnTwo按钮设置点击事件
btnTwo.onclick = function () {
for(var i = 0 ; i < divs.length; i++){
divs[i].textContent = "我是设置的文本";
// divs[i].innerHTML = "我是设置的文本";
}
}
}
// 再来一个入口函数。
window.onload = function () {
console.log("我又是一个入口函数");
}
</script>
</body>入口函数只有一个时：
入口函数只有两个时：
jQuery的各版本及区别
1.x 支持老浏览器比如ie678 停止更新了
2.x 不支持老浏览器的 停止更新了
3.x 不支持老浏览器的 更新中
每一个版本jQuery又有压缩版和未压缩版
- compressed 压缩版也叫精简版，去掉了格式，体积小，用于发布
- uncompressed 未压缩版也叫原版，有统一的格式，体积较大，方便阅读，用于测试、学习和开发
jQuery的入口函数
1.jQuery写法2种.
//1.1
$(document).ready(function () {
});
//1.2
$(function () {
});jQuery入口函数和window.onload入口函数的区别
-
window.onload入口函数不能写多个,但是jQuery的入口函数是可以写多个的
-
执行时机不同: jQuery入口函数要快于window.onload【jQuery入口函数要等待页面上dom树加载完后执行.window.onload要等待页面上所有的资源(dom树/外部css/js连接,图片)都加载完毕后执行.】
window.onload = function () {
alert("我是window.onload");
}
$(function () {
alert("我是jQuery入口函数");
});先弹出jQuery入口函数，再弹出window.load
$函数
$其实和jQuery是等价的,是一个函数.
jquery的“$”是什么意思?
$是JQuery常用的一个回传函数，定义为 “选取”，英文是 selector 的缩写
$其实是jQuery的别称，而jQuery就是jQuery库提供的一个函数。
该函数可以根据 () 里的参数进行查找和选择html文档中的元素，()内不仅可以是ID，还可以是各类选择器
比如：
$(document)就是 选取整个文档对象
jquery $符号的作用
1、作为jQuery包装器，利用选择器来选择DOM元素(这个也是最强大的功能)
例如：
$(“table tr:nth-child(even)”)
2、实用工具函数，作为几个通用的实用工具函数的命名空间的前缀
例如：
$.trim(someString)
3、文档就绪处理程序，相当于$(document).ready(…)
例如：$(function(){…}); 里面的函数会在DOM树加载完之后执行
4、创建DOM元素
例如：
$("
how are you?
")
5、扩展jQuery
例如：
$.fn.disable = function(){…}
DOM对象与jQuery对象
DOM对象：原生JS获取过来的对象就是DOM对象
jQuery对象：用 jQuery 的方式获取过来的对象叫 jQuery 对象
例如：var ele=document.getElementById("div")
，这里使用原生 JS 获取过来的的 ele 就是一个 DOM 对象
$('div') ，这里使用 jQuery 获取过来的对象 $('div') 就是一个 jQuery 对象，下面我们使用 console.dir 分别看看二者对象打印出来是什么
DOM对象
<body> <div id="div"></div> <script> var ele=document.getElementById("div") console.dir(ele) </script> </body>
jQuery对象：
<body> <div></div> <script> console.dir($('div')) </script> </body>
DOM对象 和 jQuery 对象的相互转化：
相互转化的目的：jQuery对象的方法并没有DOM对象多，有些jQuery对象做不到的事情DOM对象却可以做得到，例如视频的播放 play()，因此需要二者的相互转化
DOM对象 转化为 jQuery对象：
直接将获取好的DOM对象放入$内进行包装即可
格式：$('DOM对象')
<div></div>
<script>
var ele=document.querySelector('div');
$('ele')
</script>注意：直接获取得到的就是 jQuery 对象：$('div')
jQuery对象 转化为 DOM对象：
两种格式：（index 为索引号，因为 jQuery 对象以伪数组形式存储，有索引值）
$( 'element' )[ index ]
$( 'element' ).get( index )
<div></div>
<script>
$('div')[0]
</script><div></div>
<script>
$('div').get(0)
</script>jquery选择器
什么是jQuery选择器
- jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素。注意：jQuery选择器返回的是jQuery对象。
- jQuery选择器有很多，基本兼容了CSS1到CSS3所有的选择器，并且jQuery还添加了很多扩展性的选择器。【查看jQuery文档】
- jQuery选择器虽然很多，但是选择器之间可以相互替代，就是说获取一个元素，你会有很多种方法获取到。所以我们平时真正能用到的只是少数的最常用的选择器。
基本选择器
总结：跟css的选择器用法一模一样。
层级选择器
总结：跟css的选择器用法一模一样。
过滤选择器
总结：这类选择器都带冒号
筛选选择器(方法)
总结：筛选选择器的功能与过滤选择器有点类似，但是用法不一样，筛选选择器主要是方法。
元素设置
样式设置
/*1.设置一个样式*/
//两个参数 设置的样式属性,具体样式
$('li').css('color','red');
//传入对象（设置的样式属性:具体样式）
$('li').css({'color':'red'});
/*2.设置多个样式*/
$('li').css({
'color':'green',
'font-size':'20px'
});
类名设置
/*1.添加一个类*/
$('li').addClass('now');
/*2.删除一个类*/
$('li').removeClass('now');
/*3.切换一个类 有就删除没有就添加*/
$('li').toggleClass('now');
/*4.匹配一个类 判断是否包含某个类 如果包含返回true否知返回false*/
$('li').hasClass('now');
属性设置
/*1.获取属性*/
$('li').attr('name');
/*2.设置属性*/
$('li').attr('name','tom');
/*3.设置多个属性*/
$('li').attr({
'name':'tom',
'age':'18'
});
/*4.删除属性*/
$('li').removeAttr('name');
prop方法
/*对于布尔类型的属性，不要attr方法，应该用prop方法 prop用法跟attr方法一样。*/
$("#checkbox").prop("checked");
$("#checkbox").prop("checked", true);
$("#checkbox").prop("checked", false);
$("#checkbox").removeProp("checked");
动画
基本动画
/*注意：动画的本质是改变容器的大小和透明度*/
/*注意：如果不传参数是看不到动画*/
/*注意：可传入特殊的字符 fast normal slow*/
/*注意：可传入数字 单位毫秒*/
/*1.展示动画*/
$('li').show();
/*2.隐藏动画*/
$('li').hide();
/*3.切换展示和隐藏*/
$('li').toggle();
滑入滑出
/*注意：动画的本质是改变容器的高度*/
/*1.滑入动画*/
$('li').slideDown();
/*2.滑出动画*/
$('li').slideUp();
/*3.切换滑入滑出*/
$('li').slideToggle();
淡入淡出
/*注意：动画的本质是改变容器的透明度*/
/*1.淡入动画*/
$('li').fadeIn();
/*2.淡出动画*/
$('li').fadeOut();
/*3.切换淡入淡出*/
$('li').fadeToggle();
$('li').fadeTo('speed','opacity');
自定义动画
/*
* 自定义动画
* 参数1：需要做动画的属性
* 参数2：需要执行动画的总时长
* 参数3：执行动画的时候的速度
* 参数4：执行动画完成之后的回调函数
* */
$('#box1').animate({left:800},5000);
$('#box2').animate({left:800},5000,'linear');
$('#box3').animate({left:800},5000,'swing',function () {
console.log('动画执行完成');
});
动画案例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.box {
width: 322px;
position: fixed;
bottom: 0;
right: 0;
overflow: hidden;
}
span {
position: absolute;
top: 0;
right: 0;
width: 30px;
height: 20px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="box" id="box">
<span id="closeButton"></span>
<div class="hd" id="headPart">
<img src="../images/t.jpg" alt=""/>
</div>
<div class="bd" id="bottomPart">
<img src="../images/b.jpg" alt=""/>
</div>
</div>
</body>
</html>
<script src="../libs/jquery-1.12.4.js"></script>
<script>
$(function () {
//1.给关闭按钮一个点击事件.
$('#closeButton').click(function () {
//2.让下面那部分的高度动画变为0.
$('#bottomPart').animate({
height:0
},500, function () {
//3.让整个大盒子的宽度动画变为0
$('#box').animate({
width:0
},1000);
});
});
});
</script>
动画队列
jQuery中有个动画队列的机制。
当我们对一个对象添加多次动画效果时后添加的动作就会被放入这个动画队列中，
等前面的动画完成后再开始执行。
可是用户的操作往往都比动画快，
如果用户对一个对象频繁操作时不处理动画队列就会造成队列堆积，
影响到效果。
stop使用
/*1.停止当前动画 如果动画队列当中还有动画立即执行*/
//$('div').stop();
/*2.和stop()效果一致 说明这是默认设置*/
//$('div').stop(false,false);
/*3.停止当前动画 清除动画队列*/
//$('div').stop(true,false);
/*4.停止当前动画并且到结束位置 清除了动画队列*/
//$('div').stop(true,true);
/*5.停止当前动画并且到结束位置 如果动画队列当中还有动画立即执行*/
$('div').stop(false,true);
节点操作
创建节点
/*创建节点*/
var $a = $('<a href="http://www.baidu.com" target="_blank">百度1</a>');
克隆节点
/*如果想克隆事件 false true克隆事件*/
var $cloneP = $('p').clone(true);
添加&移动节点
/*追加自身的最后面 传对象和html格式代码*/
$('#box').append('<a href="http://www.baidu.com" target="_blank"><b>百度3</b></a>');
$('#box').append($('a'));
/*追加到目标元素最后面 传目标元素的选择器或者对象*/
$('<a href="http://www.baidu.com" target="_blank"><b>百度3</b></a>').appendTo($('#box'));
$('a').appendTo('#box');
prepend();
prependTo();
after();
before();
删除节点&清空节点
/*1.清空box里面的元素*/
/* 清理门户 */
$('#box').empty();
/*2.删除某个元素*/
$('#box').remove();
jQuery特殊属性操作
val方法
val方法用于设置和获取表单元素的值，例如input、textara的值
//设置值
$("#name").val('张三');
//获取值
$("#name").val();
html方法与text方法
html方法相当于innerHTML text方法相当于innerText
//设置内容
$('div').html('<span>这是一段内容</span>');
//获取内容
$('div').html()
//设置内容
$('div').text('<span>这是一段内容</span>');
//获取内容
$('div').text()
区别：html方法会识别html标签，text方法会将其直接当成字符串，并不会识别html标签。
width方法与height方法
设置或者获取高度
//带参数表示设置高度
$('img').height(200);
//不带参数获取高度
$('img').height();
获取网页的可视区宽高
//获取可视区宽度
$(window).width();
//获取可视区高度
$(window).height();
scrollTop与scrollLeft
设置或者获取垂直滚动条的位置
//获取页面被卷曲的高度
$(window).scrollTop();
//获取页面被卷曲的宽度
$(window).scrollLeft();
offset方法与position方法
offset方法获取元素距离document的位置，position方法获取的是元素距离有定位的父元素的位置。
//获取元素距离document的位置,返回值为对象：{left:100, top:100}
$(selector).offset();
//获取相对于其最近的有定位的父元素的位置。
$(selector).position();
jQuery事件机制
JavaScript中已经学习过了事件，但是jQuery对JavaScript事件进行了封装，增加并扩展了事件处理机制。jQuery不仅提供了更加优雅的事件处理语法，而且极大的增强了事件的处理能力。
on注册事件(重点)
jQuery1.7之后，jQuery用on统一了所有事件的处理方法。
最现代的方式，兼容zepto(移动端类似jQuery的一个库)，强烈建议使用。
on注册简单事件
// 表示给$(selector)绑定事件，并且由自己触发，不支持动态绑定。
$(selector).on( "click", function() {});
on注册委托事件
// 表示给$(selector)绑定代理事件，当必须是它的内部元素span才能触发这个事件，支持动态绑定
$(selector).on( "click",'span', function() {});
on注册事件的语法：
// 第一个参数：events，绑定事件的名称可以是由空格分隔的多个事件（标准事件或者自定义事件）
// 第二个参数：selector, 执行事件的后代元素（可选），如果没有后代元素，那么事件将有自己执行。
// 第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用（不常使用）
// 第四个参数：handler，事件处理函数
$(selector).on(events,[selector],[data],handler);
事件解绑
off方式（推荐）
// 解绑匹配元素的所有事件
$(selector).off();
// 解绑匹配元素的所有click事件
$(selector).off("click");
触发事件
$(selector).click(); //触发 click事件
$(selector).trigger("click");
jQuery事件对象
jQuery事件对象其实就是js事件对象的一个封装，处理了兼容性。
//screenX和screenY 对应屏幕最左上角的值
//clientX和clientY 距离页面左上角的位置（忽视滚动条）
//pageX和pageY 距离页面最顶部的左上角的位置（会计算滚动条的距离）
//event.keyCode 按下的键盘代码
//event.data 存储绑定事件时传递的附加数据
//event.stopPropagation() 阻止事件冒泡行为
//event.preventDefault() 阻止浏览器默认行为
//return false:既能阻止事件冒泡，又能阻止浏览器默认行为。黑马程序员版
6872
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
