//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>