jQuery基础与应用#最流行的前端JS开发框架就要这么用
 收藏

    

 3186人加入学习

价格

限期免费

教学计划

默认计划

学习有效期

2020-04-04至2023-06-30

课程介绍

本课程是JavaScript的高级框架jQuery部分，以最新版本的jQuery进行教学，全面讲解了jQuery的各种API的应用，每个知识点都配合相关的实用案例进行讲解，课程讲解细致并和实战应用相结合。是jQuery非常不错的一课程。

1关： jQuery的基本应用 本关主要介绍js的框架功能，讲解jQuery的引入和基本使用，重点讲解了几种常用的jQuery选择器，并通过实例演示介绍jQuery的一些基础功能。

2关：jQuery编写页面特效 本关主要讲解了jQuery操作样式，包括基本的样式操作和类样式操作，也详细介绍了jQuery处理动画，并通过实例演示一些常见特效的实现过程。

3关：jQuery创建元素和操作属性 本关主要讲解jQuery创建新元素加到页面中，并操作元素的属性，重点介绍了jQuery提供的内部属性方法，并结合实例详细讲解了本关知识点应用。

4关：jQuery的事件操作 本关内容包括各种jQuery的事件操作和事件绑定方式和解绑方法，并对比介绍不同事件的绑定方式，每个应用都有实例结合对照讲解.

 第1关：jQuery的基本应用开始学习

 任务:学习猿地_jQuery_001_相关资料(课件、手册、代码、jq文件) 

 第2关：jQuery编写页面特效开始学习

 任务:3.jQuery操作类样式addClass()方法 

 任务:学习猿地_jQuery_002_相关资料(课件、手册、代码、jq文件) 

 第3关：jQuery创建元素和操作属性开始学习

 任务:学习猿地_jQuery_003_相关资料(课件、手册、代码、jq文件) 

 第4关：jQuery的事件操作开始学习

 任务:学习猿地_jQuery_004_相关资料(课件、手册、代码、jq文件) 

Super ?

jquery和DOM 对象互转

Super ?

jQuery的基本应用笔记

?大月月??

jQuery笔记

一定要放在下面

1.Jquery的顶级对象$
DOM中的顶级对象：document-----页面中的顶级对象
document.下面属性和方法
BOM中的顶级对象是浏览器：window----浏览器的顶级对象
window.浏览器中的属性和方法
window.document

jquery的顶级对象：jQuery -----$

2.页面加载事件
//页面所有的代码都加载完成之后才执行
$(window).load(function () {
console.log("我执行了111111");
});
//页面中基本的标签加载完成之后就执行了
$(document).ready(function () {
console.log("我执行了22222");
});

//简化方法
$(function () {
console.log("我是最简单的方法加载页面")
})

3.常用的jquery中的方法
//常用的选择器 id 元素类
//常用的方法操作样式操作内容操作属性
//常用的事件点击事件鼠标放上鼠标离开
$(function () {
$("li").text("bjyxszd");
$("#btn").attr("data-index","100"); //添加属性
});

4.jquery对象和DOM对象互转

//DOM对象转成jquery对象
/ window.onload = function () {
//DOM 对象
var obj = document.getElementById("btn");
/!obj.onclick = function () {
this.style.backgroundColor ="red";
}!/
//jquery对象 $(window).load(); $(document).ready();
$("#btn").click(function () {
$(this).css("background","pink");
})
}/

//jquery 对象转成DOM 对象
/
1.jquery对象.get(0);
2.jquery对象[0]; /

$(function () {
    /*$("#btn").get(0).onclick = function () {
        this.style.backgroundColor ="yellow";
    }*/
    $("#btn")[0].onclick = function () {
        this.style.backgroundColor ="yellow";
    }
})

$(this).val()=="关灯" .val() 是获取值 $(this).val('关灯'); .val('赋值')

5.jquery的选择器
//DOM获取元素的方式
document.getElementById("id的值");//根据id获取元素一个
document.getElementsByTagName("标签名");//根据标签名字获取元素多个
document.getElementsByName("name属性");//根据Name属性获取元素多个
document.getElementsByClassName("类名");//根据class类名获取元素多个

//jquery选择器
1.id选择器：$("#id的值") ==》1个
2.元素选择器：$("标签名") ==》多个
3.类选择器：$(".类名") ==》多个
4.$("*") ==>所有

6.标签+类选择器 $(li.cls)
7.多条件选择器 $(span,li,div,.cls,#btn);
8.层级选择器
A.后代选择器(子元素中的元素,儿子，孙子，子子孙孙)
$(“#dv li”)或者$(“ul li”)或者$(“.cls li”)
B.子代选择器(直接的所有子元素,儿子)
$(“#ul>li”)或者$(“div >span”)或者$(“.cls >li”)
C.获取当前元素的相邻元素: //这个元素后紧跟着的第一个元素
$(“div + span”)
D.获取当前元素后面所有元素://这个元素后跟着的所有元素
$(“div ~ span”)
E.常见的选择器,(可以理解成是过滤器)
:even偶数选择器
:odd奇数选择器
$(function () {
alert("哈哈");
$("#u1 li:odd").css("backgroundColor","yellow");
$("#u1 li:even").css("backgroundColor","blue");
});
9.索引选择器
eq(3)获取索引为3的元素; 一个
gt(3)索引大于3的所有元素; 多个
lt(3)索引小于3的所有的元素; 多个

$("#u1 li:eq(7)").css("backgroundColor","red");
$("#u1 li:gt(7)").css("backgroundColor","green");
$("#u1 li:lt(5)").css("backgroundColor","black");

10.jquery操作样式常见的方法
.html()方法,设置标签中间显示其他标签及内容,类似于innerHTML
.text()方法,设置标签中间显示的文本内容,类似于innerText
.val()方法.设置input标签中value的值,类似于value
.css()方法,.设置元素的样式,类似于style
注意:
()中写字符串,一个参数,就是要设置的值,什么也不写,返回的是这个属性的值如：$("#dv").html(); ==>返回标签里的内容
.css()写的是键值对

A.操作样式:
//第一种方式
/$("#btn").click(function () {
$("#dv").css("width","100px");
$("#dv").css("height","100px");
$("#dv").css("backgroundColor","red");
})/

//第二种方式
/$("#btn").click(function () {
$("#dv").css("width","100px").css("height","100px").css("backgroundColor","red");
})/

//第三种json格式
$("#btn").click(function () {
$("#dv").css({"width":"100px","height":"100px","backgroundColor":"red"});
})
})

11.操作类样式
addClass();参数:类样式名字，添加样式的同时不会干掉原有的样式
removeClass();不写参数移除所有的类样式
removeClass(“cls“);移除指定的一个类样式

//判断该元素是否有这个类样式
console.log($("#dv").hasClass("cls2"));
//toggleClass(类名)；如果有此类就删除，没有就添加
$("body").toggleClass("cls");

var index = $(this).index(); //对应索引操作

$(".bottom>li").eq(index).addClass("selected").siblings("li").removeClass("selected");

12.链式编程
链式编程原理:内部返回了return this当前对象
有些方法设置了值才能返回当前对象，如果没有设置值，是获取属性对应的值,而不是当前对象

13.获得兄弟元素的方法
next(); //当前元素之后的紧邻着的第一个兄弟元素（下一个）
nextAll(); //当前元素之后的所有兄弟元素
prev(); //当前元素之前的紧邻着的兄弟元素（上一个）
prevAll(); //当前元素之前的所有兄弟元素
siblings(); //当前元素的所有兄弟元素(同袍元素除自己外)

//end() 断链可以恢复到断链之前的效果
$(this).prevAll().css("background","blue").end().nextAll().css("background","yellow");

14.jquery显示隐藏动画
hide()方法:
$("div").hide(1000); //参数是数字参数:可以是一个number类型,也可以是字符串类型
$("div").hide("slow");
$("div").hide("normal");
$("div").hide("fast"); $("div").hide(1000,function () {
alert("隐藏完毕");
});

show()方法:
$("div").show(1000); //参数是数字
$("div").show("slow");
$("div").show("normal");
$("div").show("fast");
$("div").show(1000,function () {
alert("显示完毕");
});

$(function () {
$("#btn1").click(function () {
//last() 最后一个元素开始隐藏*
$("div>img").last().hide(600,function () {
//arguments.callee 相当于递归一个一个元素进行隐藏
$(this).prev().hide(600,arguments.callee);
})
});
$("#btn2").click(function () {
//first() 第一个元素开始显示
$("div>img").first().show(600,function () {
//arguments.callee 相当于递归一个一个元素进行隐藏 *
$(this).next().show(600,arguments.callee);
})
});
})

15.滑入滑出淡入淡出动画
$("div").slideUp(1000);//滑入
$("div").slideDown(1000);//滑出
$("div").slideToggle(1000);//切换滑入滑出
$("div").fadeIn(1000);//淡入
$("div").fadeOut(1000);//淡出
$("div").fadeToggle(1000);//切换淡入淡出

//可以设置透明度,参数1:时间,参数2:到达透明度
$(“div”).fadeTo(1000,0.3);//一个参数,常用
//参数1:没有时间,参数2:到达透明度
//和css("opacity",0.1);
$("div").fadeTo(0,0.1);//一个参数

16.自定义动画:animate方法
第一个参数:JSON对象，可以通过键值对，设置多个样式(数值的属性可以改,颜色不能改)
第二个参数:动画的时间
第三个参数:回调函数(可选)

停止动画效果:stop()方法,解决下拉框案例中的bug
$(this).children("ul").stop().show(500);//显示ul

17.创建元素和追加元素
DOM中可以动态创建元素:document.createElement(“标签的名字”);
jQuery中同样可以创建元素标签,并且返回的就是jQuery对象,可以直接调用方法进行使用
append：方法用来在元素的末尾追加元素（最后一个子节点）。增加元素末尾(儿子)(元素内部) 把元素追加到其他元素里面
prepend：在元素的开始添加元素（第一个子节点）。增加元素开始(儿子)
after：在元素之后添加元素（添加兄弟）增加元素后面(兄弟)
before：在元素之前添加元素（添加兄弟）增加元素前面(兄弟)

$('#dv').append($('学习猿地'));
append方法可以把页面中的元素添加到其他标签中,添加的方式属于移动
append() 相当于剪切 $("#dv>p").clone() 把$("#dv>p")克隆一份 clone():克隆
$("#dv1").append(obj); //在dv1里添加#dv>p 被动
$($("#dv>p")).appendTo($("#dv1")); //把"#dv>p"追加到dv1里面主动

18..html方法
//设置内容后,原内容丢失,返回的是当前对象
//var dvObj=$("div").html("哈哈");
//设置层中间显示其他的标签内容
$("div").html("学习猿地");
//直接获取的是标签中的内容
console.log($("div").html());
html方法设置内容,返回的是当前的对象,如果不传入参数,获取的是标签中的内容
.text方法同上
创建元素的方式:
.html方法可以创建元素
$(“html标签”)可以创建元素

19.清空层中的内容和移除层
$("div").html("");//删除元素中的所有内容 $("div").html();括号里面什么也不加是获取内容
$("div").empty();//清空元素中的所有内容
$("div").remove();//删除自身，自杀式
$("div>p").remove();//可以删除子元素的某一个节点

20.设置和获取表单的value
常见的表单标签都可以通过val方法获取和设置value值
$("#txt1").val("admin"); console.log($("#txt1").val());
$("#s1").val(2);//设置value为2的选中
console.log($("#s1").val());

textarea 可以用 text() 方法设置和获取value

21.设置和获取系统属性值或者自定义属性
attr()方法:可以设置属性值,两个参数:1.属性名字,2,属性值
attr()方法:可以获取属性值,一个参数:1.属性名字

$(function () {
$("#btn").click(function () {
var aobj = $('');//创建a元素
aobj.text("百度"); //标签内容
aobj.attr("href","https://www.baidu.com");
aobj.css("background","pink").css("color","red");

        (aobj).appendTo($("#dv"));
    })
})

22.bool属性的设置方法 prop("属性","值");

java
php
go
python
jquery

//$("#dv :checkbox") 选择器的一种选择dv下所有属性是checkbox的元素
$(function () {
$("#btnall").click(function () {
$("#dv :checkbox").prop("checked",true);
});
$("#btnoall").click(function () {
$("#dv :checkbox").prop("checked",false);
})
})

var checkedval = $(this).prop('checked');
$("#dv input").prop('checked',checkedval);

23.获取宽度和高度的方法
//1.获取宽度高度 width() height()
console.log($("#dv").width());
console.log($("#dv").height());

        //2.设置宽度
        //console.log($("#dv").width(500));

        //3.包含padding innerWidth()) innerHeight())
        console.log($("#dv").innerWidth());
        console.log($("#dv").innerHeight());

        //4.包含padding+border  outerWidth()  outerHeight()
        console.log($("#dv").outerWidth());
        console.log($("#dv").outerHeight());

        //5.包含padding+border+margin(true)  outerWidth(true)  outerHeight(true)
        console.log($("#dv").outerWidth(true));
        console.log($("#dv").outerHeight(true));

        //6.获取页面可视区域
        console.log($(window).width());
        console.log($(window).height());

24.获取偏移量位置
设置的时候元素在设置前如果没有脱离文档流,设置的时候会自动进行脱离文档流,默认为relative；
如果设置前有脱离文档流,那么设置的时候直接改变位置。

A.获取偏移量
console.log($("div").offset().left); //左偏移
console.log($("div").offset().top); //右偏移
B.设置偏移量
$("div").offset({"left":100,"top":100});

25.滚动位置
$(document).scrollLeft(500)；==》距左滚动500
$(document).scrollTop(200)；==》距上滚动200
console.log($(document).scrollLeft());
console.log($(document).scrollTop());
整个屏幕加载滚动事件
$(window).scroll(function () {})

26.事件绑定bind()方法
$(function () {
$("#btn").bind({"click":function () {
alert("哎呀妈呀");
},"mouseover":function () {
$(this).css("backgroundColor","red");
},"mouseout":function () {
$(this).css("backgroundColor","");
}});
})

27.绑定事件的on()方法手机开发中也是使用on的方式绑定事件
*on()方法为父级元素绑定事件,子元素来触发.**
$(function () {
$("#btn").click(function () {
$('

我是p元素

').appendTo($("#dv")); //把p加入到dv里面
//$("#dv").append('

我是p元素

'); 在dv里面追加p元素

        /*
        on()  绑定事件 的三个元素
        * 参数1:绑定事件的类型
        * 参数2:绑定事件的元素
        * 参数3:执行事件的函数
        */
        $("#dv").on("click","p",function () {
            alert("看见我了没?")
        })
    })
})

28.解除绑定事件
.off()方法可以解绑事件
$("#btn1").on("click",function () {
alert("被点了");
});

$("#btn2").on("click",function () {
$("#btn1").off("click");
});

推荐:用什么方式绑定事件就要用对应的解绑事件解除绑定
$("#btn").bind("click",function(){});
$("#btn").unbind("click");
$("#dv").delegate("p","click",function(){});
$("#dv").undelegate("p","click");

//解绑多个事件
$("#btn1").off("click mouseover");
多个事件解绑加空格

$(function () {
$("#div").on("click",function () {
alert("层被点了");
});
/$("#div").on("click","p",function () {
alert("p被点了");
});/
$("#btn1").on("click",function () {
//解绑事件的时候div和p同时解绑(所有的)
//自身绑定的事件以及动态绑定的事件都会解绑 $("div").off("click");
});
//解除绑定事件:自身的绑定事件和动态绑定的事件都会被解绑
//$("#div").off("click","**");
//$("#div").off();//全部解绑
//固定的写法,解除p的绑定事件,自身div的事件不会被解绑
})

29.事件的触发

.trigger('focus').trigger('select'); 获取焦点和选中内容的事件触发
$(function () {
$("#btn1").click(function () {
//$("#txt").focus(); //直接调用元素事件
//$("#txt").trigger("focus"); //同上效果
$("#txt").triggerHandler("focus");//不会触发浏览器默认获取焦点的行为,但是会执行事件
})
})

.trigger()和.triggerHandler()区别前者会触发浏览器的默认行为,并执行事件,后者不会触发浏览器默认行为,但是会执行事件
获得焦点属于浏览器的默认行为

30.事件冒泡处理
$("#dv2").click(function () {
alert("我是dv2");
return false;
});
$("#dv3").click(function(event) {
alert("我是dv3");
event.stopPropagation();
//return false;
});

    $("#monkey").click(function() {
        alert("我是连接");
        return false;  //取消默认事件  阻止跳转
    });

31.隐式迭代each()
$(function () {
$("#uu>li").each(function (index,element) {
//each():相当于循环遍历
//console.log(index);
$(element).css("opacity",(index + 1) / 10); //颜色渐变
})
})

32.解决多库共存
//让jQuery释放对$的控制权
$.noConflict();
var $="哦买噶";
console.log($);
jQuery(function () {
jQuery("#btn").click(function () {
alert("正常的执行");
});
});