什么是jQuery
文件-偏好设置-编辑器-拼写检查-不使用拼写检查
先说说js的缺点
不能添加多个入口函数，如果有多个，都会一个一个的覆盖，并只执行最后一个。
原生JS的api名字太长,不好记
原生js中属性和方法对浏览器兼容性不好
原生js有时代码冗余
容错率低，前面的代码有错，后面的代码不能执行
jQuery就是一个封装了很多方法的js库
两种jQuery入口函数
$(document).ready(function(){
//
});
$(function(){
//
});
jQuery入口函数和window.onload入口函数的区别
1.window.onload入口函数不能写多个，但是jQuery的入口函数可以写多个
2.jQuery入口函数要快于window.onload，window.onload要等待全部资源加载完毕后执行
$是一个函数，传递的参数不同，效果也不一样
-
传递的是一个匿名函数-入口函数
$(function(){ }); -
传递的是一个字符串-选择器或创建一个标签
//选择器
$('#btn_one').click(function(){
alert("123");
});
//创建一个标签
var txt="<div>12345</div>";
$("body").append(txt);
- 如果参数是一个dom对象，那么他就会把dom对象转换成jQuery对象
//dom对象就是原生js选择器获取到的对象
<!--设:<button id="one"/>-->
var div1=document.getElementById("one");
document.getElementsByTagName("div");
-----------------------------------
dom对象转成jQuery对象
$(dom对象)
var $div1=$(div1);
var $div1=$('#one');
-----------------------------------
jQuery对象转换成dom对象
dom对象不能调用jQuery对象。
jQuery选择器不能调用原生jsdom属性方法
jQuery对象是一个伪数组，是dom对象的一个包装集
开关案例
jqure：
$(function(){
var btns=document.getElementsByTagName("button");
//console.log(btns);
btns[1].onclick=function(){
$('body').css('backgroundColor','black');
}
btns[0].onclick=function(){
$('body').css('backgroundColor','white');
}
});
body:
<body>
<!--不使用id进行设置button-->
<button>开</button>
<button>关</button>
</body>
两种设置css的方式
$(function(){
$('#btn_one').click(function(){
$('#div_01').css('width',300);
$('#div_01').css('height',300);
$('#div_01').css('backgroundColor','red');
});
$('#btn_two').click(function(){
$('#div_01').css({
width:300,
height:300,
backgroundColor:'red'
});
});
});
jQuery基本选择器
id选择器
标签选择器
类选择器
并集选择器
交集选择器
jQuery层级选择器
获取id为father的所有div及子标签p
不可以‘#father>div,p’ ,这样获取的p是整个body里面的p
jQuery过滤选择器
$(function(){
$('li:odd').css('backgroundColor','skyblue');
$('li:even').css('backgroundColor','pink');
//收尾两行为红色
$('li:eq(0)').css('backgroundColor','red');
$('li:eq(4)').css('backgroundColor','red');
});
jQuery筛选选择器(方法)
下拉菜单案例
mouseover事件在鼠标移动到选取的元素及其子元素上是触发
mouseenter事件只在鼠标移动到选取的元素上时触发
mouseout事件在鼠标离开选取元素时触发
mouseleave
建议使用mouseenter和mouseleave
css
<style type="text/css">
ul {
list-style: none;
}
.wrap li ul {
position: absolute;
top: 30px;
display: none; //设置隐藏
}
</style>
html
<div class="wrap">
<ul>
<li>
<a href="javascript:void(0);">一级菜单1</a>
<ul>
<li><a href="javascript:void(0);">二级菜单1</a></li>
<li><a href="javascript:void(0);">二级菜单2</a></li>
<li><a href="javascript:void(0);">二级菜单3</a></li>
</ul>
</li>
</div>
js
$(function(){
//！！！不要给a设置事件，要用ul里面的li，包括了a和子li
//鼠标移入事件
$('.wrap>ul>li').mouseenter(function(){
//让二级菜单显示
//this是当前一级菜单，这里的this是dom对象
//$(this).children('ul').css('display','block');
$(this).children('ul').stop(true,false).show();//show()方法本质上就是把display属性为block
});
$('.wrap>ul>li').mouseleave(function(){
$(this).children('ul').stop(true,false).hide(); //hide相当于display：none
});
});
透明度opacity
$('li').css('opacity',0.4);//设置li透明度为0.4
遍历
手风琴案例
js
$(function () {
//需求:点击标题li标签,对应的div显示, 他的兄弟标签li下面的div隐藏.
$('.parentWrap>.menuGroup').click(function(){
$(this).children('div').show().parent().siblings('li').children('div').hide();
});
});
Class类操作
添加类
addClass
.bgc {
background-color: green;
}
.fontSize30 {
font-size: 30px;
}
.width200 {
width: 200px;
}
<input type="button" value="添加类" id="addClass"/>
$('#addClass').click(function(){//设置div字体30宽200
$('#div1').addClass('fontSize30 width200');
});
移除类
removeClass
<input type="button" value="移除类" id="removeClass"/>
$('#removeClass').click(function(){
// $('#div1').removeClass('fontSize30');
$('#div1').removeClass();//删除全部样式
});
判断类
hasClass
判断一个元素是否有某个类，有true没有flase
$('#hasClass').click(function(){
console.log($('#div1').hasClass('fontSize30'));
});
切换类
toggleClass
如果元素有某个类就移除，没有就添加
$('#toggleClass').click(function(){
$('#div1').toggleClass('fontSize30');
});
动画
三组基本动画
$(function () {
//1.显示 show();
$('#show').click(function(){
$('#div1').show(1000);
});
//2.隐藏
$('#hide').click(function(){
$('#div1').hide(1000);
});
//3.切换 toggle
$('#toggle').click(function(){
$('#div1').toggle(1000);
});
});
slideUp向上隐藏
slideDown向下显示
fadeIn淡入
fadeOut淡出
fadeToggle淡入淡出切换
fadeTo淡入淡出到一定程度
$('#div1').fadeTo(1000,0.5);//将颜色透明度变为0.5
自定义动画
animate()
参数1：必选 对象需要做的动作
参数2：可选 对象执行的时间
参数3：可选 匀速还是缓动 linear(匀速) swing(缓动)，默认缓动
参数4：动画执行完毕后的回调函数
例子：
#div1{
width: 100px;
height: 100px;
background-color: #00FFFF;
position: absolute;<!--不设置的话宽度是100%-->
left: 0px;
top: 100px;
}
<div id="div1"></div>
<button id="button1">123</button>
$(function(){
$('#button1').click(function(){
$('#div1').animate({
left:"300px"
},1000,'linear',function(){
alert(123);
});
});
});
stop方法
参数1：是否清除队列 为false的时候会走完一遍流程
参数2：是否跳转到最终效果 为true的时候如果执行一半的时候跳转到最终结果
两个都是布尔类型，默认两个都是false
节点
创建节点
$('#btn2').click(function(){
alert(123);
var $link=$('<a href="http://www.baidu.com/">百度</a>');
console.log($link);
$('body').append($link);
});
html()与$()的不同
html()会把关于他的代码全部执行一遍，再次点击会掩盖上一次的数据
$()每一次执行都会增加一次
添加节点方法
//1.append()
//父元素.append(子元素); //作为最后一个子元素添加.
$('#btnAppend').click(function () {
//1.1 新创建一个li标签,添加到ul1中的去.
// var $liNew = $("<li>我是新创建的li标签</li>");
// $('#ul1').append($liNew);
//1.2 把ul1中已经存在的li标签添加到ul中去. 剪切后作为最后一个子元素添加.
// var $li3 = $('#li3');
// $('#ul1').append($li3);
//1.3 把ul2中已经存在的li标签添加到ul1中去.剪切后作为最后一个子元素添加.
var $li32 = $('#li32');
$('#ul1').append($li32);
});
//2.prepend();
//父元素.prepend(子元素); //作为第一个子元素添加.
$('#btnPrepend').click(function () {
//2.1 新建一个li标签,添加到ul1中去.
// var $liNew = $("<li>我是新创建的li标签</li>");
// $('#ul1').prepend($liNew);
//2.1 把ul1中已经存在的li标签添加到ul1中去. 剪切后作为第一个子元素添加.
// var $li3 = $('#li3');
// $('#ul1').prepend($li3);
//2.2 把ul2中已经存在的li标签添加到ul1中去. 剪切后作为第一个子元素添加.
var $li32 = $('#li32');
$('#ul1').prepend($li32);
});
//3.before()
//元素A.before(元素B); //把元素B插入到元素A的前面,作为兄弟元素添加
$('#btnBefore').click(function () {
//新建一个div
var $divNew = $('<div>我是新建的div</div>');
$('#ul1').before($divNew);
});
//4.after();
//元素A.after(元素B); //把元素B插入到元素A的后面,作为兄弟元素添加.
$('#btnAfter').click(function () {
//新建一个div
var $divNew = $('<div>我是新建的div</div>');
$('#ul1').after($divNew);
});
//5.appendTo();
//子元素.appendTo(父元素); //把子元素作为父元素的最后一个子元素添加.
$('#btnAppendTo').click(function () {
//5.1 新建一个li标签,添加到ul1中去.
var $liNew = $("<li>我是新创建的li标签</li>");
$liNew.appendTo($('#ul1'));
});
选中
:selected
清除节点
清空元素
错误实例
$('#ul1').html("");//不推荐使用，因为不安全，可能会造成内存泄露
推荐方式
$('#ul1').empty();//推荐使用方式
清除子元素
清空元素
$('#li2').empty();
移除某一元素
$('#li2').remove();
移除一个元素的父元素
$('#li2').parent().empty();
属性操作
attr
设置属性
如果有这个属性就替换属性，没有就添加
$('img').attr('src','992.gif');
修改多个属性
$('img').attr({
src:'992.gif',
aaa:'123'
});
});
获取属性
console.log($('img').attr('src'));
removeAttr
移除属性
$('img').removeAttr('alt');
prop
checked、selecked、disabled这类boolean类型属性来说，不能用attr方法，只能使用prop方法
console.log($('#check').prop('checked'));
事件对象
注册一个事件，系统就会帮我们生成一个对象记录这个事件触发时候的一些信息
event可以用e代替
event.altKey:true 是否被按下并保持住（按住了某个键）
e.screenX 距离屏幕的水平坐标
e.clientX 可视区
e.pageY 距离页面左上角 （不变）
阻止事件冒泡
e.stopPropagation();
$('#btn_01').on('click',function(e){
alert('1');
e.stopPropagation();
});
$('.div01').on('click',function(e){
alert('2');
});
组织a标签跳转
e.preventDefault()
return false ==e.preventDefault()+e.stopPropagation();
键盘代码
event.keyCode 按下的键盘代码
var $div = $('#bgChange');
//获取显示按键的span
var $showCode = $('#keyCodeSpan');
//给页面注册一个键盘按下事件.
$(document).on('keydown', function (e) {
//console.log(e.keyCode); //r 82 g 71 b 66 p 80 y 89
switch (e.keyCode){
case 82:
$div.css('backgroundColor','red');
$showCode.text(82);
break;
case 71:
$div.css('backgroundColor','green');
$showCode.text(71);
break;
case 66:
$div.css('backgroundColor','blue');
$showCode.text(66);
break;
case 80:
$div.css('backgroundColor','purple');
$showCode.text(80);
break;
case 89:
$div.css('backgroundColor','yellow');
$showCode.text(89);
break;
default :
$div.css('backgroundColor','pink');
$showCode.text("查无此键");
break;
}
});
prev()上一个兄弟
prevAll()定位当前元素 之前的所有兄弟元素
nextAll() 之后所有的兄弟
创建新的标签和名字
attr（，）；
$(this).attr('new','new').siblings().removeAttr('new');
//给当前元素创建一个属性new，名字为new，去除其他兄弟节点的new属性
JQuery的父、子、兄弟节点查找方法
jQuery.parent(expr) //找父元素
jQuery.parents(expr) //找到所有祖先元素，不限于父元素
jQuery.children(expr) //查找所有子元素，只会找到直接的孩子节点，不会返回所有子孙
jQuery.contents() //查找下面的所有内容，包括节点和文本。
jQuery.prev() //查找上一个兄弟节点，不是所有的兄弟节点
jQuery.prevAll() //查找所有之前的兄弟节点
jQuery.next() //查找下一个兄弟节点，不是所有的兄弟节点
jQuery.nextAll() //查找所有之后的兄弟节点
jQuery.siblings() //查找兄弟节点，不分前后
jQuery.find(expr) //跟jQuery.filter(expr)完全不一样，jQuery.filter(expr)是从初始的
jQuery对象集合中筛选出一部分，而jQuery.find()的返回结果，不会有初始集中
筛选出一部分，比如：
( " p " ) . f i n d ( " s p a n " ) 是 从 元 素 开 始 找 ， 等 于 ("p").find("span")是从元素开始找，等于 ("p").find("span")是从元素开始找，等于(“p span”)
链式编程
如果给元素调用一个方法，这个方法有返回值，并且返回值是一个jquery对象，那就可以继续再点出jQuery方法
end()
回到上一个状态
$('.comment>li').on('mouseenter',function(){
//$(this).text(hei).prevAll().text(hei);
//$(this).nextAll().text(bai);
$(this).text(hei).prevAll().text(hei).end().nextAll().text(bai);
});
遍历jquery对象
each()
var $lis=$('#ulList').children();
//console.log($lis);
$lis.each(function(index,element){
$(element).css('opacity',((index+1)/10));
获取jquery版本
console.log($.fn.jquery);
css常用
position: fixed;/*对于屏幕定位*/
bottom: 0;
right: 0;/*右下角定位*/
overflow: hidden;/*元素内容移除会变成滚动条*/
显示 .show()
隐藏 .hide()
防止页面跳转 return false（如果有超链接时使用）
两种居中方法
position: fixed;
bottom: 50%;
left: 50%;
margin: 100px auto 0;
回到上一个状态
$('.comment>li').on('mouseenter',function(){
//$(this).text(hei).prevAll().text(hei);
//$(this).nextAll().text(bai);
$(this).text(hei).prevAll().text(hei).end().nextAll().text(bai);
});
遍历jquery对象
each()
var $lis=$('#ulList').children();
//console.log($lis);
$lis.each(function(index,element){
$(element).css('opacity',((index+1)/10));
获取jquery版本
console.log($.fn.jquery);
css常用
position: fixed;/*对于屏幕定位*/
bottom: 0;
right: 0;/*右下角定位*/
overflow: hidden;/*元素内容移除会变成滚动条*/
显示 .show()
隐藏 .hide()
防止页面跳转 return false（如果有超链接时使用）
两种居中方法
position: fixed;
bottom: 50%;
left: 50%;
margin: 100px auto 0;
本人前端小白，如有错误请大家指正，一起学习！！！
146
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
