jquery基础

来源：互联网发布：ubuntu查看服务命令编辑：程序博客网时间：2024/04/29 17:12

juqery

<!DOCTYPE html>

<html>

<head>

<scriptsrc="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js"></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" >

<p>sssssss</p>

<div>

<p>liyulong</p>

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

<div>

<p>liyulong</p>

</div>

过滤器:

<ul>

</ul>

<ul>

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

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

</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)";

0 0