jQuery学习笔记(二)
- 文档处理
- 事件
- 滑块验证（滑块案例）
- 遍历 获取 索引
注：所有jQuery的操作都依赖于jQuery库的支持。在写代码之前需要先进行引入!
- 文档处理
声明：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="box">内部插入</div>
<button class="btn">按钮</button>
<button class="btn">按钮</button>
<button class="btn">按钮</button>
<button class="btn">按钮</button>
<span class="sp">1</span>
<span class="sp">2</span>
<script src="js/jquery-1.9.1.js"></script>
代码：
<script>
/*
* 文档处理
*
* jquery创建dom
*内部插入
* */
var ele=$("<span>span</span>");
console.log(ele);
$("#box").append("<span>123</span>");
$("#box").append(ele);
var ele1=$("<span>span1</span>");
console.log(ele1);
ele1.appendTo($("#box"));
//追加到内容之前
$("#box").prepend("abc");
var ele2=$("<span>span2</span>");
$("#box").prepend(ele2);
var ele3=$("<span>span3</span>");
ele3.prependTo($("#box"));
$("#box").append(function (index,html){
console.log(index,html);
return "1111";
});
/*
*外部插入
* */
$("#box").after("123");
//"<span>123</span>".insertAfter($("#box"));
$("<span>123</span>").insertAfter($("#box"));
$("#box").after(function (index){
return "456"
});
$("#box").before($("<h1>123</h1>"))
$("<h1>123</h1>").insertBefore($("#box"));
$("#box").before(function (index){
return $(this);
});
/*
* 包裹
* */
$("#box").wrap("<div></div>");
$("#box").unwrap();
//$(".btn").wrap("<div></div>");
$(".btn").wrapAll("<div></div>");
$(".btn").wrapInner("<span></span>");
$(".btn").replaceWith("<input type='button' class='btn'/>");
$("<button class='btn'></button>").replaceAll($(".btn"));
//清空
$("#box").empty();
$(".btn").eq(2).remove();
//$(".btn").remove();
$(".btn").eq(2).addClass("but");
$(".btn").remove(".but");
$(".sp").eq(1).detach();
console.log($(".sp"));
/*
* 克隆
*
* 默认false 只克隆元素
*
* true 事件处理函数 克隆
* */
$(".sp").eq(0).click(function (){
console.log(1);
});
$(".sp").eq(0).clone(true).appendTo($("body"));
/*
* $(this) this 两者相互转化
* */
</script>
- 事件
声明：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.box{
width: 200px;
height: 200px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="box">
<button id="btn">按钮</button>
</div>
<button class="btn">按钮</button>
<script src="js/jquery-1.9.1.js"></script>
代码：
<script>
/*
* 事件
* dom加载完成
* */
$(document).ready(function (){
console.log("dom准备就绪");
});
/*
* 普通事件
*
* 给事件处理函数传递的参数 在 event.data 属性上
* */
/*$(".box").click("user",function (e){
}).mouseenter(function (){
console.log("进入");
}).mouseleave(function (){
console.log("离开");
});
//事件切换 mouseover mouseout
$(".box").hover(function (){
console.log("悬停");
},function (){
console.log("离开");
});*/
/*
* 事件处理
* */
$(".btn").bind("click",1,function (e){
console.log("点击事件绑定", e.data);
}).bind("mouseover",function (){
console.log("mouseover事件");
}).mouseleave(function (){
//移除事件
//unbind 不带参全部事件移除
//指定事件移除
//$(this).unbind();
$(this).unbind("mouseover");
});
/*
* 绑定事件
* */
/* $(".box").on("click",function (){
console.log("on click");
});*/
/* $(".box").on("click",1,function (e){
console.log("on click", e.data);
});*/
//用on 写事件委托
//off 可以委派移除
//不带参 全部移除
// 也可以过滤移除
$(".box").on("click","#btn",function (e){
console.log("on click", e.delegateTarget,$(this)); //delegateTarget 委派元素
}).on("mouseover",function (){
console.log("悬停");
}).on("mouseleave",function (){
//$(this).off("click","#btn");
$(this).off("mouseover");
});
//one 绑定一次性事件
$(".box").one("mousedown",1,function (e){
console.log("mousedown", e.data);
});
// trigger 触发指定事件
$(window).on("keydown",function (e,a){
console.log("按键", a);
}).trigger("keydown",1);
$(".box").on("user-key",function (e,a){
console.log("自定义事件",a);
}).trigger("user-key",1);
$(".box").click(function (){
console.log("box");
});
$("#btn").click(function (e,a){
console.log("btn",a);
//e.originalEvent.cancelBubble=true;
//return false;
//e.stopPropagation();
}).triggerHandler("click",1);
/*
* 事件参数
* */
$("#btn").click(function (e){
console.log(e);
})
</script>
- 滑块验证
做一个滑块验证案例~
完整代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
position: relative;
width: 400px;
height: 300px;
border: 1px solid #000;
border-radius: 20px;
overflow: hidden;
margin: 0 auto;
}
.rangebtn {
position: absolute;
bottom: 17px;
left: 0;
width: 400px;
height: 16px;
border-radius: 30px;
background-color: #009fff;
box-shadow: 0 0 2px #000;
}
.probg {
position: absolute;
z-index: 5;
left: 0;
top: 0;
height: 16px;
width: 0;
background-color: mistyrose;
border-radius: 30px;
}
.btn {
position: absolute;
z-index: 9;
left: 0;
top: -3px;
width: 22px;
height: 22px;
border-radius: 50%;
background-color: #005499;
}
</style>
</head>
<body>
<div class="box">
<canvas id="canvas"></canvas>
<div class="rangebtn">
<div class="probg"></div>
<div class="btn"></div>
</div>
</div>
<script src="js/jquery-1.9.1.js"></script>
<script>
$(function () {
var can = $("#canvas");
var progress = $(".rangebtn");
var progressbtn = $(".btn");
var progressbg = $(".probg");
var posleft, pos;
var canobj = can[0];
canobj.width = 400;
canobj.height = 250;
var pos_x, pos_y, startX;
var context = canobj.getContext("2d");
context.save();
var image = new Image();
image.onload = function () {
context.drawImage(this, 0, 0, 400, 250);
pos_x = Math.random() * 150 + 200;
pos_y = Math.random() * 150 + 50;
pos = new pos_obj(pos_x, pos_y, this, "right");
pos.draw();
startX = 10;
posleft = new pos_obj(startX, pos_y, this, "left");
posleft.draw();
}
image.onerror = function () {
console.log("图片加载失败");
}
image.src = "./img/2.jpg";
//创建位置框的对象
function pos_obj(x, y, img, res) {
this.x = x;
this.y = y;
this.w = 50;
this.h = 50;
this.bg = "#fff";
this.r = 10;
this.sg = "red";
this.img = img;
this.res = res;
this.draw = function () {
context.setTransform(1, 0, 0, 1, 0, 0);
context.beginPath();
context.fillStyle = this.bg;
context.strokeStyle = this.sg;
context.moveTo(this.x, this.y);
context.lineTo(this.x + (this.w / 2 - this.r), this.y);
context.arcTo(this.x + this.w / 2, this.y - this.r * 2, this.x + this.w / 2 + this.r, this.y, this.r);
context.lineTo(this.x + this.w / 2 + this.r, this.y);
context.lineTo(this.x + this.w, this.y);
context.lineTo(this.x + this.w, this.y + this.h);
context.lineTo(this.x + this.w / 2 + this.r, this.y + this.h);
context.arcTo(this.x + this.w / 2, this.y + this.h + this.r * 2, this.x + (this.w / 2 - this.r), this.y + this.h, this.r);
context.lineTo(this.x + (this.w / 2 - this.r), this.y + this.h);
context.lineTo(this.x, this.y + this.h);
context.lineTo(this.x, this.y + this.h / 2 + this.r);
context.arcTo(this.x - this.r * 3, this.y + this.h / 2, this.x, this.y + this.h / 2 - this.r, this.r);
context.lineTo(this.x, this.y + this.h / 2 - this.r);
context.lineTo(this.x, this.y);
if (this.res == "right") {
context.fill();
} else {
context.translate(-(pos_x - this.x), 0);
context.clip();
context.drawImage(this.img, 0, 0, 400, 250);
}
context.stroke();
context.closePath();
};
}
//记录初始x坐标偏移
var x_offset;
progressbtn.mousedown(function (e) {
x_offset = e.offsetX;
$(window).on("mousemove", winmove).on("mouseup", winup);
e.preventDefault();
});
function winmove(e) {
var c_x = e.clientX - progress.offset().left - x_offset;
c_x = c_x <= 0 ? 0 : c_x >= 378 ? 378 : c_x;
progressbtn.css({
left: c_x + "px"
});
progressbg.css({
width: (c_x + 10) + "px"
});
//
context.restore();
context.clearRect(0, 0, 400, 250);
context.save();
context.drawImage(image, 0, 0, 400, 250);
pos.draw();
posleft.x = c_x + 10;
posleft.draw();
}
function winup() {
$(this).off();
//检测
if(posleft.x>=pos.x-3&&posleft.x<=pos.x+3)
{
console.log("success");
}
}
});
</script>
</body>
</html>
- 遍历 获取 索引
声明：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<button>按钮</button>
<script src="js/jquery-1.9.1.js"></script>
代码：
<script>
$("ul>li").each(function (index) { //index 元素索引
console.log($(this), index);
});
/*
* 获取到原始的选择器 selector
* */
console.log($("ul>li").selector);
console.log($("ul>li").context);//document
//jquery 对象 第二个参数不写 context document
//第二个参数 是前面匹配器的父元素 并且是原生js对象
console.log($("li", document.body).context);
console.log($("li", $("ul")[0]).context);
//通过索引获取元素
console.log($("ul>li").get(1)); //eq
//index() 方法不加参数 获取当前元素的索引 集合默认获取第一个
console.log($("ul>li").eq(1).index());
console.log($("ul>li").index($("ul>li").eq(3)));
console.log($("ul>li").index($("ul>li").eq(2)[0]));
$("button").data("key-v","123");
console.log($("button").data("key-v"));
$("button").removeData("key-v");
console.log($("button").data("key-v"));
/*
* 扩展
* */
console.log(jQuery);
$.extend({
isNumber:function (){
console.log("检测是否是数字",this);
},
isArrayTo:function (){
}
});
//$.extend 扩展的方法 使用 直接$点
$.isNumber();
/*
* 扩展到jquery上
* */
$.fn.extend({
myMap:function (){
console.log(this);
}
});
$("ul>li").myMap();
/*
* 合并对象
* */
var a={
a:1,
b:2,
d:5
}
var b={
a:2,
b:3,
c:4
}
console.log(Object.assign({}, a, b));
console.log($.extend({}, a, b));
/*
* $里面的方法
* */
$.each($("ul>li"),function (index){
console.log(index);
});
$.each([1,2,3,4],function (index,val){
console.log(index,val);
});
/*
* 类数组 转化为数组
* */
console.log($("li"));
console.log($.makeArray($("li")));
console.log($.map($("li"), function (ele, index) {
return ele;
}));
//数组里面查找
console.log($.inArray(5, [1, 2, 3])); //找到 返回索引 没有返回-1
console.log($.inArray($("li").eq(1)[0], $("li")));
console.log($("li").toArray()); //沾化数组
var obj={
a:function (){
console.log(1);
}
}
/* $("ul").click($.proxy(obj.a,obj));*/
function bok(){
console.log(12);
}
$("ul").click($.proxy(window.b,window));
console.log($.proxy(obj.a,obj));
console.log($.isArray(1)); //检测是否是数组
console.log($.isFunction(bok)); //检测是否是函数
console.log($.isEmptyObject({}));
console.log($.isEmptyObject(obj));
console.log($.trim(" a b c d ").length);
console.log(" a b c d ".trim().length);
</script>
扫一扫
672
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
