笔记"/>
jquery个人笔记
一、链式操作
<!DOCTYPE html>
<html>
<head><title></title><script src = "./js.js"></script>
</head>
<body>
<a href="">aaaaaaa</a>
<script>var a = $('a');a.css('color','red').click(function(){//alert(0);a.css('color','blue');return false;});
</script>
<p>这是第一个标签</p>
<p>这是第二个标签</p>
<script>var p = $('p');p.click(function(){alert($(this).html());})
</script>
</body>
</html> 二、dom对象和jquery对象的互相转换
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><p id = "p">1111111</p><script src = "js.js">var p = Document.getElementById('p');//dom对象 dom对象不能调用任何jq方法
alert(p.innerHTML);var p2 = $('p'); //jq对象 jq对象不能使用dom中的方法
alert(p2.html());alert(p2.length); //可用在jq中被重写过alert(p2.toString()); //可用在jq中被重写过</script><input type="text" name="" id="a" value = "111111111"><script>var a = $('#a');//a.value 是不可以的，通过jq得到的对象是一个对象数组collection 加索引后就变成了dom对象alert(a.get(0).value); //第一种转换方法alert(a[0].value); //第二种转换方法a.val(); //jq方法var d1 = document.getElementById('a');//将dom对象转换成jq对象只要$()就可以了
alert($(d1).val())</script>
</body>
</html> 三、释放$符号使jquery和其他框架兼容例如prototype
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><script src = ".7.1.0/prototype.js"></script> <script src = ".1.4/jquery.min.js"></script>
</head>
<body>
<input type="text" name="" id="a" value = "1234"><script>jQuery.noConflict(); //释放jq的$alert($F('a')); //产生$冲突alert(jQuery('#a').val());
var sowhat = jQuery.noConflict(); //释放jq的$ 或者说让出 $
alert($F('a')); //产生$冲突
alert(sowhat('#a').val());
</script> </body> </html>
四、jquery选择器1
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<style></style>
<script src = "js.js"></script>
<script>
$('Document').ready(function(){$('div>a').css('background','red');
})</script>
<script>$('Document').ready(function(){ //此种写法等价于 $(function(){})var p1 = $('#p1'); //id选择器p1.css('background','red');})</script>
<body><div><a href="">abcdefg</a><p><a href="">123456</a></p></div><p id="p1" class="p1">abcdefg</p>
</body>
</html> 五、jquery选择器2
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><script src = 'js.js'></script><style>a{background: green;}.a2{color: green; }p,span{color: green;}</style><script>$(function(){$('.a2').css('color','red'); //此时js比style具有较高的优先级 #为id选择器 .为class选择器
$('a').css('background','black');$('p,span').css('color','gray');$('p+').css('color','red'); //p的下一个标签、
$('p').next().css('color','green');//p的下一个标签
$('a~p').css('color','black'); //a下面的所有P标签
})</script>
</head>
<body><a href="" id="a1" class="a2">321</a><a href="" id ="a5" >1236456789</a><p>11111111</p><span>22222222</span><p>55555555</p>
</body>
</html> 六、基本过滤选择器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>基本过滤选择器</title><script src = 'js.js'></script>
</head>
<style>div{width: 100px;height: 100px;background: red;}
</style>
<body><p>我是第一个标签</p><p>二</p><p class = "a">三</p><p>四</p><p>五</p><h1>1111</h1><h2>2222</h2><h3>3333</h3><div id="go"></div><script>//$('p:first').css('color','red');$('p:last').css('color','green');$('p:not(".a")').css('color','red');//not中也可以加转义符 再加单引号 （除了a之外的所有元素） 多$('p:even').css('color','red'); //偶数个为过滤条件 $('p:odd').css('color','red');//奇数为过滤条件//$('p:eq(3)').css('background','red');//第三个 多$('p:gt(2)').css('color','green');//大于二的$('p:lt(2)').css('color','green');//小于二的$(':header').css('color','green');//选取所有h标签$('#go').animate({'left':'10000'},1000);$(':animated').css('background','green');</script></body>
</html> 七、内容选择器
<!DOCTYPE html>
<html lang="en">
<head>
<script src = 'js.js'></script><meta charset="UTF-8"><title>内容选择器</title>
</head>
<body><p>'使用方法: 加载JS库，复制HTML代码片段（如下所示）到网页。例如，要加载jQuery，将如下所示的代码嵌入到你的网页中即可。</p><p>script src="http://<libs class="bastrong">333333</libs>idu/backbone/0.9.2/backbone.js"></script></p><p>ript src=".0.3/js/bootstrap.js"></script></p><p>src=".8.0/dojo.js"></script></p><p>t src=".1.0/ext-core.js "></script></p><p></p><script>$('p:contains("bootstrap")').css('background','red'); //内容选择器 有bootstrap的修改样式，还可以运用到搜索 多$('p:eq(0)').click(function(){$('p:contains("bootstrap")').show().siblings().hide();})$('p:has(libs)').css('background','red'); //拥有Lbs的p标签 少$('p:empty').css('background','red'); //空的p标签$('p:parent').css('color','green');//选取含有子元素或有文本的元素</script>
</body>
</html> 八、可见性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<script src = 'js.js'></script><meta charset="UTF-8"><title>Document</title>
</head>
<style>div{display: none;}
</style>
<body><div>我是DIV</div><div>我是可见的div</div>
<script>//alert($(':hidden').html());alert($('div:hidden').html());alert($('div:visble').html()); //选取的是可见的div
</script>
</body>
</html> 九、属性选择器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><script src = "js.js"></script><p title="js">郭德纲，男，出生于1973年1月18日，天津人，相声表演艺术家，电影、电视剧演员，电视脱口秀主持人。</p><p title="wo" aaa = "123">1979年投身艺坛，先拜评书前辈高庆海学习评书，</p><p>辗转梨园多年。2012出演电影《车在囧途》。2013年蛇年第一次登上中国中央电视台春节联欢晚会的舞台，并出演电视连续剧《大宅门1912》。</p><p aaa = "234"> 2015年郭德纲自导自演电影《我要幸福》。[2] 同年加盟《欢乐喜剧人》节目[3] 。</p><div><p aaa = "234">日，首档大型单口相声体验式综艺《坑王驾到》火爆网络，郭德纲也因主动“填坑”而</p></div><script>$('div p[aaa="234"]').css('color','red')$('p[aaa="234"]').css('color','red')$('[aaa="234"]').css('color','red')$('p[title][aaa]').css('color','red')</script>
</body>
</html> 十、表单元素过滤选择器
<!DOCTYPE html>
<html lang="en">
<head>
<script src = "js.js"></script><meta charset="UTF-8"><title>Document</title>
</head>
<body>
<form action="表单元素过滤器.html"><input type="text" name="" id="" value = "我是文本框"><input type="password" name="" id="" value = "我是密码"><input type="button" value="我是按钮"><input type="submit" value="我是提交按钮"><input type="radio" name="" id="" value = "我是单选按钮"><input type="checkbox" name="" id="" value ="我是复选按钮"><input type="reset" name="" id="" value= "我是重置按钮"><textarea name="" id="" cols="30" rows="10">我是文本框</textarea><select name="" id=""><option value="1111">111</option><option value="2222">222</option><option value="3333">333</option></select><input type="file" name="" id=""><input type="image" src="" alt=""></form><script>//alert($(':input').length) //所有表单元素全部算进去了$(':text').css('color','red'); //文本框$(':password').css('color','red');$(':radio').css('color','red');$(':checkbox').css('color','red');$('[type = submit]').css('background','blue');</script>
</body>
</html> 十一、dom筛选（is\not map 等）
<!DOCTYPE html>
<html lang="en">
<head>
<script src = 'js.js'></script><meta charset="UTF-8"><title>Document</title>
</head>
<body><p id = 'a1' value = "111" style="color: red">我是第1个P标签</p><p class = 'a2'>我是第2个P标签</p><p>我是第3个P标签</p><p>我是第4个P标签</p><p>我是第5个P标签</p><p>我是第6个P标签</p><p id = "map1"></p><form action=""><input type="text" value = "111"><input type="text" value = "222"><input type="text" value = "333"></form>
</body>
<script>//$('p').eq(0).css('color','red'); //主要用在链式操作//$('p:eq(0)').css('color','green'); //主要用在选择dom//$('p').filter(':last').css('color','red'); //第二个空格中传CSS选择器完全可以//$('p').first('p').css('color','red');$('p').click(function(){if($(this).is('.a2')){$(this).css('color','blue'); //is()方法
}})$('p').not('#a1').css('color','red');alert($('p')[0].style.color);//此处说明jq的对象是dom对象的一个集合//$('p').slice(1,5).css('background','green'); var arr = $('input').map(function(){ //map将结果集中的val集合为一个数组return $(this).val(); //链式操作 顾名思义就是顺序操作了}).get().join(','); //逗号分隔结果成为数组
$('p').filter('#map1').html(arr);alert(typeof arr);
</script>
</html> 十二、遍历查找 each
<!DOCTYPE html>
<html lang="en">
<head>
<script src = 'js.js'></script><meta charset="UTF-8"><title>Document</title>
</head>
<body><form action=""><input type="text" value = "第一个"><input type="text" value = "第二个"><input type="text" value = "第三个"><input type="text" value = "第四个"></form>
</body>
<script>/*for(i = 0 ; i<$('input').length; i++){alert($('input')[i].value);};*/$('input').each(function(){alert($(this).val()); //相当于分别执行 ajax时用的是工具函数 $.each
})</script>
</html> 十三、特殊符号的处理（转义字符）
<!DOCTYPE html>
<html lang="en">
<head>
<script src = 'js.js'></script><meta charset="UTF-8"><title>Document</title>
</head>
<body><form action="">男<input type="checkbox" name = "genter[]" value = "男">女<input type="checkbox" name = "genter[]" value = "女">保密<input type="checkbox" name = "genter[]" value = "保密"></form>
</body>
<script>$('input[name=genter\\[\\]]').click(function(){ //添加两个转义符 单双引号需要一个转义符 方括号用两个alert($(this).val());})
</script>
</html> 十四、dom遍历查找（prev next parent children）
CTYPE html>
<html lang="en">
<head>
<script src = 'js.js'></script><meta charset="UTF-8"><title>Document</title>
</head>
<body><div id="outer" style = "position: relative;">outer<div id="wrap" style = "position: absolute; left:10px;top:20px;">wrap<p id = "p1">我是第1个<span>nihao</span>p标签</p><p id = "p2">我是第2个p标签</p><p>我是第3个p标签</p><div>我是div</div></div></div><script>//$('#wrap').children(':eq(0)').css('color','red');//$('#wrap p:first').css('color','red');//$('#wrap').children('p').css('color','red'); //字元素//$('#p1').parent().parent().css('background','red'); //爷爷节点 一个parent是父节点//$('#p1').parents('#outer').css('background','red'); //parents里面传参//$('#p1').offsetParent().css('background','red'); //找第一个position属性//$('#p1').next().css('color','blue'); //下一个紧邻的兄弟元素//$('#p1').nextAll().not('div').css('color','blue'); //next中可以添加参数//$('#p2').prev().css('border','solid blue 10px')//$('#p2').siblings('div').css('border','solid red 10px'); //p2的所有兄弟元素 非常常用$('span').parent().css('border','solid red 10px').end().css('border','solid blue 10px');//两句合成一句，end表示第一个对象(终止在当前链的最新过滤操作，并返回匹配的元素的以前状态) 常用</script>
</body>
</html> 十五、表格各行变色（奇偶选择 even odd）
<!DOCTYPE html>
<html lang="en">
<head>
<script src = 'js.js'></script><meta charset="UTF-8"><title>Document</title><style>#table {width:500px;border:1px solid red;border-collapse: collapse;}td{border:1px solid red;}</style>
</head>
<body><table id = "table"><tr><td>111111</td><td>222222</td><td>333333</td><td>444444</td></tr><tr><td>555555</td><td>666666</td><td>777777</td><td>888888</td></tr><tr><td>111111</td><td>222222</td><td>333333</td><td>444444</td></tr><tr><td>555555</td><td>666666</td><td>777777</td><td>888888</td></tr><tr><td>111111</td><td>222222</td><td>333333</td><td>444444</td></tr><tr><td>555555</td><td>666666</td><td>777777</td><td>888888</td></tr></table>
</body>
<script>
/* var tabl = document.getElementById('table');var aTr = document.getElementsByTagName('tr');alert(aTr.length);var i = 0; for(i=0;i<aTr.length;i++){if(!(i%2 == 0)){aTr[i].style.background = 'red'; //js原生的方法变色//return true;}else{//return true;}}*/
</script><script>$('#table tr:even').css('color','red');$('tr:odd').css('color','blue');$('#table tr').filter(':even').css('background','red').end().filter(':odd').css('background','blue'); //重要哦</script>
</html> 十六、tab标签页
<!DOCTYPE html>
<html lang="en">
<head>
<style>*{padding: 0;margin: 0;}ul{list-style-type: none;}#ul{height: 30px;margin-bottom: 10px;}#ul li {height: 30px;line-height: 30px;padding: 0 15px;border: 1px solid gray;float: left;margin-right: 3px;cursor: pointer;}#ul li.current {background: #abcdef;}#content div{width: 300px;height: 200px;border: 1px solid red;border-collapse: collapse;display: none;}#content div.php{display: block;}
</style><script src = 'js.js'></script><meta charset="UTF-8"><title>Document</title>
</head>
<body><ul id="ul"><li class = 'current'>php</li><li>ruby</li><li>python</li></ul><div id="content"><div class = "php">php。。。。。。介绍</div><div class = "ruby">ruby。。。。。。介绍</div><div class = "python">python。。。。。。介绍</div></div><script>$('li').click(function(){//$(this).css('background','#abcdef');//$(this).siblings().css('background','white');$(this).addClass('current').siblings().removeClass('current').parent().next().children().eq($(this).index()).show().siblings().hide(); //添加class//var m = $(this).html(); //$('.'+m).css('display','block').siblings().css('display','none');//class选择法//$('#content div').eq($(this).index()).addClass('php').siblings().removeClass('php');//索引选择法$('#content div').eq($(this).index()).show().siblings().hide();})</script>
</body>
</html> 十七、选择器的优化
<!DOCTYPE html>
<html lang="en">
<head>
<script src = 'js.js'></script><meta charset="UTF-8"><title>Document</title>
</head>
<body>能用id选择器 就选id .class 选择时前面加上标签名这样会快很多，否则浏览器会把整个页面遍历一下，因为class名是不唯一的<p class="a1"></p><div id = "di"><div><ul id="u1"><li>aaa</li><li>111</li><li></li></ul></div></div><script>$('p.a1').css('color','red');//$('p.a1').addClass('a2');$('#di').find('li:first').css('color','red');</script>
</body>
</html> 暂时就这些，坚持就是胜利，学而不思则惘
转载于:.html
更多推荐
jquery个人笔记
发布评论