JQ创建一个节点对象:
var JQ新节点对象=$("<标签名></标签名>");
$("父元素").html("<标签名>内容</标签名>");
为父元素设置内部的内容
如果内容包含标签 则会直接渲染到页面上
父元素拼接子节点对象:
父元素.append(新节点对象); 拼接到最后
新节点对象.appendTo(父元素);
父节点.prepend(新节点对象) 将新节点拼接到 父元素第一位的位置
新节点对象.prependTo(父节点) 也是拼接到第一个
在指定节点之后插入
节点对象.after(新节点)
在指定节点之前插入
节点对象.before(新节点)
html()方法 就跟原生js的innerHTML是一样的效果
text()方法 就跟原生js的innerText是一样的效果
元素.html("内容") 设置内容
元素.html() 获取内部内容
var index=0;
$("button").click(function () {
// console.log($("<h1>我是新的h1</h1>"));
// $("#box").append($("<h1>我是新的h1</h1>"))
// $("#box").html("<h3>我是新来的h3</h3>")
// $("<h2>我是新节点对象</h2>").appendTo($("#box"));
// $("#box").prepend($("<p>我是新来的p元素"+(++index)+"</p>"))
// $("<p>我是新来的p元素"+(++index)+"</p>").prependTo($("#box"))
// $(".inner").after($("<p>我是新来的p元素"+(++index)+"</p>"))
$(".inner").before($("<p>我是新来的p元素"+(++index)+"</p>"))
})
删除元素本身(自杀):
元素.remove()
$("button").eq(0).click(function () {
// 删除元素用的是自杀
$("#box>ul").remove();
})
清空元素内部所有内容
元素.empty()
元素.html("")
$("button").eq(1).click(function () {
//清空元素指的是 把内部所有的内容清空 不包括 本身
// $("#box").empty();
// $("#box").html("");
})
替换元素 (把匹配到的老元素 都替换成新元素)
新元素.replaceAll($(老元素的选择器))
$("button").eq(2).click(function () {
$("<h1>我是新来的</h1>").replaceAll($("#box"))
})
克隆元素:
元素.clone(布尔值) 默认就是深层克隆
布尔值只是控制事件是否被克隆(经过测试不好用)
$("button").eq(3).click(function () {
// $("#box").append($("ul").clone());
// $("#box").append($("ul").clone(false));
})
自动补全$() 和字符串方法
$("button").eq(4).click(function () {
// $("#box").append($("<h1>我是新来的h1</h1>"))
// $("#box").append("<h1>我是新来的h1</h1>");
// 将内部的字符串直接拼接到页面上
// $("#box").append("哈哈");
//append prepend 都是可以操作字符串
// "<h1>我是新来的h1</h1>".appendTo($("#box"))
//字符串对象没有appendTo方法 prependTo
})
input框对象.val() 就是获取输入框内容
var course=$("#course").val();
var school=$("#school").val();
标签属性操作: attr方法
对象.attr("标签属性名") 获取属性值
$("button").eq(0).click(function () {
console.log($("#box").attr("class"));
console.log($("input").attr("name"));
console.log($("input").attr("value"));
console.log($("input").attr("placeholder"));
console.log($("input").val());
})
对象.attr("属性名","属性值"); 设置属性值
$("button").eq(1).click(function () {
$("#box").attr("class","haha");
// $("input").attr("value","看我干嘛")
// $("input").val("val方法改的")
$("input").attr("type","checkbox")
})
对象.removeAttr("属性名") 移除整个属性
$("button").eq(2).click(function () {
// 移除属性
// $("#box").removeAttr("class");
// $("input").removeAttr("type");
})
有三个特殊的属性是不能通过attr操作
如果硬要操作 可能效果不是你想要的
disabled checked selected
checked属性 如果用attr操作 只会生效一次 后面都不生效
selected
以上三个属性 以后 记得 就要用prop来操作!!!!!!
对象.prop("属性名",布尔值) 设置状态
对象.prop("属性名") 获取当前状态
$("button").eq(3).click(function () {
//增加特殊属性
// $("#inp").attr("disabled",true);
// $("#cb").attr("checked",true);
$("#cb").prop("checked",true)
})
val方法 就是原生js的value属性
专门获取输入框的输入的内容
不传参数就是获取内容
传入参数 设置内容
text() 对应原生js的innerText属性
不传参数表示获取内部所有标签内的文本内容(不包括标签本身)
如果传入字符串参数 表示设置新内容 (如果字符串内有标签 那么也不会渲染标签)
html() 对应原生js的innerHTML属性
不传参数表示回去内部所有的内容(包含标签本身)
如果传入字符串参数 表示设置新内容(如果字符串内有标签 那么会渲染到页面上)
$("button").eq(0).click(function () {
// console.log($("input").val());
// console.log($("#box").text());
console.log($("#box").html());
})
$("button").eq(1).click(function () {
// $("input").val("我是新设置的输入内容")
// $("#box").text("我是普普通通的字符串内容")
// $("#box").text("<h1>我是普普通通的字符串内容</h1>")
$("#box").html("<h1>我是普普通通的字符串内容</h1>")
})
键盘事件 event.keyCode==按键编码
$(document).keydown(function (event) {
console.log(event.keyCode);
if(event.keyCode===81){
$("#box").css("background","pink").html("<p>粉色</p><p>你按了Q键</p>");
}
if(event.keyCode===87){
$("#box").css("background","red").html("<p>红色</p><p>你按了W键</p>");
}
if(event.keyCode===69){
$("#box").css("background","green").html("<p>绿色</p><p>你按了E键</p>");
}
if(event.keyCode===82){
$("#box").css("background","#4a20ff").html("<p>蓝色</p><p>你按了R键</p>");
}
});
$(document).keyup(function (event) {
$("#box").css("background","#ffffff").html("<p>无颜色</p><p>你没按键</p>");
})
事件触发:
不操作该元素的该事件 而是通过其他方式去触发这个事件的驱动代码的执行
例如: 不去点击盒子 却通过其他方式 执行 盒子点击时 应该执行的代码
JQ事件触发有三种方式:
1.元素.click() 触发该元素的点击事件代码
会有浏览器的默认行为
2.元素.trigger("事件名称") 手动触发元素的指定事件
触发事件代码的同时 也触发浏览器的默认行为
比如输入框的focus事件 被触发后 也会有光标闪烁
3.元素.triggerHandler("事件名称")
触发事件代码的同时 不会触发浏览器默认行为
比如 输入框的获取焦点事件被触发 但是没有光标闪烁
$("button").click(function () {
alert("我是按钮的点击事件代码")
// $("#box").click(); //触发box点击事件的代码
// $("#pox").click()
// $("#box").trigger("click");
// $("#box").trigger("contextmenu");
// 触发 输入框的获取焦点事件
// $("#inp").trigger("focus");
// $("#inp").triggerHandler("focus");
$("#inp").focus();
})
/*$("#box").click(function () {
alert("我是box的点击事件代码")
})
$("#pox").click(function () {
alert("我是pox,你点我干嘛?")
})*/
/*$("#box").contextmenu(function () {
alert("box点击右键了")
});*/
// 输入框获取焦点的那一刻事件
$("#inp").focus(function () {
console.log("输入框获取焦点的是事件代码");
})
链式编程:
一般适用于 不停的 为对象设置不同属性
方法返回this 当前方法返回的this 一定是成功设置该属性的this
然后接受到返回值以后 可以继续往下调用
var per={
setName:function (name) {
this.name=name;
return this;
},
setAge:function (age) {
this.age=age;
return this;
},
setLocation:function (location) {
this.location=location;
return this;
},
getName:function () {
return this.name;
}
}
per.setName("小强").setAge(16).setLocation("文化大厦");
JQ的each方法和隐藏迭代
JQ的操作本身就是已操作 一大把 可以一次选择多个元素统一操作
但是某些时候 我们可能要针对每个元素做不同的设置
但是JQ已经内置了 隐式迭代
隐式迭代: 内部自动帮我们遍历 每一个元素 进行统一设置
$("选择器").each(function(index,element){
})
这里面 each方法 执行几次 完全取决于选择器关联了几个元素
element是原生js对象 如果要操作JQ的方法 记得转换!!!!
$("div").each(function (index,element) {
// console.log(index,element);
$(element).css("opacity",index/10)
})
插件
下载插件时要自己读教程
JQ自定义插件
JQ已经内置了 扩展插件的功能
$.fn.方法名=function(){
}
此功能表示给全局 页面所有的JQ对象 绑定一个方法
自定义插件的方法 里面的this 表示 当前调用该方法的盒子
对象默认是JQ对象
自定义插件
$.fn.setColor=function (color) {
// console.log(this);
this.css("background-color",color);
}
使用插件
$("button").click(function () {
// $("#box").setColor("red");
$("#box").setColor("blue");
})
JQ的事件绑定 三种方式(不包括bind绑定 bind绑定被替代 所以不讲)
第一种: 传统绑定方式:
元素.click(驱动函数)
没有层叠覆盖问题
第二种:
元素.delegate()
特点:性能高,支持动态创建的元素
// 第一个参数:selector,要绑定事件的元素(一定是当前调用delegate方法的那个元素的后代元素)
// 第二个参数:事件类型 不带on的事件名称
// 第三个参数:事件处理函数
第二个参数里面可以一次绑定多个事件 多个事件名称用空格隔开
delegate自带事件委托 新创建的元素也会有老事件
$("button").eq(0).click(function () {
// 通过父元素来操作
/*$("body").delegate("#box","click",function () {
alert("盒子能点击了!!")
})*/
// 还可以一次绑定多个事件 用空格隔开
/*$("body").delegate("#box","click mouseenter",function () {
alert("盒子事件触发了")
})*/
$("body").delegate("#box","click mouseenter",function (event) {
console.log("当前事件类型是:"+event.type);//通过type来区分是哪一个事件触发了
})
})
第三种: 最流行 最时尚 最常用的 绑定方式: on
jQuery1.7版本后,jQuery用on统一了所有的事件处理的方法
参数:
第一个参数: 不到on的事件名称
第二个参数: 子元素的选择器(要添加事件的那个元素)
第三个参数: data对象数据 可以通过外部传入事件内部
第四个参数: 事件驱动函数
第三个参数是 能够在绑定事件时传入的一个数据对象
可以能够让事件内部使用该对象的数据(用的不多)
on绑定事件也可以一次绑定多个事件 用空格隔开
on同样也实现了事件委托
var per={
name:"小强强",
age:116,
length:15,
location:"文化大厦"
}
$("button").eq(0).click(function () {
/*$("body").on("click","#box",function () {
alert("盒子的点击事件")
})*/
/* $("body").on("click","#box",per,function () {
alert("盒子的点击事件")
console.log(per);
})*/
/*$("body").on("click contextmenu","#box",per,function () {
alert("盒子的点击事件")
console.log(per);
})*/
$("ul").on("click","li",function () {
alert("我是li的点击事件")
})
})
$("button").eq(1).click(function () {
$("ul").append("<li>我是新来的li</li>")
})
JQ中的事件解绑有:
unBind 解绑 bind绑定的事件--->这个不用
undelegate 解绑 delegate绑定的事件
父元素.undelegate("子元素选择器","不带on的事件名称")
$("button").eq(0).click(function () {
// 绑定事件
$("body").delegate("#box","click",function () {
alert("盒子的事件被触发了")
})
})
$("button").eq(1).click(function () {
// 解绑事件
$("body").undelegate("#box","click"); //解绑delegate绑定的事件
})
off 解绑 on绑定的事件
元素.click()绑定的事件 用off解绑
$("button").eq(0).click(function () {
// 绑定事件
$("body").on("#box","click",function () {
alert("盒子的事件被触发了")
})
//或者
/* $("#box").on("click","",function () {
alert("盒子的事件")
})*/
})
$("button").eq(1).click(function () {
// 解绑事件
$("body").off("#box","click"); //解绑delegate绑定的事件
// $("#box").off("click");
})
补充:
如果不想扯父元素 就给当前元素绑定事件
那么用on可以使用
元素本身.on("不带on的事件名称","",数据对象,驱动函数)
选择器空字符串 表示给自己绑定事件
undeletegate和off 如果方法不传参数 则表示解绑所有事件
传入事件名称 表示解绑指定事件
注意:
如果是通过父子元素的方式绑定的事件
那么解绑时 要操作父元素解绑事件才行
如果:
父元素.on("click","子元素选择器")
那么
父元素.off("子元素选择器","click")
才行
多库共存
有些时候 我们可能需要 两个版本的jQuery都用
比如 大部分功能使用1.X版本 为了兼容到IE6
但是其中一两个方法 是2.X版本才有的 所以2.X版本也要引入使用
这时候 就要用到多库共存的方式使用
$("button").click(function () {
// 获取当前jQuery对象的版本号
/* console.log($.fn.jquery);//1.11.1
console.log(jQuery.fn.jquery);//1.11.1*/
/*
因为同时引入两个版本的jQuery 而且 jQuery用的都是$和jQuery这两个对象
所以版本号使用的是第二个 把第一个覆盖掉了
console.log($.fn.jquery);//2.1.4
console.log(jQuery.fn.jquery);//2.1.4*/
//让当前$对象 放弃 现在所使用的版本
/* $.noConflict();
console.log($.fn.jquery)//1.11.1
console.log(jQuery.fn.jquery);//2.1.4*/
//以后想使用 1.X 就用$对象
//想使用2.X 就使用jQuery对象
/* var $q=$.noConflict();//$放弃当前版本 那么 当前版本是3.X 也就是$变成了2.X
//onConflict方法表示 让当前对象放弃这个版本 并返回被放弃的版本
console.log($.fn.jquery);//2.X
console.log(jQuery.fn.jquery);//3.X
console.log($q.fn.jquery);//3.X*/
//如果noConflict() 方法内部传入false或者不传 表示 只让当前的$对象放弃版本
//jQuery对象 不放弃
//如果传入true表示 $和jQuery对象一起都放弃当前版本 也就是都回到次一级的版本
/* var $q=$.noConflict(true);
console.log($.fn.jquery);//2.X
console.log(jQuery.fn.jquery);//2.X
console.log($q.fn.jquery);//3.X*/
var $q=$.noConflict(true);
var ww= $.noConflict(true);//jQuery放弃当前版本 因为它是之前被$拉下水的对象
console.log($.fn.jquery);//1.x
console.log(ww.fn.jquery);//2.x
console.log(jQuery.fn.jquery);//1.x
console.log($q.fn.jquery);//3.X
// 补充: 所谓放弃版本 是指 从当前script:src的引入顺序 最后往上放弃一个
//并不是版本号大小的方法
})
JQ关于元素尺寸有两个方法:
width() height()方法
获取元素自身的宽高 不包括任何的padding和border还有margin
坐标的操作:
offset()方法
如果不传参数表示获取 返回的是一个对象 有left和top属性
不管父盒子有没有定位 都按照body去算距离
如果传参数表示设置偏移值
心累的总结:
无论offset方法是获取还是设置 都是按照 body去计算
如果没有定位默认分配relative
position方法 只能获取 不能设置
获取的是当前元素设置的那个left和top值
和什么破偏移没半毛钱关系
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box{
width: 200px;
height: 200px;
background-color: hotpink;
border: 1px solid #000;
padding: 30px;
/*margin: 50px;*/
position: absolute;
}
#pox{
width: 400px;
height: 400px;
background-color: red;
position: absolute;
left: 735px;
}
</style>
</head>
<body>
<button>设置坐标值</button>
<div id="pox">
<div id="box"></div>
</div>
<script src="jquery-1.11.1.js"></script>
<script>
$("#box").click(function () {
// console.log($(this).width(),$(this).height());
// console.log($(this).offset());
console.log($(this).position());
})
$("button").eq(0).click(function () {
$("#box").offset({
left:78
})
})
</script>
</body>
</html>
JQ的缓存方法是data
// 给指定对象绑定 缓存数据
$("#box").data("name","小砌墙");
//从指定对象中取出缓存数据
console.log($("#box").data("name"));
// 给哪个对象绑定的缓存数据 就从哪个对象取出来 其他对象无法获取
console.log($("#pox").data("name"));