jQuery页面预加载方法:
jQuery(document).ready(function(){
alert("222");
});
jQuery(function(){
alert("333");
});
$(function(){
alert("444");
})
基本选择器:
基本选择器是JQuery所有选择器的基础,通过元素的id属性、class属性、标签名称进行选择;
id选择器:(#id)根据id属性查找一个元素 例如:$("#div")
var a1=$("#div3").html();
类选择器:(.class)根据class属性查找元素 例如:$(".class")
$(".div2").html("你好啊");
标签选择器:(element)根据元素标签名查找所有元素 例如:$("div")
var a=$("div").html();
基本过滤器:
:first 选取第一个元素 $("tr:first")
:last 选取最后一个元素 $("tr:last")
:not(selector) 去除所有与给定选择器匹配的元素 $("input:not(:checked)")
:even 选取所有元素中偶数索引的元素,从0开始计数 $("tr:even"),显示奇数
:odd 选取所有元素中奇数索引的元素,从0开始计数 $("tr:odd") ,显示偶数
:eq(index)选取指定索引的元素 $("tr:eq(1)")
:gt(index) 选取索引大于指定index的元素 $("tr:gt(0)")
:lt(index) 选取索引小于指定index的元素 $("tr:lt(2)")
:header 选取所有的标题元素 如: h1, h2, h3 $(":header")
举例:
$("tr td").css("color","red");
$("tr:first").css("color","blue");
$("tr>td").css("color","yellow");//tr里的下一代全部
$("table+p").css("color","yellow");//table下临近的一个p标签 相邻兄弟
$("table~p").css("color","yellow");//table 下所有p标签
$("tr:last").css("color","blue");
$("tr:not(.1)").css("color","blue");//class里没有只是1的tr变为蓝色
$("tr:even").css("color","blue");//基数变色
$("tr:odd").css("color","blue");//偶数变色
$("tr:eq(0)").css("color","pink");//索引为几
$("tr:gt(0)").css("color","pink");大于索引为0的所有行
$("tr:lt(2)").css("color","pink");小于索引为2的所有行
$(":header").css("color","pink");//h1-h6标签
$("div:contains(1)").css("color","pink");//div中含文本(text) 为1的
$(".div4:empty").html("xixi").css("color","pink");//空的赋值 然后给颜色
$("div:has(a)").css("color","pink");
$("p:parent").css("color","pink");
层次选择器:
是根据DOM元素的层级关系,通过后代元素、子元素、兄弟元素进行选择 ;
1. ancestor descendant 获取ancestor元素下边的所有元素 $("form input")
2. parent > child 获取parent元素下边的所有直接child子元素 $("form > input")
3. prev+ next 获取紧随pre元素的后一个兄弟元素 $("label + input")
4. prev~ siblings 获取pre元素后边的所有兄弟元素 $("form ~ input")
内容过滤器:
可见度过滤器:
1.var a=$("form input:hidden").addClass("ss");
//添加一个class属性
2.var b=$("div:hidden").show();
//把隐藏文本的展示出来
3.$("div:visible").css("color","red");
//把展示出来的内容添加样式
属性过滤选择器:
通过元素的属性来选取相应的元素;
[attribute] 选取拥有此属性的元素 $("div[id]")
[attribute=value] 选取指定属性值为value的所有元素
[attribute !=value] 选取属性值不为value的所有元素
[attribute ^= value] 选取属性值以value开始的所有元素
[attribute $= value] 选取属性值以value结束的所有元素
[attribute *= value] 选取属性值包含value的所有元素
[selector1] [selector2]…[selectorN] 复合性选择器,首先经[selector1]选择返回集合A,集合A再经过[selector2]选择返回集合B,集合B再经过[selectorN]选择返回结果集合
举例:
1.$("form input[name='username1']").addClass("a");
//name为username1的添加一个class="a"
2.$("form input[name!='username1']").addClass("a");
//除了name为username1的都添加一个class="a"
3.$("form input[name*='username'][id]").addClass("a");
//name中含有username并且有id属性的添加
子元素过滤选择器:
对某元素中的子元素进行选取;
:nth-child(index/even/odd) 选取索引为index的元素、索引为偶数的元素、索引为奇数的元素 ----- index 从1开始 区别 eq
:first-child 选取第一个子元素
:last-child 选取最后一个子元素
:only-child 选取唯一子元素,它的父元素只有它这一个子元素
表单过滤器:
选取表单元素的过滤选择器;
:input 选取所有<input>、<textarea>、<select >和<button>元素
:text 选取所有的文本框元素
:password 选取所有的密码框元素
:radio 选取所有的单选框元素
:checkbox 选取所有的多选框元素
:submit 选取所有的提交按钮元素
:image 选取所有的图像按钮元素
:reset 选取所有重置按钮元素
:button 选取所有按钮元素
:file 选取所有文件上传域元素
:hidden 选取所有不可见元素
举例:
var a=$(":input").val();
alert(a);
var b=$(":text").val();
alert(b);
$(":button").click(function(){
alert("sssss");//属性过滤器触发事件
})
var b=$(":radio").val();
alert(b);
$(":input").addClass("test");
表单对象属性过滤选择器:
选取表单元素属性的过滤选择器;
:checked 选取所有被选中的元素,如单选框、复选框
:selected 选取所有被选中项元素,如下拉列表框、列表框
举例:
checked:
var a=$("input[name='username']:checked").val();
$("input[name='username']:checked").each(function(){
var c=$(this).val();
alert(c);
})
$("input").each(function(){
var c=$(this).val();
alert(c);
})
selected:
$("#xx").change(function(){
var a=$("select option:selected").val();// 1 2 3
var b=$("select option:selected").text();//佳佳 小曼 老狼
alert(a);
alert(b);
})
Jquery的dom操作
设置或获取HTML、文本和值:
获取html 文本 值:
/* var a=$("#111").html();//显示全部内容
alert(a); */
/* var a=$("#111").text();//只显示文本内容
alert(a); */
/* var a=$("#id_1").val();//获取value值
alert(a); */
赋值html 文本 值:
//覆盖之前div里的内容,重新赋值 :点击
//$("div").html("<a href='#'>点击</a>");
//覆盖之前的div里的内容,展示写进去的内容:<a href='#'>点击</a>
//$("div").text("<a href='#'>点击</a>");
//$(":hidden").val(id);
文档对象属性操作:
获取一个元素的属性 jquery对象.attr(属性名)
为一个元素的属性赋值 jquery对象.attr(属性名, 属性值)
删除一个属性 jquery对象.removeAttr(属性名)
attr({key :value, key :value...}) 同时设置多个属性
举例:
//$("#id_1").attr("class","test");
//$("#id_1").attr({"class":"test","name":"user"});
//文档对象css样式操作
/* $("#id_1").addClass("test");//添加一个class
$("#id_1").removeClass("test");删除一个class */
//$("#id_1").toggleClass("test");//如果有class就删除,没有就添加
文档DOM对象 增删改查:
内部添加:append/appendTo
添加方法1:
$("#se").append("<option value='4'>天津</option>");
添加方法2:
var a="<option value='5'>西藏</option>";
$(a).appendTo("#se");
预添加,添加在第一个
$("#se").prepend("<option value='6'>河北</option>");
外部添加:
添加在第一个之前
$("select option[value='1']").before("<option value='7'>黑龙江</option>");
添加在第二个之后
$("select option[value='2']").after("<option value='8'>海南</option>");
删除节点:remove/empty/detach
$("#1").remove();//删除节点,标签一起删除
var b=$("#2").empty();//清空子节点,只删除文本内容,标签保留
alert(b);
var a=$("#2").detach();
alert(a);
不同点
$("#jj").click(function(){
alert("1");
})
1:
var a=$("#jj").detach();//不删除事件,删除之后click事件还存在
alert(a);
$("body").append(a); */
2:
var a=$("#jj").remove();
$("body").append(a); //删除之后事件也删除*/
替换节点:replaceWith/replaceAll
$("#jj").replaceWith("#cc");//旧节点替换成新节点
var a="<p id='zz'>啧啧</p>";
$(a).replaceAll("#cc");//新节点替换之前的旧节点
克隆:clone
clone克隆
$("#jj").click(function(){
alert(11);//只弹出11警告框
})
$("#jj span").click(function(){
alert(22);///点span先弹出22警告框,再弹出11警告框
})
clone克隆
var a=$("#jj");
$("#jj").after(a.clone(false));//false是不可以克隆事件
$("#cc").replaceWith(a.clone(true));//true是克隆事件
Jquery中事件
关于jquery事件与传统的事件区别
传统的事件只能绑定一个函数;
Jquery事件可以绑定多个函数;
事件处理:
click:
事件绑定方式
1:给xixi绑定事件
$("#xixi").click(function(){
alert("ok");
})
bind:
2:使用bind绑定
$("#xixi").bind("click",function(){
alert("okok");
})
unbind:
$("#xixi").unbind();//解除绑定
事件委派:
live:
绑定事件
$("#xixi").live("click",function(){
alert("okok");
})
die:
$("#xixi").die();//解除绑定
事件:
blur:
$("#id_1").blur(function(){
alert("aa");//失焦
})
focus:
$("#id_1").bind("focus",function(){
alert("bb");//聚焦
})
change:
$("select").bind("change",function(){
alert("bb");
})
$("select").change(function(){
alert("bb");
})
submit:
$("form").submit(function(){
alert("aaa");
return false;
})
event对象:
stopPropagation();
阻止事件传播:
阻止事件默认动作
事件的传播
$("#jj").bind("click",function(){
alert(111111);
})
$("span").click(function(e){
e.stopPropagation();//阻止事件传播
alert(2222);
})