jQery基础学习的笔记
多库共存问题
释放$的作用
var my$ = . n o C o n f l i c t ( ) ; 此 时 的 .noConflict(); 此时的 .noConflict();此时的只是一个变量
my$此时代表 $ 拥有控制权
注意:在JQuery中 jQuery与$ 效果一样
jQuery中的==$.fn==
$.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效。
注意:常用与jQuery组件的开发
$.fn.method()=function(){}的调用把方法扩展到了对象的prototype上,所以实例化一个jQuery对象的时候,它就具有了这些方法。可以直接的去调用
jQuery选择器及应用
jQuery获取元素的方式
- 根据id获取
- id选择器
- 用法:$("#id的值");
- 获取的元素的个数:一个
$("#div")
-
根据标签的名字获取
- 标签选择器
- 用法:$(“标签名字”);
- 获取的元素的个数:多个
// <div id="btn" class="dv"></div>
$(".di")
- 根据类样式的名字获取
- 类选择器
- 用法:$(".类样式的名字");
- 获取的元素的个数:多个
// <div id="btn" class="dv"></div>
$("div")
- 标签加类选择器
//<li class="dv">nihao </div>
$("li.dv")
- 层次选择器
<ul id="uu">
<li></li>
<li></li>
<li></li>
</ul>
//获取所有的li标签
$(function () {
$("#uu>li")
})
6.过滤选择器
- even 偶数 选择器
- odd 奇数 选择器
$(".wrap li:odd").css("background","red"); //设置li奇数行的样式
$(".wrap li:even").css("background","blue");//设置li偶数行的样式
7.索引选择器
- lt(index):设置索引小于index的所有的标签元素
- eq(index):设置索引为index的标签元素
- gt(index):设置索引大于index的所有的标签元素
//设置ul中的索引为4的li的标签元素
$(".wrap li:eq(4)").css("background","red");
//设置ul中的索引大于4的所有li的标签元素
$(".wrap li:gt(4)").css("background","blue");
//设置ul中的索引小于4的所有li的标签元素
$(".wrap li:lt(4)").css("background","green");
jQuery中常见的几个方法
注意:以下几个方法,括号里面什么都不写表示获取,写内容表示设置
- .html() 方法:
- 设置标签中间显示其他标签及内容,类似于innerHTML
- .text() 方法:
- 设置标签中间显示的文本内容,类型于innerText
- .val() 方法:
- 设置input标签中value值,类似于value
- .css() 方法:
- 设置元素的样式,类似于style
- .attr() 方法:
- 获取属性值
jQuery 样式操作
设置样式
- .css() 为标签添加样式
- .css( “属性” , “属性值” )
- .css( “属性” , “属性值”).css( “属性” , “属性值” )
- .css( {“属性” : “属性值” } )
$("#dv").css(“background”,“red”);
$("#dv").css(“background”,“red”).css(“background”,“red”);
$("#dv").css( { “background” : “red” , “width” : “20px”} );//获取宽和高的属性值---->数字类型
var width=KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲dv").width()*2;…("#dv").height()*2;
//设置元素的宽和高—>参数可以是数字也可以是字符串
$("#dv").width(width);
$("#dv").height(height);
添加样式
- .addClass() 为元素添加类样式
- addClass(" 类样式名字 "); 添加一个类样式
- addClass(" 类样式名字1 类样式名字2 "); 添加多个类样式
- 注意:添加多个样式的时候 中间以空格隔开
$("#dv").addClass(“cls”); 一个样式
$("#dv").addClass(“cls_1 cls_2”); 多个样式
移除样式
- removeClass() 移除样式
- removeClass( " 类样式名字 " ); 移除类样式
- removeClass( ) 移除当前元素所有的样式
$(“body”).removeClass(“cls”);
$(“body”).removeClass();
判断是否应用样式
- hasClass() 判断当前元素是否应用了某个类样式
- hasClass( " 类样式名字 " )
var result=$("#dv").hasClass(“cls”);
返回值为:true、false
切换元素样式
- toggleClass(); 切换元素的类样式
- toggleClass( " 类样式名字 ");
- 注意:该方法可以添加和移除类样式 多次操作
$(“body”).toggleClass(“cls”);//切换类样式
常见的样式的操作
- 获取与设置宽高
//获取宽和高的属性值---->数字类型
var width=KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲dv").width()*2;…("#dv").height()*2;
//设置元素的宽和高—>参数可以是数字也可以是字符串
$("#dv").width(width);
$("#dv").height(height);
- 获取设置位置
$("#dv").offset().left;
$("#dv").offset().top;
$("#dv").offset({“left”:200,“top”:200});
- 获取滚动条高度
$(this).scrollLeft()
$(this).scrollTop()
链式编程
示例:
$(this).css(“backgroundColor”,“red”).siblings(“li”).css(“backgroundColor”,"");
注意:当发生断链的时候可以使用 .end() 方法恢复到锻炼之前的效果
$(this).prevAll().css(“backgroundColor”,“yellow”).end().nextAll().css(“backgroundColor”,“blue”);
jQuery中的遍历
向下遍历
- childen(可选参数)
- 只能遍历他的下一级(儿子辈)
$(" #dv “).childen()
$(” #dv “).childen(” li ")
- find(必选参数)
- 可以找到任意一级参数
$(" #dv “).find(” li ")
向上遍历
- parent(可选参数)
- 只能遍历他的上一级(父辈)
$(" #dv ").parent()
- parents()
- 向上遍历所有的元素
$(" #dv ").parents()
- parentUntil()
- 向上在一个区间内遍历所有的元素
向上遍历a标签到div标签之间的所有元素
$(" a ").parentUntil(“div”)
同级遍历
1.next();
- 获取的是当前元素的下一个兄弟元素
$(this).next().css(“backgroundColor”,“green”);
2.nextAll();
- 获取的是当前元素的后面的所有的兄弟元素
$(this).nextAll().css(“backgroundColor”,“green”);
3.nextUntil();
- 同级元素下面元素的一个区间
同级遍历 li1 标签到 li2 标签之间的所有元素
$("# li1 “).nextUntil(”# li2")
4.prev();
- 获取的是当前元素的前一个兄弟元素
$(this).prev().css(“backgroundColor”,“green”);
5.prevAll();
- 获取的是当前元素的前面的所有的兄弟元素
$(this).prevAll().css(“backgroundColor”,“green”);
6.prevUntil();
- 同级元素上面面元素的一个区间
同级遍历 li1 标签到 li2 标签之间的所有元素
$("# li1 “).prevUntil(”# li2")
7.siblings();
- 获取的是当前元素的所有的兄弟元素(自己除外)
$(this).siblings().css(“backgroundColor”,“green”);
过滤效果
1.first();
- 第一个符合条件的元素
获得第一个p标签元素
$(“div p”).first();
2.last();
- 最后一个符合条件的元素
获得最后一个p标签元素
$(“div p”).last();
3.eq(index);
- 指定第几个标签元素
- 下标从 0开始
获得第四个p标签元素
$(“div p”).eq(3);
4.filter();
- 过滤留下特定的
过滤所有不是 cls样式的标签元素
$(this).filter(".cls");
5.not();
- 过滤掉指定的
过滤所有是 cls样式的标签元素
$(this).not(".cls");
each()方法的使用
- each:迭代方法(循环)
- 参数1:索引
- 参数2:对象
$("#uu>li").each(function (index,element) {
//第一个参数是索引,第二个参数是对象
$(element).css("opacity",(index+1)/10);
});
jQuery中的动画效果
动态效果
- 显示与隐藏
- 单位:毫秒
- $(“ul”).show( 数字 | slow | normal | fast );
- $(“ul”).hide( 数字 | slow | normal | fast );
- $(“ul”).toggle( 数字 | slow | normal | fast );
- slow:600ms
- normal:400ms
- fast:200ms
$("ul").show(500); //显示
$("ul").hide(slow); //隐藏
$("ul").toggle(normal); //显示 / 隐藏
案例:几张图片依次的显示与隐藏
$(function () {
$("#btn1").click(function () {
//获取div,最后一个图片,隐藏
$("div>img").last("img").hide(800,function () {
//arguments.callee相当于递归
$(this).prev().hide(800,arguments.callee);
});
});
//显示
$("#btn2").click(function () {
$("div>img").first("img").show(800,function () {
//arguments.callee相当于递归
$(this).next().show(800,arguments.callee);
});
});
});
滑动效果(向上、向下)
- 滑入: slideUp( 数字 | slow | normal | fast )
- 滑出:slideDown( 数字 | slow | normal | fast )
- 切换划入滑出:slideToggle( 数字 | slow | normal | fast )
- slow:600ms
- normal:400ms
- fast:200ms
$( “div" ).slideUp(1000);
$( “div" ).slideDown(1000);
$( “div" ).slideToggle(1000);
淡入与淡出效果
- 淡入: fadeIn( 数字 | slow | normal | fast )
- 淡出:fadeOut( 时间 )
- 淡入/淡出:fadeTaggle( 时间 )
- 淡化透明度:fadeTo( 时间,透明度)
$("#dv").fadeIn(1000);
$("#dv").fadeOut(1000);
$("#dv").fadeToggle(1000);
//一秒钟 透明度达到0.3
$("#dv").fadeTo(1000,0.3);
其他方式
停止动画
- .stop()方法用来停止当前动画
- 一般会与show()和hide()方法配合使用
$(“ul”).stop().show(500); //显示
$(“ul”)stop().hide(slow); //隐藏
jQuery中animate方法的使用
- animate(对象,时间,函数)
- 第一个参数:是键值对—对象(数值的属性可以改,颜色不能改)
- 第二个参数:时间—1000毫秒
- 第三个参数:匿名函数—回调函数
$(function () {
$("#btn").click(function () {
$("#dv").animate({"width":"300px","height":"300px","left":"300px"},1000,function () {
$("#dv").animate({"width":"50px","height":"30px","left":"800px","top":"300px","opacity":0.2},2000);
});
});
jQuery中HTML的操作
创建元素的方式
- jQuery中创建元素的方式:
- 1.$(“标签的代码”)
- 2.对象.html(“标签的代码”);
var aObj=$("<a href='http://www.baidu.com'>百度</a>");
$("#div").html("<p>这是一个p标签</p>")
添加创建的元素
- append(元素) 最后一个子节点
- 把元素添加到被选中元素里面的结尾(被选中元素里边 div里面)
//把元素添加到div中
$("#dv").append(aObj);//把超链接追加到div中
- pripend(元素)第一个子节点
- 把元素添加到被选中元素里面的前面(被选中元素里边 div里面)
//把元素插入到某个元素的前面
//$("#dv").prepend(aObj);
- before(元素) 添加兄弟
- 把元素添加到选中元素的前面(被选中元素外边 div外边)
//把元素添加到当前元素的前面(兄弟元素来添加)
//$("#dv").before(aObj);
- after(元素) 添加兄弟
- 把元素添加到选中元素的后边(被选中元素外边 div外边)
//把元素添加到当前元素的后面(兄弟元素来添加)
//$("#dv").after(aObj);
- appendTo()
- 把一个对象直接加到另外一个对象里面
>var obj = $("<p></p>");
>把 obj对象 主动的加到div中
>obj.appendTo( $( "#div" ) )
元素属性的操作
- .attr()
- 设置属性与获取属性
- .attr(“属性”) 获取到属性里面的属性值
- .attr(“属性“,”属性值”) 为元素设置属性值
- 设置属性与获取属性
获取到a标签里面的超链接
$(“a”).attr( “herf” );
为a标签设置超链接
$(“a”).attr( “herf”," www.baidu.com " );
删除元素
- .html()
- 清空元素中的内容
$("#dv").html("");//清空元素中的内容
-
empty()
- 清空元素中的内容
//$("#dv").empty();//清空元素中的内容
-
remove()
- 移除元素自身—自杀
//$("#dv").remove();//移除元素自身—自杀
克隆元素
- .clone()
- 克隆元素
克隆span标签给div2标签
var spanObj=$("#dv>span").clone();//克隆,复制了这个元素
$(“div2”).append(spanObj);
设置元素的全选与全不选
-
.prop()方法
- 可以设置元素的全选与全不选
- 案例:
<input type="button" value="全选" id="btnAll"/>
<input type="button" value="全不选" id="btnNoAll"/>
<div id="dv">
<input type="checkbox" value="1"/>吃饭
<input type="checkbox" value="2"/>睡觉
<input type="checkbox" value="3"/>打豆豆
<input type="checkbox" value="4"/>打篮球
<input type="checkbox" value="5"/>打足球
<input type="checkbox" value="6"/>打铅球
<input type="checkbox" value="7"/>打桌球
</div>
</body>
//两个按钮:1按钮全选,2全不选
$(function () {
//获取第一个按钮,点击---全选
$("#btnAll").click(function () {
$("#dv :checkbox").prop("checked",true);
});
//获取第二个按钮,点击---全不选
$("#btnNoAll").click(function () {
$("#dv :checkbox").prop("checked",false);
});
});
jQuery中事件的相关操作
绑定事件
- .bind()
- 可以为元素同时绑定多个事件
- 第一个参数是:事件名字,
- 第二个参数是:事件处理函数-匿名函数
绑定一个事件
.bind( “事件名” , “处理函数” )
绑定多个事件
.bind( { “事件名”: “处理函数” , “事件名”: “处理函数” , “事件名”: “处理函数” } )
//绑定单个事件
$("#btn").bind("click",function () {
alert("我被点了");
});
//bind()方法可以为元素同时绑定多个事件
$("#btn").bind({"click":function(){
alert("我被点了");
},"mouseover":function(){
$(this).css("backgroundColor","red");
},"mouseout":function(){
$(this).css("backgroundColor","");
}});
- .delegate()
- 参数1.要绑定事件的元素—p
- 参数2.要绑定的事件的名字—click
- 参数3.绑定事件的处理函数—匿名函数
//给div标签里面的p标签添加事件
$("#dv").delegate("p","click",function () {
alert("我被点了");
})
- on()
- 两个参数
- 1事件的名字
- 2事件处理函数
- 三个参数
- 1,事件的名字
- 2.要绑定事件的元素–p
- 3事件处理函数
父级元素.on(“事件类型”,“子级元素”,事件处理函数);
$("#btn").on("click",function () {
//创建p添加到div中
$("#dv").append($("<p>这是一个p</p>"));
//为div中的p标签绑定事件
$("#dv").on("click","p",function () {
alert("我被点了");
});
});
注意: 在实际的应用中,一般情况下on比较常用,bind与delegate不常用
解绑事件
-
绑定与解绑事件
- bind() unbind()
- deledae() undelegate()
- on() off()
-
参数
- (事件名字)要解绑的事件的名字
- (元素,事件名字)为那个元素解除那种绑定事件
-
示例:
$("#dv").unbind("click");
$("#dv").undelegate("click");
$("#dv").off("click");
- 父子元素事件解绑关系
//下面的代码是把子级元素的点击事件解绑了,父级元素的点击事件还存在
$("#dv").off("click","**");
//移除父级元素和子级元素的所有的事件
$("#dv").off();
注意:
父级元素和子级元素都是通过正常的方式绑定事件,如果通过off解绑的>时候,父级元素的事件解绑了,子级元素的事件没有解绑
但是:如果子级元素是通过父级元素调用delegate的方式绑定的事件,父>级元素使用off方式解绑事件,这个时候父级元素和子级元素的相同的事>件都会被解绑
触发事件
- 直接调用要触发的元素的方法
- 使用: trigget(事件名)
- 使用: triggerHandler(事件名)
$(function () {
$("#btn1").click(function () {
$(this).css("backgroundColor","red");
});
//点击第二个按钮-触发第一个按钮的点击事件
$("#btn2").click(function () {
//触发事件--3三种方式
$("#btn1").click();
$("#btn1").trigger("click");//触发事件
$("#btn1").triggerHandler("click");//触发事件
});
});
注意:trigger() 与 triggerHandler() 区别
trigger() 会触发浏览器的默认行为,并执行事件
triggrtHandler() 不会触发浏览器默认行为,但是会执行事件
例如:获取到焦点是浏览器的默认行为$("#txt").trigger("focus"); //文本框获取到焦点了 $("#txt").triggerHandler("focus"); //文本框没有获取到焦点了
事件对象
$(“div”).on(“click”,function(event){} )
- event.delegateTarget:代码绑定事件的对象
- event.currentTarget:绑定事件的对象
- event.target:真正触发事件的对象
取消冒泡事件与默认事件
取消冒泡事件
- event.stoPropagation()
- return false
取消默认事件
- event.preventDefault()
- return false;
例如可以取消a标签的默认事件
$(“a”).preventDefault()