黑马程序员技术交流社区
标题:
【石家庄校区】Web笔记day05
[打印本页]
作者:
buluo
时间:
2017-11-19 22:50
标题:
【石家庄校区】Web笔记day05
本帖最后由 小石姐姐 于 2017-11-21 10:07 编辑
JQuery
小技巧 table>tr*num>td*num
JQuery的概述
JQuery是一个JS的框架(js的类库),对传统的JS进行了封装
现在企业的开发中往往不会使用传统的JS进行开发，通常都会使用JS框架进行开发.
JS的常用的框架:
JQuery(体积小,100KB,互联网),ExtJS(体积大,10MB,内部网),DWR,Prototype...
框架 AngularJS Vue
js版本
1 X 兼容IE6.7.8
2 X 不兼容IE6.7.8
JQuery的入门
常用方法
$("div")JQuery对象 实际上是一个DOM数组 操作JQuery对象就是操作DOM数组里面每一个元素
$(function(){
alert("aaa")
});
window.onload等页面加载完成后执行该方法
$(function(){}):等页面的DOM树绘制完成后进行执行.
JQuery与js对象的转换
window.onload = function(){
// 传统JS方式：
var d1 = document.getElementById("d1");
// JS对象的属性和方法:
// d1.innerHTML = "JS对象的属性";
// d1.html("aaaaaa");
// 将JS对象转成JQ的对象.
$(d1).html("JS对象转成JQ对象");
}
$(function(){
var $d1 = $("#d1");
// $d1.html("JQ对象的属性");
// 转成JS的对象:
// 一种方式
// $d1[0].innerHTML = "将JQ的对象转成JS对象";
// 二种方式:
$d1.get(0).innerHTML = "将JQ的对象转成JS对象的方式二";
});
JQ显示和隐藏
JQuery的效果操作
* show();
* 使用一:Jq对象.show();
* 使用二:Jq对象.show(“slow”); // slow(慢慢),normal(正常速度),fast(加快速度)
* 使用三:Jq对象.show(毫秒值); // 1000(显示的速度)
* 使用四:Jq对象.show(毫秒值,function(){});
* hide();
* 使用一:Jq对象.hide();
* 使用二:Jq对象.hide(“slow”); // slow(慢慢),normal(正常速度),fast(加快速度)
* 使用三:Jq对象.hide(毫秒值); // 1000(显示的速度)
* 使用四:Jq对象.hide(毫秒值,function(){});
* slideDown(); --向下滑动
* 使用一:Jq对象.slideDown();
* 使用二:Jq对象.slideDown(“slow”); // slow,normal,fast
* 使用三:Jq对象.slideDown(毫秒值); // 1000
* 使用四:Jq对象.slideDown(毫秒值,function(){});
* slideUp(); --向上滑动
* 使用一:Jq对象.slideUp();
* 使用二:Jq对象.slideUp(“slow”); // slow,normal,fast
* 使用三:Jq对象.slideUp(毫秒值); // 1000
* 使用四:Jq对象.slideUp(毫秒值,function(){});
* fadeIn(); --淡入
* 使用一:Jq对象.fadeIn();
* 使用二:Jq对象.fadeIn(“slow”); // slow,normal,fast
* 使用三:Jq对象.fadeIn(毫秒值); // 1000
* 使用四:Jq对象.fadeIn(毫秒值,function(){});
* fadeOut(); --淡出
* 使用一:Jq对象.fadeOut();
* 使用二:Jq对象.fadeOut(“slow”); // slow,normal,fast
* 使用三:Jq对象.fadeOut(毫秒值); // 1000
* 使用四:Jq对象.fadeOut(毫秒值,function(){});
* animate(); --自定义动画
* toggle(); --单击切换函数
* Jq对象.toggle(fn1,fn2...);单击第一下的时候执行fn1,单击第二下执行fn2...
JQuery的选择器
id选择器
* 用法:$(“#id”)
类选择器
* 用法:$(“.类名”)
元素选择器
* 用法:$(“元素名称”)
通配符选择器
* 用法:$(“*”)
并列选择器
* 用法:$(“选择器,选择器,选择器”)
$(function(){
$("#but1").click(function(){
// alert("aaaa");
$("#one").css("background","#bbffaa");
});
$("#but2").click(function(){
$(".mini").css("background","#bbffaa");
});
$("#but3").click(function(){
$("div").css("background","#bbffaa");
});
$("#but4").click(function(){
$("*").css("background","#bbffaa");
});
$("#but5").click(function(){
$("#two,span,.mini").css("background","#bbffaa");
});
});
层级选择器
后代选择器: 使用空格$("#body div") 所有后代包含孙子及以下的元素
子元素选择器: 使用> $("#body > div") 第一层的元素（儿子）
下一个元素: 使用+ $("#div + div") 下一个同辈元素
兄弟元素: 使用~ $("#div ~ div") 后面所有的同辈元素
<script>
$(function(){
// 后代选择器:
$("#but1").click(function(){
$("body div").css("background","#bbffaa");
});
// body下的第一层div元素
$("#but2").click(function(){
$("body > div").css("background","#bbffaa");
});
// 查找下一个同辈的元素
$("#but3").click(function(){
$("#three + div").css("background","#bbffaa");
});
$("#but4").click(function(){
$("#two ~ div").css("background","#bbffaa");
});
});
</script>
过滤选择器
查找第一个 $("#three div:fist")
查找最后一个 $("#three div:last")
查找奇数个 $("#div:odd")
查找偶数个 $("#div:even")
查找指定数 $("#three div:eq(num)")
lt(index)
gt(index)
header
<script>
$(function(){
$("#but1").click(function(){
$("#three div:first").css("background","#bbffaa");
});
$("#but2").click(function(){
$("#three div:last").css("background","#bbffaa");
});
$("#but3").click(function(){
$("div:odd").css("background","#bbffaa");
});
$("#but4").click(function(){
$("div:even").css("background","#bbffaa");
});
$("#but5").click(function(){
$("#three div:eq(1)").css("background","#bbffaa");
});
});
</script>
内容选择器
contains(text)
empty
has(selector)
parent
<script>
$(function(){
$("#but1").click(function(){
$("div:contains('1')").css("background","#bbffaa");
});
});
</script>
属性选择器
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
表单选择器
:input
:text
:password
:radio
:checkbox
:submit
:image
:reset
:button
:file
:hidden
<script>
$(function(){
$("#but1").click(function(){
$(":input").css("background","#bbffaa");
});
$("#but2").click(function(){
// $(":text").css("background","#bbffaa");
$("input[type='text']").css("background","#bbffaa");
});
});
</script>
表单属性选择器
:enabled
:disabled
:checked
:selected
【JQuery中添加和移除样式】
* 如果样式没有事先定义,可以使用css方法为奇数行或者偶数行设置背景颜色.
* 如果已经在css文件中事先将样式定义完成了,不能使用css方法了.使用JQ中的CSS类中的方法：
* addClass();
* removeClass();
【JQuery对属性的操作的方法】
* attr(); 只能操作自定义属性
* 使用方法一：$(“”).attr(“src”);
* 使用方法二：$(“”).attr(“src”,”test.jpg”);
* 使用方法三：$(“”).attr({“src”:”test.jpg”,”width”:”100”});
* removeAttr();
* prop();新版本的方法. 只能操作非自定义属性
* 使用方法一：$(“”).prop(“src”);
* 使用方法二：$(“”).prop(“src”,”test.jpg”);
* 使用方法三：$(“”).prop({“src”:”test.jpg”,”width”:”100”});
* removeProp();
* addClass()
* removeClass();
【JQuery的DOM操作】
* 常用的方法:
* append(); ---在某个元素后添加内容.
* appendTO(); ---将某个元素添加到另一个元素后.
* remove(); ---将某个元素移除. 连自己都干掉
【JQuery的遍历】
遍历方式一
$.each(object,function(i,element){
});
遍历的方式二:
* $(“”).each(function(i,n){
});
$(function(){
var arrs = new Array("张森","张凤","张芙蓉");
// 将这个数组转成JQ的对象使用each方法.
/*$(arrs).each(function(i,n){
alert(i+" "+n);
});*/
$.each(arrs,function(i,n){
alert(i+" "+n);
});
});
【JQ的事件切换】：
* toggle(); --单击事件的切换
* hover(); --鼠标悬停的切换
欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)
黑马程序员IT技术论坛 X3.2