juqery
<!DOCTYPE html>
<html>
<head>
<title></title>
<link type="text/css"rel="stylesheet"href="vender/bootstrap3/css/bootstrap.min.css">
<scriptsrc="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js"></script>
<script>
var $$=jQuery;
$(function(){
//$$("p").css('color','red');
// $$('p').get(0).style.color='red';
$('.box>p').css('color','red');
});
</script>
<style>
</style>
</head>
<body>
<divng-app="myApp" >
<div ng-controller="first" class="container" >
<div class="box">
<p>{{name}}</p>
<p>sssssss</p>
<div>
<p>liyulong</p>
</div>
</div>
</div>
</div>
<scriptsrc="vender/angularjs/angular.js"></script>
<scriptsrc="app/select.js"></script>
<scriptsrc="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js"></script>
</body>
</html>
jquery 子代选择器:
$('.box>p').css('color','red');
或者
$('.box').children('p').css('color','blue');
标签属性选择器
$('p.p1').css('color','red');
后代选择器
$('.boxdiv p').css('color','yellow');
另一种写法:
$('.box div').find('p').css('color','yellow');
群组选择器
$('.p1,#p2').css('color','blue');
兄弟选择器:
$('.box+p').css('color','red');//选择.box的下面的第一个兄弟元素
或者另一种写法:
$('.box').next('p').css('color','red');
$('.box').nextAll('p').css('color','red');//.box同级的下面的所有p元素
$('.box').prev('p').css('color','red'); 选择.box上面的同级的第一个兄弟元素
$('.box').prevAll('p').css('color','red');选择.box上面的同级的所有兄弟元素
$('.box').siblings('p').css('color','red');//选择.box上面和下面的所有同级元素
属性选择器:
$('p[class]').css('color','red');//具有class属性的p标签
$('p[class=p1]').css('color','yellow');
$('p[class!=p1]').css('color','yellow');
<divclass="box">
<p>{{name}}</p>
<p>sssssss</p>
<div>
<p>liyulong</p>
</div>
</div>
过滤器:
<ul>
<li>aaa</li>
<li>bbbb</li>
<li>cccc</li>
</ul>
<ul>
<li>2aaaa</li>
<li>2bbbb</li>
<li>3cccc</li>
</ul>
$('li:first').css('color','red'); 找到第一个li的元素
$('li:last').css('color','red');
$('li:first-child').css('color','red');首先要退回到li的父元素ul,找到ul中的第一个子元素。
$('li:even').css('color','red');给奇数个li元素设置颜色
$('li:odd').css('color','red');
$('li:eq(2)').css('color','red');给第3个元素设置颜色,是从0开始的
$('li:not(.red)').css('color','red');选择class不是red的li元素,返回是个集合。
$('li:gt(1)').css('color','red');//选择大于1的li元素,选择了第3个元素。是从0开始的
内容过滤器:
$('li:contains("bbb")').css('color','red');//选择包含内容为bbb的li标签。
$('li:empty').css('color','red');选择不包含子元素或空文本的元素
$('ul:has(.red)').css('color','red');先选择有class是.red的li 的父元素ul
$(':parent').css('color','red');//选择非空的子元素
$('.red').parent().css('color','red');获得.red元素的父元素。
可见选择器:
$('li:hidden').show();
<ul>
<li style="display:none" >aaa</li>
<li>fffff</li>
<li>cccc</li>
</ul>
$('li:nth-child(2)').css("color",'red');先找到li的父元素ul,在ul找到子地二个子元素
alert($('.red').is('li'));//class 为red元素的
也可以这样写
alert($('.red').is($('li')));//jquery对象
alert($('.red').is($('li').get(2)));//dom元素
jquerydom 操作:
alert($('#box').html());//获取box里的html内容
alert($('#box').text());获取box里的text内容,去掉strong标签,取内容。
$('#box').html('<strong>hhh</strong>');
$('#box').text('liyulong');
$('input').val('beifengwang');//针对的是表单
<inputtype="text" value="wwww">
$('input').val('beifengwang');
<inputtype="radio" value="nan"/>nan
jquery一次性选中表单
$('input').val(['nan','nv','program']);
</div>
<input type="radio"value="nan"/>nan
<input type="radio"value="nv"/>nv
<input type="checkbox"value="program"/>program
</div>
元素的属性操作:
$('#box').attr('title','woshi yuming');//设置title属性为woshi yuming
同时设置多个属性;
$('#box').attr({
'title':'woshi yuming',
'class':'red',
'data':'123'
})
$('div').attr('title',function(index){
return 'woshi'+index+'yuming';
});
$('div').attr('title',function(index,value){
return'woshi'+index+'yuming'+value;
});//如果原来没有value,默认就是undefine
html追加功能:
$('div').html(function(index,value){
return value+'woshi';
});
$('div').removeAttr('title');//去除属性
注意,不建议用attr创建id属性,但是我们也不建议创建class属性。我们有更好的
方法来代替attr。
varobj1=$('div').css(['width','height','color']);//obj得到一个对象数组。
// var obj={one:1,two:2,three:3};
// var obj2=['one','two','three'];
$.each(obj1,function(attr,val){
alert(val.style.color);
})
遍历原生态的数组:
$('div').each(function(index,element){
alert(index+element);
});
css联缀操作:
$('#box').css('color','red').css('background-color','#ccc');
可以这样写
$('#box').css({
'color':'blue',
'background-color':'#eee',
'width':'200px',
'height':'300px'
});
toggleclass切换class,true 切换到类的状态,false回到原来状态
var count=0;
$('#box').click(function(){
$(this).toggleClass('red',count++%2==0);
});
两种样式的切换:
$('#box').click(function(){
$(this).toggleClass(function(){
if($(this).hasClass('blue'))
{
$(this).removeClass('blue');
return 'red';
}else{
$(this).removeClass('red');
return 'blue';
}
});
});
模拟点击操作:
$(function(){
$('div').click(function(){
alert('alent');
});
$('div').trigger('click');
});
trigger数据传递
$('div').click(function(e,data1,data2){
alert(data2);
}).trigger('click',['123','abc']);
//只有一条数据的时候,可以省略中括号,
});
$('div').click(function(e,data1,data2,data3){
alert(data3.user);
}).trigger('click',['123','abc',{user:'li'}]);
});
自定义事件:
$('div').bind('myEvent',function(){
alert('zidingyishijian')
}).trigger('myEvent');
triger的简写事件:
$('div').bind('click',function(){
alert('first');
}).click();
tirgger,和triggerHandler区别:
$('form').bind('submit',function(){
}).triggerHandler('submit');
triggerHandler会取消默认的事件
//trigger可以连缀操作,而triggerHander不可以连缀
$('div').click(function(){
alert('q');
}).trigger('click').css('color','red');
3中区别
$('div').bind('myEvent',function(){
alert('zidingyi');
});
// $('.d3').trigger('myEvent');//会冒泡
$('.d3').triggerHandler('myEvent');//不会冒泡
命名空间:
$('input').bind('click.a',function(){
alert('abc');
});
$('input').bind('click.x',function(){
alert('xyz');
});
$('input').unbind('click.a');
事件委托:
//.bind绑定了3个事件
$('.button').bind('click',function(){
alert('message is not weituo');
});
<divstyle="width: 200px;height: 200px;background: green;"id="box">
<input type="button"class="button" value="bt1"/>
<input type="button"class="button" value="bt1"/>
<input type="button"class="button" value="bt1"/>
</div>
// 使用live绑定的是document,而非button,所以永远会绑定一次事件
$('.button').live('click',function(){
alert('message is not weituo');
});
// 无法动态的绑定事件
$('.button').bind('click',function(){
$(this).clone().appendTo('#box');
});
// 可以动态绑定事件
$('.button').live('click',function(){
$(this).clone().appendTo('#box');
});
//.live绑定在document,而单机。button是冒泡到documentshang,
//点击document时候,需要验证event.type,event.target才会出发
.live是不支持连缀的。
$('.button').die('click');// 和unbind一个意思
.//live语义不清晰,由于他没有指定绑定了谁,所以不清晰
//delegate 语义清晰,绑定谁,谁开头
// $('div').bind('click',function(){
//
// alert('ss');
//
// });
//
// $('.button').bind('click',function(e){
//
// e.stopImmediatePropagation();
// alert('btn');
// });
由delegate替换live
$('#box').delegate('.button','click',function(){
$(this).clone().appendTo('#box');
});
$('#box').undelegate('.button','click');
onoff one的方法:
//普通的绑定.bind
//解绑 .live .delegate
//解除委托:。die .undelegate
//新方法的绑定:
$('.button').bind('click','aa',function(e){
alert(e.data);
});
$('.button').on('click',{user:'li'},function(e){
alert(e.data.user);
});
绑定多个事件
$('.button').on('mouseovermouseout',{user:'li'},function(e){
alert(e.data.user);
});
$('.button').on({
mouseover:function(){
alert('enter');
},
mouseout:function()
{
alert('out');
}
组织默认事件,和冒泡事件。两个都一样,
$('form').on('submit',function(){
return false;
});
$('form').on('submit',false);
//移除事件用off
$('.button').on('click',function(){
alert('tidai');
});
$('.button').off('click');
// 替代.live .delegate
.live是靠document绑定的,而delegate是靠父元素绑定的
$('#box').on('click','.button',function(){
$(this).clone().appendTo('#box');
});
//移除事件委托
$('#').off('click','.button');
one:
不管.bind还是on都无法移除事件
仅仅一次触发
$('.button').one('click',function(){
alert('jin yici chu fa');
});
delegate仅仅执行一次事件
$('#box').one('click','.button',function(){
$(this).clone().appendTo('#box');
});
动画:
$('.show').click(function(){
alert(1);
$('#box').hide();
});
$('.show').click(function(){
alert(1);
$('#box').show(1000);
});
$('.show').click(function(){
alert(1);
$('#box').show('fast');
});
回调函数:
$('.show').click(function(){
alert(1);
$('#box').show('slow',function(){
alert('over');
});
});
//不停的嵌套
$('.show').click(function(){
$('.test').eq(0).show('slow',function(){
$('.text').eq(1).show('slow');
});
});
//列队动画,递归自调用
$('.show').click(function(){
$('.test').first().show('slow',functiontest(){
$(this).next().show('fast',test);
});
});
$('.show').click(function(){
$(this).toggle('slow');
});
ajax
<?php
if($_GET['url']=='qq')
{
echo'jjj';
}
else
{
echo 'pp';
}
?>
$('input').click(function(){
$('#box').load('test.php?url=qq');
});
post提交
$('input').click(function(){
$('#box').load('test.php',{url:'qq'});
});
post提交回调函数
$('input').click(function(){
$('#box').load('test.php',{url:'qq'},function(response,stutas,xhr){
});
});
$('input').click(function(){
$.post('test.json',function(response,status,xhr){
alert(response[0].user);
$('#box').html(response[0].user);
},'json');
});
$.ajax应用:
$('input').click(function(){
$.ajax({
type:'POST',
url:'test.php',
data:{
url:'qq'
},
success:function(response,status,xhr)
{
$('#box').html(response);
}
});
});
$('forminput[type=button]').click(function(){
$.ajax({
type:'POST',
url:'test.php',
data:{
user:$('forminput[name=user]').val(),
email:$('forminput[name=email]').val()
},
success:function(response,status,xhr)
{
$('#box').html(response);
}
});
});
$('forminput[type=button]').click(function(){
$.ajax({
type:'POST',
url:'test.php',
data:$('form').serialize(),
success:function(response,status,xhr)
{
$('#box').html(response);
}
});
});
$.ajaxStart:网络开始
$(document).ajaxStart(function(){
$('.load').show();
}).ajaxStop(function(){
$('.load').hide();
});
一块用:
$('forminput[type=button]').click(function(){
$.ajax({
type:'POST',
url:'test.php',
data:$('form').serialize(),
success:function(response,status,xhr)
{
$('#box').html(response);
}
});
});
$(document).ajaxStart(function(){
$('.load').show();
}).ajaxStop(function(){
$('.load').hide();
});
<form>
user:<input type="text"name="user"/>
email:<input type="text"name="email">
<input type="button"value="submit">
</form>
<spanstyle="display: none" class="load">loading</span>
$('form input[type=button]').click(function(){
$.ajax({
type:'POST',
url:'test.php',
data:$('form').serialize(),
success:function(response,status,xhr)
{
$('#box').html(response);
},
timeout:3000,
global:false ,//全局函数不触发,$(document). ajaxStart(function(){}) 无效
error:function(xhr,errorText,errorStatus)
{
alert('error'+errorStatus+xhr.statusText+xhr.status);
}
});
});
$.post
$.post('text1.php').error(function(){
alert('error');
});
$(document).ajaxError(function(){});
全局的ajax方法:
$(document).ajaxSend(function(){
alert('sending before');
}).ajaxComplete(function(){
alert('request finish');
}).ajaxSuccess(function(){
alert('request success');
}).ajaxError(function(){
alert('request error');
});
$(document).ajaxStart(function(){
$('.load').show();
}).ajaxStop(function(){
$('.load').hide();
});
完整ajax请求:
$('form input[type=button]').click(function(){
$.ajax({
type:'POST',
url:'test.php',
data:$('form').serialize(),
success:function(response,status,xhr)
{
$('#box').html(response);
},
complete:function(){
alert('qing qiu complete');
},
beforeSend:function(){
alert('qing qiu send before');
},
error:function(){
alert('qing qiu error');
}
// //timeout:3000
// // global:false,
// error:function(xhr,errorText,errorStatus)
// {
// alert('error'+errorStatus+xhr.statusText+xhr.status);
// }
//
});
// $.post('text1.php').error(function(){
//
// alert('error');
// });
});
// $(document).ajaxError(function(){});
$(document).ajaxSend(function(){
alert('sending before');
}).ajaxComplete(function(){
alert('request finish');
}).ajaxSuccess(function(){
alert('request success');
}).ajaxError(function(){
alert('request error');
});
$(document).ajaxStart(function(){
$('.load').show();
}).ajaxStop(function(){
$('.load').hide();
});
});
jsonp:
$.ajax({
type : 'POST',
url : 'test.json',
dataType : 'json',
success : function (response, status,xhr) {
alert(response[0].url);
}
});
<?php
$arr =array('a'=>1,'b'=>2,'c'=>3,'d'=>4,'e'=>5);
$result = json_encode($arr);
$callback = $_GET['callback'];
echo $callback."($result)";
?>