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 = "http://apps.bdimg.com/libs/prototype/1.7.1.0/prototype.js"></script>
<script src = "http://apps.bdimg.com/libs/jquery/2.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.com/backbone/0.9.2/backbone.js"></script></p>
<p>ript src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.js"></script></p>
<p>src="http://libs.baidu.com/dojo/1.8.0/dojo.js"></script></p>
<p>t src="http://libs.baidu.com/ext-core/3.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>
暂时就这些，坚持就是胜利，学而不思则惘
浙公网安备 33010602011771号