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最大的索引值

----补充
1、jquery获取当前选中select的text值

var checkText=$("#slc1").find("option:selected").text();
2、jquery获取当前选中select的value值

var checkValue=$("#slc1").val();
3、jquery获取当前选中select的索引值

var index=$("#slc1 ").get(0).selectedIndex;
4、jquery获取指定select的最大索引值

var maxIndex=$("#slc1 option:last").attr("index");
5、jquery设置索引值为1的项为当前选中项

$("#slc1 ").get(0).selectedIndex=1;
6、jquery设置value值2的项为当前选中项

$("#slc1 ").val(2);
7、jquery设置text值为"青藤园"的项为当前选中项

$("#slc1 option[text='青藤园']").attr("selected", true);
8、为指定select下拉框追加一个option（追加到在末尾）

$("#slc2").append(""+i+"");
9、为制定select下拉框插入一个option（插入到第一个位置）

$("#slc2").prepend("请选择");
10、jquery删除select下拉框的最后一个option

$("#slc2 option:last").remove();
11、jquery删除select下拉框索引值为0的option

$("#slc2 option[index='0']").remove();
12、jquery删除select下拉框value为2的option

$("#slc2 option[value='2']").remove();
13、jquery删除select下拉框text为“青藤园”的option

$("#slc2 option[text='青藤园']").remove();




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");