目录
Tips
1.vau()
用于清空和设置内容
$(this).val("");
$(this).val("按钮");
2.html方法与text方法
<div><h3>我是标题</h3></div>
html:innerHTML text:innerText
console.log($("div").html());//<h3>我是标题</h3>
console.log($("div").text());//我是标题
$("div").html("<p>我是文本</p>");
$("div").text("我是文本");
3.width方法与height方法
获取div的宽度
console.log($("div").css("width"));
$("div").css("width", "400px");
直接获取到的是数字
就是获取的width的值
console.log($("div").width());//width
console.log($("div").innerWidth());//padding+width
console.log($("div").outerWidth());//padding+width+border
console.log($("div").outerWidth(true));//padding+width+border+margin
$("div").width(400);
需要获取页面可视区的宽度和高度
console.log($(window).width());
console.log($(window).height());
4.scrollTop与scrollLeft
console.log($(window).scrollTop());
console.log($(window).scrollLeft());
5.offset方法与position
//获取元素的相对于document的位置
console.log($(".son").offset());
//获取元素相对于有定位的父元素的位置
console.log($(".son").position());
6.jquery事件机制的发展历程
6.1 click()方式
//注册简单事件，缺点：一次只能注册一个事件
$("p").click(function () {
alert("呵呵");
});
6.2 bind方式
$("p").bind({
click:function () {
alert("呵呵")
},
mouseenter:function () {
alert("哈哈")
}
6.3 delegate()方式
给父元素注册委托事件，最终还是有子元素来执行。
要给div注册一个委托事件,但是最终不是由执行，而是有p执行
第一个参数：selector:事件最终由谁来执行。
第二个参数：事件的类型
第三个参数：函数，要做什么
动态创建的也能有事件 :缺点：只能注册委托事件
$("#box").delegate("p", "click", function () {
//alert("呵呵");
console.log(this);
});
7.on方式注册事件
推荐以后都用这种方式注册事件
$("p").on("click", function () {
alert("呵呵");
});
$("div").on("click", "p", function () {
alert("呵呵")
});
$("#btn").on("click", function () {
$("<p>我是新建的p元素</p>").appendTo("div");
});
8.trigger()触发事件
//触发p元素的点击事件
//$("p").click();
//$("p").trigger("click");
9.事件对象
<script>
$(function () {
//100，注册的时候的时候，把100传到事件里面去。
var money = 100;
//on(types, selector, data, callback)
//使用on方法的时候，可以给data参数传一个值，可以在事件里面通过e.data获取到。
$("div").on("click",100, function (e) {
console.log(e);
console.log("哈哈，我有"+e.data);
});
});
</script>
10.阻止冒泡和阻止浏览器的默认行为
阻止 默认
e.preventDefault();
阻止冒泡
e.stopPropagation();
alert("呵呵");
return false;//既能阻止事件冒泡，也能阻止浏览器的默认行为。
console.log(e.cancelBubble);
11.delay()
$("div").fadeIn(1000).delay(2000).fadeOut(1000);
12.链式编程
设置性操作：可以链式编程
获取性操作，不能链式，因为获取性操作，数值，字符串，
返回值是不是一个jq对象。
console.log($("div").width(200).height(200).css("backgroundColor", "pink").width());
13.each方法
$("li").each(function (index, element) {
$(element).css("opacity", (index+1)/10);
})
14.jq释放$控制权
//jQuery释放$的控制权
$.noConflict();
15.jquery.color.js的使用
<!--1. 引入jquery的js文件-->
<script src="jquery-1.12.4.js"></script>
<!--2. 引入插件的js文件-->
<script src="jquery.color.js"></script>
<script>
$(function () {
//3. 直接使用即可。
//说明jquery不支持颜色的渐变,颜色最好用16进制
$('div').animate({backgroundColor:"#ffc0cb"}, 3000, function () {
alert("呵呵");
});
});
</script>
16.jquery.lazyload.js的使用
<script>
$(function () {
$("img.lazy").lazyload();
});
</script>
17.
18.jq插件补充
18.1jquery插件的实质
就是给jquery的原型上增加方法。
//$.fn ==== jQuery.prototype
$.fn.sayHi = function () {
console.log("呵呵");
}
$(document).sayHi();
18.2自定义jq插件
$.fn.bgColor = function (color) {
//this是一个jq对象
this.css("backgroundColor", color);
return this;
};
代码
1.事件执行顺序
// 这个是p自己注册的事件（简单事件）
$("p").on("click", function () {
alert("呵呵哒");
});
//给div自己执行的
$("div").on("click", function () {
alert("呜呜呜");
});
//给div里面的p执行 委托事件
$("div").on("click", "p", function () {
alert("嘿嘿嘿")
});
时间执行顺序：呵-》嘿-》呜2.表格删除功能
<script>
$(function () {
//1. 找到清空按钮，注册点击事件，清空tbody
$("#btn").on("click", function () {
$("#j_tb").empty();
});
//2. 找到delete，注册点击事件
// $(".get").on("click", function () {
// $(this).parent().parent().remove();
// });
$("#j_tb").on("click", ".get", function () {
$(this).parent().parent().remove();
});
//3. 找到添加按钮,注册点击事件
$("#btnAdd").on("click", function () {
$('<tr> <td>jQuery111</td> <td>111</td> <td><a href="javascrip:;" class="get">DELETE</a></td> </tr>').appendTo("#j_tb");
});
});
</script>3.五星评分案例
<script>
$(function () {
//1. 给li注册鼠标经过事件，让自己和前面所有的兄弟都变成实心
var wjx_k = "☆";
var wjx_s = "★";
$(".comment>li").on("mouseenter", function () {
$(this).text(wjx_s).prevAll().text(wjx_s);
$(this).nextAll().text(wjx_k);
});
//2. 给ul注册鼠标离开时间，让所有的li都变成空心
$(".comment").on("mouseleave", function () {
$(this).children().text(wjx_k);
//再做一件事件，找到current，让current和current前面的变成实心就行。
$("li.current").text(wjx_s).prevAll().text(wjx_s);
});
//3. 给li注册点击事件
$(".comment>li").on("click", function () {
$(this).addClass("current").siblings().removeClass("current");
});
});
</script>4.jq固定导航栏
<script>
$(function () {
$(window).scroll(function () {
//判断卷去的高度超过topPart的高度
//1. 让navBar有固定定位
//2. 让mainPart有一个marginTop
if($(window).scrollTop() >= $(".top").height() ){
$(".nav").addClass("fixed");
$(".main").css("marginTop", $(".nav").height() + 10);
}else {
$(".nav").removeClass("fixed");
$(".main").css("marginTop", 10);
}
});
});
</script>5.返回顶部按钮
<script>
$(function () {
//当页面超出去1000px的时候，让小火箭显示出来,如果小于1000，就让小火箭隐藏
$(window).scroll(function () {
if($(window).scrollTop() >= 1000 ){
$(".actGotop").stop().fadeIn(1000);
}else {
$(".actGotop").stop().fadeOut(1000);
}
});
function getScroll(){
return {
left:window.pageYOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0,
top:window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
}
}
//在外面注册
$(".actGotop").click(function () {
//$("html,body").stop().animate({scrollTop:0},3000);
//scrollTop为0
//$(window).scrollTop(0);
})
});
</script>6.仿钢琴导航条
<script>
$(function () {
//给li注册鼠标进入事件,让li下面的span top：0 播放音乐
$(".nav li").mouseenter(function () {
$(this).children("span").stop().animate({top: 0});
//播放音乐
var idx = $(this).index();
$(".nav audio").get(idx).load();
$(".nav audio").get(idx).play();
}).mouseleave(function () {
$(this).children("span").stop().animate({top: 60});
});
//节流阀 ：按下的时候，触发，如果没弹起，不让触发下一次
//1. 定义一个flag
var flag = true;
//按下1-9这几个数字键，能触发对应的mouseenter事件
$(document).on("keydown", function (e) {
if(flag) {
flag = false;
//获取到按下的键
var code = e.keyCode;
if(code >= 49 && code <= 57){
//触发对应的li的mouseenter事件
$(".nav li").eq(code - 49).mouseenter();
}
}
});
$(document).on("keyup", function (e) {
flag = true;
//获取到按下的键
var code = e.keyCode;
if(code >= 49 && code <= 57){
//触发对应的li的mouseenter事件
$(".nav li").eq(code - 49).mouseleave();
}
});
//弹起的时候，触发mouseleave事件
});
</script>7.jquery.ui实现新闻模块
<script src="jquery-1.12.4.js"></script>
<script src="jquery-ui.js"></script>
<script>
$(function () {
$(".drag-wrapper").draggable({
handle:".drag-bar"
});
$(".sort-item").sortable({
opacity:0.3
});
$(".resize-item").resizable({
handles:"s"
});
});
</script>
1565
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
