笔记
参考资料：http://jquery.cuishifeng.cn/index.html
jQuery
模块 == 类库
版本1.x (推荐1.12) 2.x 3.x
下载地址：http://jquery.com/
基础语法是：$(selector).action()
jQuery 或者 $
转换
jQuery对象[0] => Dom对象
Dom对象 => $(Dom对象)
DOM、BOM、Javascript的类库
1.查找元素
选择器：直接找到某个或者某类标签
1.id $("#id")
2.class $(".class")
3.tag $("tag")
4.组合选择 $("tag, .class, #id")
5.层级
$("#id tag") 子子孙孙
$("#id>tag") 孩子
筛选器
:first
:last
:even
:odd
:eq() 索引
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil()
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil()
$("#id").parent()
$("#id").parents()
$("#id").parentUntil()
$("#id").children()
$("#id").siblings()
$("#id").find()
属性
$("[class]") 具有class属性的所有标签
$("[class='c1']") 属性=c1的标签
实例
多选， 反选， 全选
选择属性
$("#tb:checkbox").prop("checked"); 获取值
$("#tb:checkbox").prop("checked", false); 设置值
jquery方法内置循环
$("#tb:checkbox").xxx
$("#tb:checkbox").each(function(index){
index 当前索引
this dom对象，当前循环的元素
$(this) jquery对象
})
三元运算符
var ret = 条件？ 真值： 假值
2.操作元素
文本操作
$().text() #获取文本内容
$().text("") # 设置文本内容
$().html() #获取内容
$().html("") # 设置内容
$().val() 获取值
$().val("") 设置值
样式操作
addClass()
removeClass()
toggleClass()
属性操作
$().attr() # 专门用于自定义操作
$().removeAttr()
$().prop("checked", true) # 专门用于checkbox, radio
index() 获取索引
eq() 筛选索引
文档处理
append()
prepend()
after()
before()
remove()
empty()
clone()
css处理
$().css("样式", "值")
点赞：
$().append()
$().remove()
setInterval()
opacity 1 --> 0
position
fontSize
top left right
位置：
scrollTop() # 获取滚动条值
scrollLeft()
$(window).scrollTop(0) # 设置值 返回顶部
offset 指定标签在html中的坐标
offset().left
offset().top
position() 指定标签相对父标签（relative）标签的坐标
尺寸
height([val|fn]) 获取标签的纯高度
width([val|fn])
innerHeight()
innerWidth()
outerHeight([options])
outerWidth([options])
事件绑定
Dom三种绑定方式
$().click(function)
$().bind("click", function)
$().unbind("click", function)
$().delegate("a", "click", function)
$().undelegate("a", "click", function)
$().on("click", function)
$().off("click", function)
阻止事件发生
return false
当页面框架加载完毕函数自动执行
为了防止文档在完全加载（就绪）之前运行 jQuery 代码
$(document).ready(function(){});
$(function(){});
$().click(function(){})
jquery扩展
$.extend $.method()
$.fn.extend $().method()
写扩展时，使用自执行函数，避免变量冲突
(function(){
var status = 1;
//
})(jQuery);
作业：
编辑框 input
tab菜单-索引
.pg-body{
width: 700px;
height:200px;
margin:0 auto;
border:1px solid #9d9d9d;
}
.menu{
height:36px;
line-height: 36px;
background-color: rgba(179, 179, 179, 0.96);
}
.menu .menu-item{
float:left;
border-right: 1px solid red;
padding:0 10px;
cursor: pointer; /*小手*/
}
.menu .active{
background-color: #e4393c;
}
.hide{
display:none;
}
菜单一
菜单二
菜单三
内容1
内容2
内容3
$(".menu-item").click(function () {
// 点击菜单颜色变化
$(this).addClass("active").siblings().removeClass("active");
//找到对应内容
var n = $(this).index(); //索引
console.log(n);
$(".content").children().eq(n).removeClass("hide").siblings().addClass("hide");
})
tab菜单-自定义属性
.pg-body{
width: 700px;
height:200px;
margin:0 auto;
border:1px solid #9d9d9d;
}
.menu{
height:36px;
line-height: 36px;
background-color: rgba(179, 179, 179, 0.96);
}
.menu .menu-item{
float:left;
border-right: 1px solid red;
padding:0 10px;
cursor: pointer; /*小手*/
}
.menu .active{
background-color: #e4393c;
}
.hide{
display:none;
}
菜单一
菜单二
菜单三
内容1
内容2
内容3
$(".menu-item").click(function () {
// 点击菜单颜色变化
$(this).addClass("active").siblings().removeClass("active");
//找到对应内容
var menuId = $(this).attr("menu-id");
var filter = "[content-id='"+ menuId+"']";
$(".content").children(filter).removeClass("hide").siblings().addClass("hide");
})
一般而言，自定义事件优先级高于标签自带事件 input chechbox 例外
事件优先级
baidu
baidu
function showMe(){
alert("123");
return false; //阻止链接跳转
}
$("#i1").click(function(){
alert("456");
return false; //阻止链接跳转
});
事件绑定
div{
width: 100px;
height:36px;
line-height: 36px;
text-align:center;
background-color: #0d3ea2;
color: white;
cursor:pointer;
border-bottom:1px solid red;
}
一个标签1
一个标签2
一个标签3
一个标签4
一个标签5
一个标签6
一个标签7
//方式一
$("#i1").click(function () {
alert("i1");
});
//方式二
function myAlert(){
alert($(this).attr("id"));
}
$("#i2").bind("click", myAlert);
$("#i3").bind("click", myAlert);
$("#i3").unbind("click", myAlert);
//方式三
$("#i4").delegate("a", "click", myAlert);
// 方式四
$("#i6").on("click", myAlert);
$("#i7").on("click", myAlert);
$("#i7").off("click", myAlert);
位置尺寸
body{
height:1000px;
}
.gotoTop{
position: fixed;
right:0;
bottom: 0;
width: 100px;
height: 36px;
line-height: 36px;
background-color: #9d9d9d;
color:white;
text-align: center;
cursor: pointer;
}
.box{
width: 400px;
height: 300px;
background-color: #2459a2;
border:1px solid red;
}
返回顶部
// 滚动条，回到顶部
$(".gotoTop").click(function () {
$(window).scrollTop(0);
});
//偏移量
var off = $(".gotoTop").offset();
console.log(off);
console.log(off.top);
console.log(off.left);
//坐标
var pos = $(".gotoTop").position();
console.log(pos);
//尺寸
console.log("height：" + $(".box").height());
console.log("width：" + $(".box").width());
console.log("innerHeight：" + $(".box").innerHeight());
console.log("innerWidth：" + $(".box").innerWidth());
console.log("outerHeight：" + $(".box").outerHeight());
console.log("outerWidth：" + $(".box").outerWidth());
// height：300
// width：400
// innerHeight：300
// innerWidth：400
// outerHeight：302
// outerWidth：402
全选取消反选
选择
ip
port
0.0.0.1
3306
0.0.0.1
3306
0.0.0.1
3306
0.0.0.1
3306
function checkAll(){
$(":checkbox").prop("checked", true);
}
function reverseAll() {
// 通过Dom对象方式
// $(":checkbox").each(function() {
// if(this.checked){
// this.checked=false;
// } else{
// this.checked=true;
// }
// })
// 通过jquery对象方式
// $(":checkbox").each(function () {
// if($(this).prop("checked")){
// $(this).prop("checked", false);
// } else{
// $(this).prop("checked", true);
// }
// })
// 通过三元运算
$(":checkbox").each(function () {
var ret = $(this).prop("checked")? false: true;
$(this).prop("checked", ret);
})
}
function cancelAll() {
$(":checkbox").prop("checked", false);
}
侧边菜单
.menu{
width:200px;
}
.header{
height: 40px;
background-color: #0d3ea2;
color:white;
line-height: 40px;
text-align: center;
font-weight: bold;
}
.content div{
height: 36px;
line-height: 36px;
text-align: center;
background-color: #dddddd;
}
.hide{
display:none;
}
菜单2
内容1
内容2
内容3
菜单1
内容1
内容2
内容3
菜单3
内容1
内容2
内容3
菜单4
内容1
内容2
内容3
// 思路：
// 为每个标题栏绑定事件
// 当前点击的标签$(this)
// 获取下一个标签，展开
// 获取父级标签
// 获取所有兄弟标签
// 添加和移除样式
// 筛选器
// $(this).next() 下一个
// $(this).prev() 上一个
// $(this).parent() 父
// $(this).children() 孩子
// $(this).siblings() 兄弟
// $(this).find() 子子孙孙
// 添加删除类
// $(this).addClass()
// $(this).removeClass()
// 绑定事件
// 链式编程
$(".header").click(function () {
$(this).next().removeClass("hide");
$(this).parent().siblings().find(".content").addClass("hide");
})
委托绑定事件
标签1
标签2
标签3
标签4
标签5
$(document).ready(function () {
//添加列表元素
$(":button").click(function () {
var v = $(":text").val();
var tag = document.createElement("li");
tag.innerText = v;
$("ul").append(tag);
});
//后面主动添加的元素也有点击事件
$("ul").delegate("li", "click", function () {
alert($(this).text());
});
}
)
开关操作
.hide{
display: none;
}
文字
$("#toggle").click(function () {
$(".c1").toggleClass("hide");
// 相当于：
// if($(".c1").hasClass("hide")){
// $(".c1").removeClass("hide");
// } else{
// $(".c1").addClass("hide");
// }
})
扩展jquery
//扩展方法：
$.extend({
"myFunc": function () {
alert("my function")
}
});
// $.myFunc();
//扩展方法二：
$.fn.extend({
"myFoo": function () {
alert("my foo")
}
});
$().myFoo();
模态框
.hide{
display:none;
}
/*遮罩层*/
.shadow{
position: fixed;
top:0;
left:0;
bottom:0;
right:0;
background-color: #333333;
opacity: 0.6;
z-index: 9;
}
/*模态框*/
.mode{
position: fixed;
width:500px;
height:400px;
top:50%;
left:50%;
margin-top: -200px;
margin-left:-250px;
z-index: 10;
background-color:#ffffff;
}
序号ipport操作
10.0.0.13301
编辑 | 删除
20.0.0.23302
编辑 | 删除
30.0.0.33303
编辑 | 删除
40.0.0.43304
编辑 | 删除
50.0.0.53305
编辑 | 删除
60.0.0.63306
编辑 | 删除
function showMode() {
$(".shadow").removeClass("hide");
}
function hideMode() {
$(".shadow").addClass("hide");
$(".mode input[type='text']").val("");
}
$(".edit").click(function () {
showMode();
// 获取本行的内容
var tds = $(this).parent().prevAll();
var hostname = $(tds[1]).text();
var port = $(tds[0]).text();
$(".mode input[name='hostname']").val(hostname);
$(".mode input[name='port']").val(port);
})
模态框
.hide{
display:none;
}
/*遮罩层*/
.shadow{
position: fixed;
top:0;
left:0;
bottom:0;
right:0;
background-color: #333333;
opacity: 0.6;
z-index: 9;
}
/*模态框*/
.mode{
position: fixed;
width:400px;
height:300px;
top:50%;
left:50%;
margin-top: -200px;
margin-left:-200px;
z-index: 10;
background-color:#ffffff;
text-align: center;
}
序号ipport密码操作
1
0.0.0.1
3301
123451
编辑 | 删除
2
0.0.0.2
3302
123452
编辑 | 删除
3
0.0.0.3
3303
123453
编辑 | 删除
4
0.0.0.4
3304
123454
编辑 | 删除
5
0.0.0.5
3305
123455
编辑 | 删除
6
0.0.0.6
3306
123456
编辑 | 删除
主机名：
端口号：
密 码：
function showMode() {
$(".shadow").removeClass("hide");
}
function hideMode() {
$(".shadow").addClass("hide");
$(".mode input[type='text']").val("");
}
function confirm() {
//创建行
var tr = document.createElement("tr");
//行号
var td = document.createElement("td");
td.innerText= "x";
$(tr).append(td);
$(".mode input[type='text']").each(function () {
var td = document.createElement("td");
td.innerText= $(this).val();
$(tr).append(td);
console.log(td);
});
$("#tb").append(tr);
hideMode();
}
$(".del").click(function () {
$(this).parent().parent().remove();
});
$(".edit").click(function () {
showMode();
// 获取本行的内容
var tds = $(this).parent().prevAll();
tds.each(function(){
// 获取属性值
var target = $(this).attr("target");
// 获取内容
var text = $(this).text();
$(".mode input[name="+ target +"]").val(text);
})
})
添加删除元素
1
2
3
$("input[name='add']").click(function () {
var value = $("input[name='inputBox']").val();
var html = "" + value +" ";
$("ul").append(html);
});
$("input[name='remove']").click(function () {
var index = $("input[name='inputBox']").val();
$("ul").children().eq(index).remove();
});
$("input[name='empty']").click(function () {
var index = $("input[name='inputBox']").val();
$("ul").children().eq(index).empty();
});
$("input[name='clone']").click(function () {
var index = $("input[name='inputBox']").val();
var tag = $("ul").children().eq(index).clone();
$("ul").append(tag);
})
点赞效果
.container{
width:700px;
margin: 0 auto;
border: 1px solid #9d9d9d;
}
.item{
position: relative;
height: 100px;
width:30px;
margin-left: 20px;
line-height: 100px;
}
赞
$(".item").click(function () {
addFavor(this);
console.log(this);
});
function addFavor(self) {
//Dom对象
var fontSize = 15;
var top = 0;
var right = 0;
var opacity = 1;
var tag = document.createElement("span");
// 设置css属性
$(tag).text("+1");
$(tag).css("color", "green");
$(tag).css("position", "absolute");
$(tag).css("fontSize", fontSize + "px");
$(tag).css("right", right + "px");
$(tag).css("top", top + "px");
$(tag).css("opacity", opacity); //透明度
$(self).append(tag);
//动态效果
var obj = setInterval(function () {
fontSize = fontSize + 10;
top = top -10;
right = right - 10;
opacity = opacity - 0.1;
$(tag).css("fontSize", fontSize + "px");
$(tag).css("right", right + "px");
$(tag).css("top", top + "px");
$(tag).css("opacity", opacity);
// 移除标签
if(opacity < 0){
clearInterval(obj);
$(tag).remove();
}
}, 50);
}
编辑框
序号
ip
port
1
10.0.0.1
3301
2
10.0.0.2
3302
3
10.0.0.3
3303
$(document).ready(function(){
// 编辑模式
$(".edit").click(function(){
$(this).attr("disabled", true); //编辑不可用
$("#tb").find("td").each(function(){
var v = $(this).text();
$(this).text(""); //清空文本
var input = document.createElement("input");
$(input).attr("type", "text").val(v);
$(this).append(input);
})
})
// 保存
$(".confirm").click(function(){
$(".edit").removeAttr("disabled"); //编辑可用
console.log($(".edit")[0]);
$("#tb").find("td").each(function(){
var v = $(this).children().val()
$(this).children().remove();
$(this).text(v);
})
})
})
表单验证
.error{
color:red;
}
form div{
line-height: 36px;
}
$(":submit").click(function(){
$(".error").remove(); //清空验证
var flag = true; //作为全局标记
console.log(this);
$("#f1").find("input[type='text'],input[type='password']").each(function () {
var v = $(this).val();
console.log(v);
if(v.length
关注
打赏
![]()
1688896170
查看更多评论
