JQuery
jQuery是一个快速、简洁的轻量级JavaScript框架,封装JavaScript常用的功能代码
jQuery的使用
要使用jQuery需要加入对应js包,1.x和2.x版本不再更新
jquery-3.3.1.js
在HTML还需要引入jquery
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<head>
<meta charset="UTF-8">
<title>js入门</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
window.onload=function(){//js加载方式
alert("js");
}
//页面加载函数,页面加载完毕后执行
$(function(){//jQuery加载方式——ready事件的简写
alert("jQuery1")
}
//或者
jQuery(document).ready(//jQuery加载方式——ready事件
function(){
alert("jQuery2")
}
);
</script>
</head>
<body>
<div>div</div>
</body>
js与jQuery加载的区别:
1.js传统的页面加载方式存在同名覆盖问题
2.js会等整个页面加载完毕(包括内容<比如图片等>)后才会执行代码,效率较慢
3.jQuery当整个dom树绘制完毕就会加载,加载比js快
4.jQuery不存在覆盖问题,且是按照顺序执行
js代码和jQuery代码最好写在body内部的最下方,这些代码引用元素对象时,页面还未加载完成的话就无法获取,
或者使用window.onload=function(){//具体代码}等待页面加载完成后获取元素对象
或者使用jQuery的$(function(){ //具体代码})等待DOM加载完成后获取元素对象
jQuery对象
jQuery对象就是通过jQuery包装DOM对象后产生的对象,一般使用$()来表示
$()/ jQuery() / window.jQuery()这三者是等价的
$其实是jQuery库中定义的一个全局变量，用于表示jQuery这个对象
obj instanceof jQuery 查看一个对象是否是jQuery对象,返回true/false
jquery对象，是jquery特有的对象，只有调用jquery框架才存在
jQuery对象无法使用js对象的任何方法
js对象也不能使用jQuery里的方法。
jQuery变量一般在变量名前加$以示区别
将js对象转为jQuery对象:
var v_dom =document.getElementById("name"); js对象中的element元素对象
var $q = $(v_dom);将js对象转为jQuery对象
将jQuery对象转为js对象: jQuery对象.get(index)或者jQuery对象[index]
var j = $("#d1").get();
var j = $("#d1")[0];
jQuery实质是DOM对象组成的集合
<body >
<div id="d1">这是一个div标签</div>
<script type="text/javascript">
//1.js获取对象并绑定事件
document.getElementById("d1").onclick=function(){
this.style.color = "red";
}
</script>
</body>
<body >
<div id="d1">这是一个div标签</div>
<script type="text/javascript">
//2.jQuery获取对象并绑定事件
$("#d1").click(
function(){ // this表示当element元素对象(js对象)
$(this).css('color','red'); //jQuery对象.css() 设置对象的css样式
}
);
</script>
</body>
jQuery选择器
jQuery对象一般都是通过选择器来获取
id选择器——$("#id属性值")
class选择器——$(".class属性值")
标签选择器——$("标签名")
通用选择器——$("*")
组合选择器——$("#id属性值, class属性值, 标签名") 选择多种标签对象
层级选择器——$("body div") 获取body下所有的div元素对象 (父子关系)
$("#d1 .check") 获取id为d1的标签对象下所有class属性为check的标签对象(父子关系)
$("body>div") 获取body下第一个div元素对象(父子关系)
$("body+div") 获取body同级的下一个div元素对象(兄弟关系)
$("#d1~div") 获取id为d1的标签的同级所有的div元素对象(兄弟关系)
过滤选择器——$("body div:first") 获取body下第一个div元素对象(父子关系)
$("body div:last") 获取body下最后一个div元素对象(父子关系)
$("body div:odd") 获取body下div标签索引为奇数的对象
$("body div:even") 获取body下div标签索引为偶数的对象
$("body div:eq(index)") 获取body下div标签索引为index的对象
$("input: not(:checked)")获取所有未选中的input元素
$("input:gt(index)") 获取索引号大于给定索引值的元素，索引号从0开始
:lt(index) 获取索引号小于给定索引值的元素
:header 获取所有的标题元素 h1 h2 h3 h4 h5 h6
:empty 获取所有不包含子元素或者文本的空元素
:parent 获取含有子元素或者文本的元素
$("select option:selected")获取下拉列表中所有选中的元素
$("ul li:first-child")获取ul下li标签的第一个子标签
:only-child 获取所有父元素下唯一的一个元素
属性选择器——$("div[id]") 获取有id属性名的div标签对象
$("div[自定义属性名='自定义属性值']") 获取有自定义属性的div标签对象
表单选择器——$(":text") 获取所有的单行文本框对象
$(":password") 获取所有的密码框元素对象
:radio 获取所有的单选按钮
:checkbox 获取所有的复选框
:image 获取所有的图像按钮
:file 获取所有的文件上传框
$("#id").next() 当前对象的下一个元素对象
$("#id").nextAll() 当前对象下面所有元素对象
$("#id").prev() 当前对象的上一个元素对象
$("#id").prevAll() 当前对象上面所有元素对象
$("#id").parent() 当前对象的父级元素对象
$("#id").parentsAll() 当前对象的所有父级元素对象
$("#id").children(); 当前对象的所有子元素对象
$("#id").siblings(); 当前对象的所有兄弟元素对象
jQuery常用方法
获取jQuery对象无非是同于标签的设置,标签属性的设置,标签文本的设置,事件的绑定
方法
jQuery对象.trim(str) 去除字符串的前后空格
文本设置相关
jQuery对象.html() 获取当前对象的内容(代码及文本)——文本设置
jQuery对象.text() 获取当前对象的内容(文本)——文本设置
属性设置相关
jQuery对象.val() 获取当前对象的value属性的值(val方法只能获取表单元素的值)
jQuery对象.val(str) 设置当前对象的value属性的值
jQuery对象.addClass("cls") 为当前对象添加一个class属性值
jQuery对象.removeClass("cls")为当前对象删除一个class属性值
jQuery对象.toggleClass("cls") 当前如果有这个class属性值就删除;没有就添加
jQuery对象.attr("属性名") 获取当前对象的属性值(attr方法可以获取任意元素的值)
jQuery对象.attr("属性名","属性值") 设置当前对象的属性
jQuery对象.removeAttr("属性名") 删除当前对象的属性
jQuery对象.prop() 获取属性,用于checkbox和radio
jQuery对象.removeProp() 移除属性,用于checkbox和radio
css样式相关
$("").css("样式名","样式值");
例如:$("p").css("color","red");
标签对象设置相关
被选元素对象.append()在被选元素的结尾（元素内部）插入指定内容
new对象.appendTo(被选元素) 在被选元素的结尾（元素内部）插入指定内容
jQuery对象.prepend()在被选元素的开头（元素内部）插入指定内容
jQuery对象.after(new元素) 在当前元素下方插入新元素(兄弟标签)
jQuery对象.before()当前元素上方插入新元素(兄弟标签)
jQuery对象.remove() 从dom中删除中所有匹配的元素
jQuery对象.empty() 从被选元素移除所有内容，包括所有文本和子节点,但是自身标签任然存在于dom中
标签状态相关
jQuery对象.hide() 隐藏该元素
jQuery对象.show() 显示该元素
jQuery对象.toggle() 方法切换元素的可见状态;元素可见，就隐藏这些元素;元素隐藏，就显示这些元素
jQuery对象.replaceWith() 用指定的 HTML 内容或元素替换当前元素
jQuery对象.replaceAll() 用指定的 HTML 内容或元素替换当前元素
attr所指的属性是HTML标签属性,prop所指的是DOM对象属性
addClass()与attr()相比，attr()是对整个属性进行操作，addClass()是追加
事件:
bind() 绑定事件
click() 单击事件
change() 内容改变事件
mouseout() 鼠标离开事件
mouseover()鼠标经过事件
focus()鼠标焦点获取事件
blur()鼠标焦点失去事件
...
...
示例:
$("p").focus(function(){...});
$("p").blur(function(){...});
事件设置：
bind("事件名称",函数)
bind("click", function(){...})绑定单击事件
unbind("click", function(){...}) 移除单击事件
on("click", function(){...}) 添加一个或多个事件处理程序
off("click", function(){...}) 移除通过 on() 方法添加的事件
ready与load事件
window.onload ：必须等到页面内包括图片的所有元素加载完毕后才能执行，不能同时编写多个
如果有多个 window.onload 方法，只会执行一个
$(document).ready()：DOM 结构绘制完毕后就执行，不必等到加载完毕
可以同时编写多个，并且都可以得到执行
DOM文档加载的步骤:
(1) 解析HTML结构。
(2) 加载外部脚本和样式表文件。
(3) 解析并执行脚本代码。
(4) 构造HTML DOM模型。//ready
(5) 加载图片等外部文件。
(6) 页面加载完毕。//load
ready事件简写:
$(function(){})
jQuery的遍历
<script type="text/javascript" src="jquery-1.8.3.js" ></script>
<script type="text/javascript">
li = [10, 20, 30, 40]
$.each(li, function(i, el){
console.log(i, el); //index是索引，el是每次循环的具体元素。
})
</script>
jQuery的二级联动——标签设置
<script type="text/javascript">
//二维数组存储省份与城市
var c = new Array(4);
c[0] = new Array("武汉市","黄冈市","襄阳市","荆州市");
c[1] = new Array("长沙市","郴州市","株洲市","岳阳市");
c[2] = new Array("石家庄市","邯郸市","廊坊市","保定市");
c[3] = new Array("郑州市","洛阳市","开封市","安阳市");
$(function(){//DOM加载完成后执行这个ready事件
$("#sel1").change(function(){//给一级列表添加一个change事件
var value = $(this).val();//获取一级列表中选中项的value属性值
var $sel2 = $("#sel2");//获取第二个列表的jQuery对象
$sel2[0].options.length=1; //转为element对象后设置列表长度为1(清空二级列表内容)
$.each(c,function(i,n){//jQuery的遍历,i为元素下标,n为元素
if(value == i){//一级标签的value属性值与数组下标一致,当前数组的值就是二级列表的内容
$.each(n,function(j,m){//j为元素下标,m为元素
//追加标签
$sel2.append("<option>" + m + "</option>")
});
}
});
});
}
);
</script>
</head>
<body>
籍贯
<select id="sel1">
<!-- change(this.value)是一个内容改变时就会被调用的事件
this.value是当前下拉框的value值(0/1/2/3) -->
<option selected="selected">--请选择--</option>
<option value="0">湖北</option>
<option value="1">湖南</option>
<option value="2">河北</option>
<option value="3">河南</option>
</select>
<select id="sel2">
<option >--请选择--</option>
</select>
</body>
图片移入焦点和移出焦点——标签属性设置
<style type="text/css">
.img{
width:270px;
heigth:270px;
border-color: blue;
border-style: solid;
}
.img2{
border-color: red;
border-style: solid;
}
</style>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){//DOM加载完成后执行的函数
$("#img").bind({//为img标签绑定多个事件
mouseover:function(){//鼠标焦点移入事件
//将图片1变为图片2,且改变样式
$(this).addClass("img");//添加class属性值
$(this).attr("src","imgs/5.jpg");//修改src属性值
$(this).removeClass("img2");//移除class属性值
},
mouseout:function(){//鼠标焦点移出事件
//将图片2变为图片1,且还原样式
$(this).attr("src","imgs/3.jpg");
$(this).removeClass("img");
$(this).addClass("img2");
}
});
})
</script>
</head>
<body>
<img id="img" class="img2" src="imgs/3.jpg" width="150" heigth="150" >
</body>
数据的显示与隐藏——标签状态设置
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){//DOM加载完成后执行
$("#div").hide();//隐藏当前元素
$("#but").click(function(){//为按钮绑定一个单击事件
$("#div").toggle();//改变元素的隐藏/显示状态
})
});
</script>
</head>
<body >
<input type="button" id="but" value="更多">
<div id="div">
西游记2<br>
猛虫过江<br>
湮灭<br>
鲨海<br>
<div id="div">
黑豹<br>
妇联3<br>
奥创纪元<br>
创世纪<br>
黑客帝国<br>
</div>
</body>
表格的隔行换色——css样式动态显示
<style type="text/css">
.ou { background:#FFF38F;} /* 偶数行样式*/
.ji { background:#FFFFEE;} /* 奇数行样式*/
.over { background:red;} /* 移入焦点样式*/
</style>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
//设置初始的表格样式
$("tbody tr:even").addClass("ou");//为偶数的行添加一个class属性,值为ou
$("tbody tr:odd").addClass("ji");//为偶数的行添加一个class属性,值为ou
$("tbody tr").mouseover(function(){
var cls = $(this).attr("class");
$(this).removeClass(cls);
$(this).addClass("over");
})
$("tbody tr").mouseout(function(){
$(this).removeClass("over");
$("tbody tr:even").addClass("ou");
$("tbody tr:odd").addClass("ji");
})
});
</script>
</head>
<body >
<table border="1px" table" width="500px" height="50px" align="center">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr >
<td>1</td>
<td>张三</td>
<td>22</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>23</td>
</tr>
<tr >
<td>3</td>
<td>王五</td>
<td>24</td>
</tr>
<tr >
<td>4</td>
<td>赵六</td>
<td>25</td>
</tr>
</tbody>
</table>
</body>
表格隔行换色,移入焦点后显示当前行背景色显示红色,移出焦点恢复原理的颜色
标签之间的数据迁移——标签数据的移动
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
/*1.选中单击去右边*/
$("#selectOne").click(function(){
$("#left option:selected").appendTo($("#selectOneRight"));
});
/*2.单击全部去右边*/
$("#selectAllToRight").click(function(){
$("#left option").appendTo($("#selectOneRight"));
});
/*3.选中双击去右边*/
$("#left option").dblclick(function(){
$("#left option:selected").appendTo($("#selectOneRight"));
});
});
</script>
</head>
<body>
<table border="1" width="600" align="center">
<tr>
<td>
<span style="float: left;">
<font color="green" face="宋体">商品列表</font><br/>
<select multiple="multiple" style="width: 100px;height: 200px;" id="left">
<option>魅族</option>
<option>爱疯</option>
<option>华为</option>
<option>小米5</option>
<option>外星人</option>
</select>
<p><a href="#" style="padding-left: 20px;" id="selectOne">>></a></p>
<p><a href="#" style="padding-left: 20px;" id="selectAllToRight">>>></a></p>
</span>
<span style="float: right;">
<font color="red" face="宋体">购物车</font><br/>
<select multiple="multiple" style="width: 100px;height: 200px;" id="selectOneRight">
<option>红米Note3</option>
<option>三星</option>
</select>
<p><a href="#" ><<</a></p>
<p><a href="#" ><<<</a></p>
</span>
</td>
</tr>
</table>
</body>
4364
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
