Jquery学习笔记--方法总结1
jquery方法总结
1.判断复选框是否选中
jquery ----- $("#ck").is(":checked"){}
dom ----- document.getElementById("ck").checked==true
2.show(time) 控制元素的显示 time为时间 单位为毫秒
3.attr()
获得元素的属性 例:获得P标签的title属性 $("p").attr("title");
设置元素单个的属性值 例: $("p").attr("title","测试");
设置元素多个的属性值 例: $("p").attr({"title":"改变","class":"change"});
删除属性
removeAttr() 例:$("p").removeAttr("title"); 去除p标签的title属性
注:元素的属性 类样式进行修改时
$("p").attr("class","new"); 代表给P标签设置1个新的class 名称为new
如果是追加类样式 $("p").addClass("addClass"); 例:<p class="change addClass">P元素</p> 再P元素原有样式change的基础上 追加addClass这个样式
去除元素css样式
假如<p class="test1 high">例子P</p>
如果指定要删除的样式名称
$("p").removeClass("high"); 结果为:<p class="test1">例子P</p>
如果想要删除所有样式
$("p").removeClass(); 结果为:<p>例子P</p>
下拉框
使用jquery如何操作select(下拉框)呢？主要讲下怎么动态添加option 动态选择option，假如我们的select 控件的 id 属性为 sel
jquery 清空option $("#sel").empty();
jquery 增加option $("#sel").append('<option value="1">动态增加</option>'');
jquery选择option $("#sel").val(1); 使用这个就可以将 select 中值为 1 的项设定为选中状态
jQuery获取Select选择的Text和Value:
1. $("#select_id").change(function(){//code...}); //为Select添加事件，当选择其中一项时触发
2. var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的Text
3. var checkValue=$("#select_id").val(); //获取Select选择的Value
4. var checkIndex=$("#select_id ").get(0).selectedIndex; //获取Select选择的索引值
5. var maxIndex=$("#select_id option:last").attr("index"); //获取Select最大的索引值
jQuery添加/删除Select的Option项：
1. $("#select_id").append("<option value='Value'>Text</option>"); //为Select追加一个Option(下拉项)
2. $("#select_id").prepend("<option value='0'>请选择</option>"); //为Select插入一个Option(第一个位置)
3. $("#select_id option:last").remove(); //删除Select中索引值最大Option(最后一个)
4. $("#select_id option[index='0']").remove(); //删除Select中索引值为0的Option(第一个)
5. $("#select_id option[value='3']").remove(); //删除Select中Value='3'的Option
5. $("#select_id option[text='4']").remove(); //删除Select中Text='4'的Option
内容清空：
$("#charCity").empty();
返回顶部小技巧
1.主要是利用滚动条的位置来进行限定返回顶部图标的显示和隐藏
if( $(window).scrollTop() > 30){
//返回顶部按钮显示
}else{
//返回顶部按钮隐藏
}
返回顶部操作
window.scroll(0,0);
jquery和js的初始化方式 区别
1.jquery的 $(document).ready(function(){}/$(function){} 可以极大的提高web应用的响应速度
2.js的onload事件,只有在页面元素全部加载完毕(包含关联文件),才可以对元素进行操作
而jquery则在dom结构加载完毕后,即可对页面元素进行操作.用户进行操作,响应速度上有不同.
3.jquery的初始化操作可多次使用,并且按照编写的顺序执行,js的onload函数只能使用1次
小技巧 jquery的初始化方式3种写法
1.$(document).ready(function(){});
2.$(function(){})
3.$().ready(function(){});
hover()方法
该方法模拟mouseenter和mouseleave而不是替代mouseover和mouseout
例:$("p").hover(function(){},function(){});
toggle()方法
该方法模拟连续单击事件,可以写多个事件,按照顺序执行方法,且循环调用
例:$("btn").toggle(function(){},function(){},function(){});
冒泡事件
这个事件较为特殊,容易被人忽略,下面是解决方案
解释下什么是冒泡事件:假设一个div设置click事件,同时包含div的span元素也设置了click事件,并且body元素也绑定了click事件,这时如果触发了div的click事件,也将会引起span和body的click事件,这种行为称为冒泡事件
解决方案：
$("div").click(function(event){
//操作
........
event.stopPropagation();//停止冒泡事件
});
阻止默认行为技巧
jquery提供了函数用来阻止元素的默认行为,例如:超链接的跳转行为
例:$("a").click(function(event){
event.preventDefault();
});
绑定事件与移除事件
绑定事件例子: 语法 $(元素).bind("事件类型",事件);
$("#btn).bind("click",function(){});
给处理函数起变量名的绑定事件
$("#btn").bind("click",myFun=function(){});
移除事件例子: 语法 $(元素).unbind("事件类型",处理函数名称(可选));
$(元素).unbind();//不指定事件类型以及处理函数名称,将解除所有绑定事件
例：$("#btn").unbind("click",myFun); //移除点击事件中名为myFun的事件
特殊的one()方法 只执行1次该函数绑定的事件,执行完自动解除
例:$("#btn").one("click",function(){});
绑定多个事件
$("#btn").bind("mouseover mouseout",function(){});
给绑定事件设置命名空间方便管理
$("div").bind("click.plug",function(){});
$("div").bind("mouseover.plug",function(){});
$("div").bind("dbclick",function(){});
.plug为命名空间
$("div").unbind(".plug");这样除了dbclick事件,其他带有plug命名空间的事件都被移除
移除事件同样可以采用链式写法.. 例:$("div").unbind("click").unbind("mouseover");
