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>
暂时就这些，坚持就是胜利，学而不思则惘
jquery个人笔记的更多相关文章
- jQuery学习笔记(一)jQuery选择器
目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...
- jQuery 学习笔记
jQuery 学习笔记 一.jQuery概述 宗旨: Write Less, Do More. 基础知识: 1.符号$代替document.getElementById( ...
- jQuery学习笔记（一）：入门
jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操 ...
- jQuery学习笔记 - 基础知识扫盲入门篇
jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...
- jQuery整理笔记文件夹
jQuery整理笔记文件夹 jQuery整理笔记一----jQuery開始 jQuery整理笔记二----jQuery选择器整理 jQuery整理笔记三----jQuery过滤函数 jQuery整理笔 ...
- JQuery学习笔记——层级选择器
JQuery学习笔记--层级选择器 上一篇学习了基础的五种选择,分别是id选择器,class选择器,element选择器,*选择器 和 并列选择器.根据手册大纲,这篇学习的是层级选择器. 选择器: 1 ...
- jQuery学习笔记之Ajax用法详解
这篇文章主要介绍了jQuery学习笔记之Ajax用法,结合实例形式较为详细的分析总结了jQuery中ajax的相关使用技巧,包括ajax请求.载入.处理.传递等,需要的朋友可以参考下 本文实例讲述了j ...
- jQuery 学习笔记：jQuery 代码结构
jQuery 学习笔记:jQuery 代码结构 这是我学习 jQuery 过程中整理的笔记,这一部分主要包括 jQuery 的代码最外层的结构,写出来整理自己的学习成果,有错误欢迎指出. jQuery ...
- jQuery:自学笔记(5)——Ajax
jQuery:自学笔记(5)——Ajax 使用Ajax快捷函数 说明 出于简化AJAX开发工作的流程,jQuery提供了若干了快捷函数. 实例 1.显示 test.php 返回值(HTML 或 XML ...
- jQuery:自学笔记(4)——事件与事件对象
jQuery:自学笔记(4)——事件与事件对象 jQuery中的事件 什么是事件 所谓事件,就是被对象识别的操作,即操作对象队环境变化的感知和反应,例如单击按钮或者敲击键盘上的按键. 所谓事件流,是指 ...
随机推荐
- in和exists的区别与SQL执行效率
in和exists的区别与SQL执行效率最近很多论坛又开始讨论in和exists的区别与SQL执行效率的问题,本文特整理一些in和exists的区别与SQL执行效率分析 SQL中in可以分为三类: 1 ...
- java 对视频和图片进行加密解密
import java.io.File;import java.io.FileInputStream;import java.io.FileNotFoundException;import java. ...
- 教你50招提升ASP.NET性能（十三）：精选技巧集合
(19)A selection of tips 招数19: 精选技巧集合 Including height and width in <img /> tags will allow you ...
- XML文件
XML 指可扩展标记语言(eXtensible Markup Language) XML 被设计用来传输和存储数据. 什么是 XML? XML 指可扩展标记语言 XML 是一种标记语言,非常类似 HT ...
- UART与USART的差别
UART与USART都是单片机上的串口通信,他们之间的差别例如以下: 首先从名字上看: UART:universal asynchronous receiver and transmitter通用异步 ...
- Indesign多媒体富交互插件【MagBuilder】与iOS app 【MagViewer】介绍
[写在前面]进园子有一段时间了,从来都是看别人的文章,自己的一点东西都记在本地笔记里,现在想把一些东西拿来出分享,希望能够认识一些志同道合的朋友和老师. 学习Adobe插件开发的初衷是为了给PS做插件 ...
- POJ_1365_Prime_Land
//懒得解释 #include <iostream> #include <cstring> #include <cmath> #include <cstdio ...
- iOS开发——新特性OC篇&IOS9 SDK新特性
iOS9 SDK新特性 WWDC 2015苹果开发者大会是移动开发者一年一度的盛会,InfoQ中文站除了第一时间整理Keynote内容分享给大家之外,还邀请了资深的一线开发者分享他们的收获.本文为王巍 ...
- Preparing for Different Databases
Preparing for Different Databases In the previous chapter, we created a PostRepository that returns ...
- Socket异步通信学习二
接下来是服务器部分,采用异步模式,新建了一个AsynServer类,用于存放socket服务器代码,主要有4个方法: 有一个全局socket,下面四个方法中都用到. Socket socket = n ...