<script language='text/javasript'>
/*
zendstudio
安装插件apatana
val()匹配第一个选中的元素 .each .css
使用jquery去查找某个对象,如果这个对象(id/class)不存在,jQuery不报错
//ready是页面载入,是所有dom对象都创建OK后,再调用
//ready事件中是比较安全的
$(document).ready(
function(){
}
);
选择器 基础
("*") 匹配所有元素
:first 匹配找到的第一个元素 :last
过滤
:odd
$("table:eq(0) tr:even");匹配所有索引值为偶数的元素,从 0 开始计数
大于 gt() ,等于 eq() ,小于 lt() ,:header匹配如 h1, h2, h3之类的标题元素
:animated 匹配所有正在执行动画效果的元素
.not() 去除所有与给定选择器匹配的元素
层次
1,祖先 后代
$("body div");表示把body下的所有div选中
1,prev + next 表示选择 prev的下一个元素(强调:同一级后面的兄弟,只是一个)
2,prev ~ siblings 表示选择 prev的后面的所有元素(强调:同一级后面所有的兄弟)
内容
根据内容选择你需要的元素
匹配包含给定文本的元素*/
$("div : contains('di')")
//匹配所有不包含子元素或者文本的空元素
$("div : empty")
//匹配含有选择器所匹配的元素的元素 这个元素是他父元素
$("div : has('.mini')")
//这个是元素本身
$("div : .mini")
//匹配含有子元素或者文本的元素
$('div : parent')
/*
可见度
匹配所有的可见元素*/
$('div:visible')
//匹配所有不可见元素,或者type为hidden的元素
$('div:hidden').show() //会style[display:none]<input type="hidden"/>
//选取所有的文本隐藏域,并打印它们的值
$objs=$('input:hidden');//是一个集合
$.each($objs,function(i,obj){
//每循环一次 i自增一次 obj=$objs[i]
window.alert("jquery:"+$(obj).val());
window.alert("dom:"+obj.value);
});
//或者 2
$.each($objs,function(){
//每循环一次 this=$objs[i]
window.alert("dom:"+$this.value);
window.alert("jquery:"+$(this).val());
});
//3
$objs.each(function(){
window.alert("jquery:"+$(this).val());
});
//4
$objs.each(function(i,n){
window.alert("jquery:"+$(n).val());
});
//在jQuery中提供了一个each来遍历我们的对象和数组
var arr2=[{"name":"小米","age":"14"},{"name":"米"},{"name":"小"}];
$.each([1,"sp",4],function(i,n){
alert(i+" "+n); //0,1 1,sp 2,4
alert(i+" "+n.name+n.age);
})
筛选-查找
//获取.one 后面的子元素
childern()
//获取.one 前面的所有兄弟 , 后面的所有兄弟
next(),nextAll() ---> prev(),prevAll()
//获取所有兄弟
siblings()
属性[]
//匹配包含给定属性的元素
$("div[title]")
//匹配给定的属性是某个特定值的元素
$("div[title = \"text\"]")
//匹配所有不含有指定的属性,或者属性不等于特定值的元素。
$("div[title != 'text']")
//匹配给定的属性是以某些值开始的元素
$("div[title ^= 'te']")
//匹配给定的属性是以某些值结尾的元素
$("div[title ^= 'ext']")
//匹配给定的属性是以包含某些值的元素
$("div[title *= 'es']")
//复合属性选择器,需要同时满足多个条件时使用。
$("div[id][title *= 'es']")
我们的过滤方式有两种
1,选出文本中含有abc的div $("div:contains['abc']") //冒号
子元素 根据子元素是父元素下出现的位置来选中
//匹配其父元素下的第N个子或奇偶元素
$("div .one:nth-child(1)")
//匹配第一个子元素
$("div .one:first-child")
//匹配最后一个子元素
$("div .one:last-child")
//如果某个元素是父元素中唯一的子元素,那将会被匹配
$("div .one:only-child")
表单选择器
//匹配所有按钮
var buttons=$(" 表单元素名")[input button file img..],这种方式选择最全
var butons2=$("input[type='button']");这种方式<input type="button"/>
表单对象属性选择器
//匹配所有可用元素 :disabled
$("input[type='text']:enabled").val("hello");
//匹配所有选中的被选中元素(复选框、单选框等,不包括select中的option)
$(":checkbox:checked")
$("input[type='checked']:checked")
//匹配所有选中的option元素
$("select option:selected").text(); //匹配所有元素
过滤器使用方式总结
$("div:contains('di')"); //内容
$("div[type]"); //属性
$("div .one"); //选中div 中含class 为one的div元素
$("div,.one"); //选中div 和 class为one的div元素
/*
1,使用什么样的选择器,根据需求定
2,如果针对文档内容,则使用内容选择器
3,如果是选择父子关系(祖先,后代)元素,则使用层次选择器
4,如果是根据id/class/tagname 使用基本选择器
5,如果选择表单中的元素,则使用表单(对象属性)选择器
6,根据可见性选择元素,则使用可见性选择器
7,如果是某个元素中包含某个属性(属性值),则使用属性选择器
8,!!!如果考虑对选中的元素,要进行过滤,则使用过滤选择器
*/
-------------------------------------------------------------------
jquery操作DOM对象 样式的改变都在内存中发生,文件并没有发生变化
1,xml dom 2,html dom 3,css dom
//查找节点,然后通过attr函数去修改或者设置属性的值
$("#first").attr("class","one");
//追加样式
$("#first").addClass("one");
//移除样式
$("#first").removeClass("one");
//切换样式
$("#first").toggleClass("one");
//判断是否含有某个样式
alert($("#first").hasClass("one"));
文档处理
//使用内部插入 表示在$('#city')内部后面添加一个 $myli对象 1,一步到位
$myli=$('<li id='cp' name='chongqing'>重庆</li>');
$('#city').append($myli);
//传统方法
function test1(){
var myli=document.createElement("li");
myli.setAttribute("id","cq");
myli.setAttribute("name","chongqing");
myli.innerHTML=重庆;
documet.getElementById("city").appendChild(myli);
}
//2,逐步添加我们的对象
$myli=$("<li></li>"); //<==>$myli=$("<li/>");
$myli.text("重庆"); //<li>重庆</li>
$myli.attr("id","cq"); //<li id='cq'>重庆</li>
$myli.attr("name","chongqing");
$('#city').append($myli);
//3,表示吧$muli添加到$("#city")的内部后面
//$a.append($b); <==> $b.appendTo($a);
$muli.appendTo($("#city"));
//在对象内部的最前面加入
$('#city').prepend($myli); //<==>$myli.prependTo($('#city'));
//使用外部插入 1,一步到位
$obj=$("<li id="cd" name="chengdu">成都</li>");
$("#bj").after($obj); //<==> $obj.insertAfter($("#bj"));
//删除节点
$("p").remove();
//清空节点
$("p").empty();
//复制节点 表示复制一份$("p"),但是没有复制事件-要加(true)
$("p").clone(true).insertAfter($('button'));
//替换节点
$obj=$("<input type='button' value='按钮'/><br/>");
$("p").replaceWith($obj); //<==> $obj.replaceAall($("p"));
//可以取值,也可以设置值
1,val(),val(val)
2,html(),html(val)
3,text(),text(val)
4,attr(name) ,attr(name,val)
5,css("css名字"),css("css名字",val)
属性操作
//得到焦点
focus()
//设置默认值
this.defaultValue;
//失去焦点
blur()
removeAttr():删除指定元素的指定属性
jquery and ajax
$(document).ready(function(){
$('#b1').click(function(){
//返回值:jQueryload(url, [data], [callback]) -- [get]data:null , [post]data:"{'user':'zhang'}"
//3,callback data表示从服务器回送的数据 (string)
var send_data={"username":$("#user").val()}
$('#one').load("loadController.php?data"+Math.random(),null,function(data,textStatus,xmlHttpRequest){
$(this).text(data);
//返回json
var objs=eval("("+data+")");
//如果不转objs是dom对象的集合
var $objs=$(objs);
//遍历
$objs.each(function(){
alert(this.res+this.info);
})
//直接取出
window.alert(objs.res+objs.info);
//返回xml
var result=xmlHttpRequest.responseXml;
//取出返回的res
var res=result.gerElementByTagName('res');
window.alert(res[0].childNodes[0].nodeValue);
});
//使用$.post方法
var xmlHttpRequest=$.post("loadController.php",send_data,function (data){
//如果服务器返回的是text
alert(data);
//xml -> dom
var xmlobjs=xmlHttpRequest.responseXML;
})
})
});
</script>
loadController.php
<?php
header("content-type:text/html; charset=utf-8");
//xml
header("content-type:text/xml; charset=utf-8");
//text
echo "ok";
//json
echo "{'res':'ok'}"
//xml
echo "<result><res>ok</res><info>kk</info></result>"
]
?>
JQuary Note
最新推荐文章于 2018-04-04 09:02:03 发布