Jquery常用功能笔记

//Jquery的事件需要定义在dom加载完成之后函数中

 

<input type="text" class="这里是class的属性，可以被removeClass addClass 操作"
sytle="dispaly:none;color:read;这里是样式的属性，可以被css方法操作"
/>

$(function(){
    $("此处填写ID，类，标签名称等，也可以是层级的").click(function(){
        $(this).removeClass("要移除的class");
        $(this).addClass("要增加的class");
        $(this).attr("需要设置的属性","需要设置属性的值");
        如：$(this).attr("class","testClass");//设置class属性   注：设置class属性与增加是不同的
            $(this).attr("style","testStyle");//设置style属性
        $(this).css("样式的属性","属性值");//即设置style中的属性
        如：$(this).css("color","red");
        $(this).css("color");//获取样式属性的值
        
        $(this).parent();//获取唯一祖先元素，可加参数。
        $(this).closest();//获取唯一祖先元素，可加参数。
        $(this).parents();//获取所有祖先元素集合，可加参数进行筛选。
        $(this).find();//获取所有后代元素集合，可加参数进行筛选。
        $(this).siblings(); //获取兄弟元素，可加参数进行筛选。
	
    })
    //上方事件在动态添加元素时，无法触发事件。（因为在做事件绑定时，元素尚未添加。）
    //下方这种事件绑定在动态添加元素的时候极为有用。子级为动态添加的内容。
    $("此处填写ID，类，标签名称等-父级").on("click","此处填写ID，类，标签名称-子级",function(){
	//各种如上事件内容
    });
})

 

 

案例：

<pre name="code" class="javascript">$("select").find("option[value !='2']").css("display","none"); //获取select中的option，[条件]
$("select").children('option[value="2"]').wrap('<span>').hide();//包裹option并对其进行隐藏。（option不是可绘制的dom）

 

 

//获取设置内容与值

 

$("此处是选择器类型").val();//获取或设置选择对象的value值。
$("此处是选择器类型").html();//获取或设置选择对象的内容（包含html标记）
$("此处是选择器类型").text();//获取或设置选择对象的文本内容（不包含html标记）
$("此处是选择器类型").data("xxx（data属性）");//获取选择对象的data-xxx属性的值
$("此处是选择器类型").data("xxx（data属性）","要设置的值");//设置选择对象的data-xxx属性的值
data html5新增


$("此处是选择器类型").append();//在选择对象结尾插入内容（子元素）        <p>内容$</p>
$("此处是选择器类型").prepend();//在选择对象开头插入内容（子元素）    <p>$内容</p>
$("此处是选择器类型").after();//在选择对象之后插入内容（兄弟元素）        <p>内容</p>$
$("此处是选择器类型").before();//在选择对象之前插入内容（兄弟元素）        $<p>内容</p>
$("$<p>").wrap("$<div>");//包裹参数      <p><div></div></p>           对应还有wrapAll  两者区别是 wrap 一个一个包裹每个元素，wrapAll将所有元素进行一次包裹。
$("$<p>").wrapInner("$<div>");//使用参数包裹自身  <div><p></p></div>

 

遍历：

 

//（列表、数组）遍历each的用法2种。
$.each(objs, function(index, item){
   $(item).css("xxx");
   $(this).attr("yyy");
});
objs.each(function(index, item){......});
//json对象的遍历
for(var item in data){
//console.log("data中"+item+"的值是:"+data[item]);
//给json对象对应的ID对象赋值 item属性名称，data[item] 属性值						
$("#"+item+"").val(data[item]);
}

 

js字符串分隔，数组遍历

<script >
    var str="1,2,3,4,5,6"; //字符串
    var strs= new Array(); //定义数组
    strs=str.split(","); //字符分割
    for (var i=0;i<strs.length ;i++ )
    {
        console.log(strs[i]); 
    }
</script>