jQuery学习笔记
jQuery的优势：
1.轻量级(70k左右)
2.强大的选择器
3.出色的DOM操作封装
4.完善的事件和事件对象兼容机制
5.完善的ajax
6.不污染全局变量($可随时交出控制权)
7.出色的浏览器兼容
8.方便的链式操作
9.隐式迭代(一般情况下不需要for循环遍历dom对象)
10.完善的文档(官方文档相当完备，官方blog每次更新都会有详细说明)
11.丰富的插件
jQuery的不足：
1.不能向下兼容
2.插件兼容
3.插件之间冲突
4.在大型框架中，特别是在开发后台UI框架的时候，jQuery对于动画来说不太给力，需要引用jQuery UI来进行弥补
jQuery选择器的优势：
1.完全支持css1.0~css2.0选择器，支持部分css3选择器，学习曲线平缓，可以快速上手
2.完美的容错机制，即使页面上没有该元素，jQuery也不会报错
第1节课demo1
<html lang="en">
<head>
<title>第一节课demo1——演示jQuery的优势之——方便的链式操作title>
head>
<body>
<a href="#">aaaaaa>
<script>
var a = document.getElementsByTagName("a")[0];
a.style.color = "red";
a.onclick=function() {
this.style.border = "10px solid #f90";
};
script>
body>
html>
第1节课demo2
<html lang="en">
<head>
<title>第一节课demo2——演示jQuery的优势之——方便的链式操作title>
<script src = "jquery.min.js">script>
head>
<body>
<a href = "#">aaaa>
<script>
var a = $("a");
a.css("color","red").click(function(){
$(this).css("border","10px solid #9aa9aa");
})
script>
body>
html>
第1节课demo3
<html lang="en">
<head>
<title>第一节课demo3——演示jQuery的优势之——隐式迭代title>
head>
<body>
<p>我是第1个标签p>
<p>我是第2个标签p>
<p>我是第3个标签p>
<script>
var p = document.getElementsByTagName("p");
for (var i = 0; i < p.length; i++) {
p[i].onclick=function() {
alert(this.innerHTML);
};
}
script>
body>
html>
第1节课demo4
<html lang="en">
<head>
<title>第一节课demo4——演示jQuery的优势之——隐式迭代title>
<script src = "jquery.min.js">script>
head>
<body>
<p>我是第1个标签p>
<p>我是第2个标签p>
<p>我是第3个标签p>
<script>
var p = $('p');
p.click(function() {
alert($(this).html());
});
script>
body>
html>
第1节课demo5
<html lang="en">
<head>
<title>第一节课demo5title>
<script src ="jquery.min.js">script>
<script>
window.onload = function() {
alert(1);
};
window.onload = function() {
alert(2);
};
window.onload = function() {
alert(3);
};
script>
head>
<body>
<p>
1.轻量级(70k左右)
2.强大的选择器
3.出色的DOM操作封装
4.完善的事件和事件对象兼容机制
5.完善的ajax
6.不污染全局变量($可随时交出控制权)
7.出色的浏览器兼容
8.方便的链式操作
9.隐式迭代(一般情况下不需要for循环遍历dom对象)
10.完善的文档(官方文档相当完备，官方blog每次更新都会有详细说明)
11.丰富的插件
p>
body>
html>
第2节课demo1
<html lang="en">
<head>
<title>第二节课demo1——DOM对象和jQuery对象的区别title>
<script src = "jquery.min.js">script>
head>
<body>
<p id = "textp">dom对象和jQuery对象的区别p>
<script>
// var p = $('#textp');
// alert(p.html());
var p = document.getElementById('textp');
alert(p.innerHTML);
script>
body>
html>
第2节课demo2
<html lang="en">
<head>
<title>第二节课demo2——jQuery对象和DOM对象之间的相互转化title>
<script src = "jquery.min.js">script>
head>
<body>
<input type = "text" id = "test" value = "123">input>
<script>
// var test = $('#test');
// alert(test.val());
// 1.DOM对象转为jQuery对象——使用index
// alert(test[0].value);
// 2.DOM对象转为jQuery对象——使用get方法
// alert(test.get(0).value);
var test = document.getElementById('test');
// alert(test.value);
// jQuery对象转为DOM对象——只需要加上$()即可
alert($(test).val());
script>
body>
html>
第2节课demo3
<html lang="en">
<head>
<title>第二节课demo3——解决jQuery库和其它库的共存title>
<script src = "jquery.min.js">script>
<script src = "prototype.js">script>
head>
<body>
<input type = "text" id = "a" value = "aaa">input>
<script>
jQuery.noConflict()
// var sowhat = jQuery.noConflict()
alert($F('a'));
alert(jQuery('#a').val());
script>
body>
html>
第3节课demo1
<html lang="en">
<head>
<title>第三节课demo1——演示jQuery之出色的浏览器兼容title>
<script src = "jquery.min.js">script>
// 在IE6中不能正常显示
<style>
div>a{color:red;}
style>
<script>
// 在IE6中能正常显示
$(function(){
$('div>a').css('color',red);
});
script>
head>
<body>
<div>
<a>123a>
<p><a>12345678a>p>
div>
body>
html>
第3节课demo2
<html lang="en">
<head>
<title>第三节课demo2——jQuery完美的容错机制title>
<script src = "jquery.min.js">script>
head>
<script>
window.onload=function() {
var p1 = document.getElementById("test2");
p1.style.color = "red";
}
/**$(function() {
var p1 = $("#test2");
p1.css('color','red');
});**/
script>
<body>
<input id = "test" type = "text" value = "1234"/>
body>
html>
第3节课demo3
"en">
第三节课demo3——jQuery选择器种类
'test0'>1234567
'test'>1234
'test2'>12345
'test3'>123456
'test4'>1234567
第4节课demo1
<html lang="en">
<head>
<script src = "jquery.min.js">script>
<title>第四节课demo1——基本过滤选择器title>
<style>
#go{
width:100px;
height:100px;
background:green;
position:absolute;
left:0;
top:0;
}
style>
head>
<body>
<p><span>我是span>第1个<em>标签em>p>
<p>我是第2个标签p>
<p class = "a">我是第3个标签p>
<p>我是第4个标签p>
<p>我是第5个标签p>
<p>我是第6个标签p>
<h1>我是h1标签h1>
<h2>我是h2标签h2>
<h3>我是h3标签h3>
<h4>我是h4标签h4>
<h5>我是h5标签h5>
<h6>我是h6标签h6>
<div id = "go">div>
<script>
// $('p:first').css('background','red');
// $('p:last').css('background','blue');
// $("p:not('.a')").css('background','blue');
// $('p:not(\'.a\')').css('background','blue');
// $('p:even').css('background','blue');
// $('p:eq(0)').css('background','blue');
// $('p:gt(1)').css('background','blue');
// $('p:lt(1)').css('background','blue');
// $('h1').css('background','blue');
// $('h6').css('background','yellow');
$('#go').animate({'left':'500'},1000);
// 选中所有的动画元素将其背景色变为黄色
$(':animated').css("background","yellow");
script>
body>
html>
第4节课demo2
<html lang="en">
<head>
<script src = "jquery.min.js">script>
<title>第四节课demo1——内容过滤选择器title>
<style>
p{height:30px;line-height:30px;}
style>
head>
<body>
<p>1.选取含有文<strong>本内容strong>的元素p>
<p>2.:has()选择指<strong>本内容strong>定元素的元素p>
<p>3.:empty选择不包含子元素或文本空元素p>
<p>p>
<p><a href="###">a>p>
<p>4.:选取含有子元素或者文本的元素p>
<script>
// $('p:contains(\'has()选择指定元\')').css('background','yellow').show().siblings().hide();
// $('p:has(strong)').css('background','red');
// empty要求没有文本，而且没有子元素
// $('p:empty').css('background','blue');
$('p:parent').css('background','orange');
script>
body>
html>
第4节课demo3
<html lang="en">
<head>
<script src = "jquery.min.js">script>
<title>第四节课demo3——可见性选择器title>
<style>
/* .hide{opacity:0.2} */
.hide{display:none}
style>
head>
<body>
<div class="hide">我是个不可见的DIVdiv>
<div>我是个可见的DIVdiv>
<script>
// alert($('div:hidden').html());
alert($('div:visible').html());
script>
body>
html>
第5节课demo1
<html lang="en">
<head>
<script src = "jquery.min.js">script>
<title>第五节课demo1——其它选择器title>
<style>
#test{display:none;/**apacity:0;visibility:hidden;**/}
style>
head>
<body>
<div>
<input type = "text" value = "我是文本"/>
<input type = "text" value = "我是不能修改的文本" disabled = "disabled"/>
<input type = "submit" value = "我是提交按钮"/>
<input type = "button" value = "我是按钮"/>
<input type = "password" value = "我是密码框"/>
<input type = "file" value = "我是文件"/>
<input type = "radio" value = "我是单选按钮"/>
<input type = "image" value = "我是图片选择按钮"/>
<input type = "reset" value = "我是重置按钮"/>
<input type = "checkbox" value = "我是复选按钮"/>
<input type = "hidden" value = "我是隐藏文本"/>
<select>
<option value = "选择一">option>
<option value = "选择二">选择二option>
<option value = "选择三" selected = "selected">选择三option>
select>
<textarea value = "我是文本框" id = "test">textarea>
div>
<script>
// $('p[myattr="testattr"]').css('background','red');
// $('p[myattr="testattr"][title]').css('background','red');
// $('p[title]').css('background','red');
// alert($(':input').length);
// alert($(':text').length);
// alert($(':text').length);
// $(':text').css('background','red');
// alert($(':image').val());
// alert($('input[type=checkbox]').val());
// alert($('div:visible').html());
// alert($('div:hidden').val());
alert($('select[selected=selected]').val());
script>
body>
html>
第6节课demo1
<html lang="en">
<head>
<title>第六节课demo1——jQuery筛选title>
<script src = "jquery.min.js">script>
head>
<body>
<p class="first">我是第个1元素p>
<p id="second">我是第个2元素p>
<p>我是第个3元素p>
<p>我是第个4元素p>
<p>我是第个5元素p>
<p>我是第个6元素p>
<script>
// $("p").eq(0).css("background","red");
// $("p").filter(':odd').css("background","red");
// $("p").filter(':even').css("background","red");
// $("p").filter('.first').css("background","red");
// $("p").filter('#second').css("background","red");
// $("p").first().css("background","red");
// $("p").last().css("background","red");
// alert($("p").is());
/**$('p').click(function(){
if ($(this).is(".first")){
$(this).css("background","red");
}
});**/
// $("p").not(".first").css("background","red");
/**var arr = $('input').map(function(){
return $(this).val();
}).get().join(',');
alert(typeof arr);
$('p').html(arr);**/
// $('p').slice(0,1).css("background","red");
$('p').slice(-2,-1).css("background","red");
script>
body>
html>
第6节课demo2
<html lang="en">
<head>
<script src = "jquery.min.js">script>
<title>第六节课demo1——jQuery遍历title>
head>
<body>
<form>
<input type="text" name="" value="我是第1个input值">input>
<input type="text" name="" value="我是第2个input值">input>
<input type="text" name="" value="我是第3个input值">input>
<input type="text" name="" value="我是第4个input值">input>
<input type="text" name="" value="我是第5个input值">input>
form>
<script>
// $("#wrap").children('p').css("background","red");
// $("#wrap").parents().css("background","red");
// $("#wrap").parents('#outer').css("background","red");
// $("#p1").nextAll().css("background","red");
// $("#p1").nextAll('p').css("background","red");
// $("#p2").prev().css("background","yellow");
// $("#p4").prevAll().css("background","yellow");
// $("#p4").prevAll('#p1').css("background","yellow");
// $('span').parent().css("background","red").end().css("background","yellow");
// $('#p1').nextAll().addBack().css("background","red");
$('input').each(function(){
alert($(this).val());
});
script>
body>
html>
第6节课demo3
<html lang="en">
<head>
<script src = "jquery.min.js">script>
<title>第六节课demo3——特殊符号的处理：使用转义符title>
head>
<body>
<form>
<input type="checkbox" name="gender[]" value = "男">男input>
<input type="checkbox" name="gender[]" value = "女">女input>
<input type="checkbox" name="gender[]" value = "保密">保密input>
<input type="submit" name="gender">提交input>
<input type="reset" name="gender">重写input>
form>
<script>
$("input[name='gender\\[\\]']").click(function() {
alert($(this).val());
});
script>
body>
html>
第7节课demo1
<html lang="en">
<head>
<script src = "jquery.min.js">script>
<title>第七节课demo1——表格隔行变色title>
<style>
#mytable{
width:500px;
border:1px solid red;
border-collapse:collapse;
}
#mytable td{
border:1px solid red;
}
style>
head>
<body>
<table id="mytable">
<tr>
<td>11111td>
<td>22222td>
<td>33333td>
<td>44444td>
tr>
<tr>
<td>aaaaatd>
<td>bbbbbtd>
<td>ccccctd>
<td>dddddtd>
tr>
<tr>
<td>11111td>
<td>22222td>
<td>33333td>
<td>44444td>
tr>
<tr>
<td>aaaaatd>
<td>bbbbbtd>
<td>ccccctd>
<td>dddddtd>
tr>
<tr>
<td>11111td>
<td>22222td>
<td>33333td>
<td>44444td>
tr>
<tr>
<td>aaaaatd>
<td>bbbbbtd>
<td>ccccctd>
<td>dddddtd>
tr>
<tr>
<td>11111td>
<td>22222td>
<td>33333td>
<td>44444td>
tr>
<tr>
<td>aaaaatd>
<td>bbbbbtd>
<td>ccccctd>
<td>dddddtd>
tr>
<tr>
<td>11111td>
<td>22222td>
<td>33333td>
<td>44444td>
tr>
<tr>
<td>aaaaatd>
<td>bbbbbtd>
<td>ccccctd>
<td>dddddtd>
tr>
table>
<script>
/*var trs = $('#mytable tr');
for (var i = 0; i < trs.length; i++) {
if (i%2 == 0) {
// trs[i].style.background="#fedcba";
$(trs[i]).css("background","#fedcba");
} else {
// trs[i].style.background="#abcdef";
$(trs[i]).css("background","#abcdef");
}
}*/
/*$('#mytable tr:even').css("background","#abcdef");
$('#mytable tr:odd').css("background","#fedcba");*/
$('#mytable tr').filter(':even').css("background","#abcdef").end().filter(':odd').css("background","#fedcba");
script>
body>
html>
第8节课demo1
<html lang="en">
<head>
<script src = "jquery.min.js">script>
<title>第八节课demo1——原生js的tab标签页title>
<style>
*{
padding: 0;
margin: 0;
}
ul{
list-style-type: none;
}
body{
margin: 50px;
}
#ul{
height: 30px;
margin-bottom: 10px;
}
#ul li{
height: 30px;
line-height: 30px;
padding: 0 15px;
border: 1px solid #abcdef;
float: left;
margin-right: 3px;
cursor: pointer;
}
#ul li.current{
background: #abcdef;
}
#content div{
width: 300px;
height: 200px;
border: 1px solid #abcdef;
display: none;
}
#content div.show{
display: block;
}
style>
head>
<body>
<ul id = "ul">
<li class="current">javali>
<li>rubyli>
<li>pythonli>
ul>
<div id = "content">
<div class="show">java的介绍div>
<div>ruby的介绍div>
<div>python的介绍div>
div>
<script>
var ul = document.getElementById("ul");
var li = ul.getElementsByTagName("li");
var content = document.getElementById("content");
var div = content.getElementsByTagName("div");
for (var i = 0; i < li.length; i++) {
li[i].index=i;
li[i].onclick=function() {
for (var i = 0; i < li.length; i++) {
li[i].className="";
div[i].style.display="none";
}
div[this.index].style.display="block";
this.className="current";
}
}
script>
body>
html>
第8节课demo2
<html lang="en">
<head>
<script src = "jquery.min.js">script>
<title>第八节课demo1——jQuery的tab标签页title>
<style>
*{
padding: 0;
margin: 0;
}
ul{
list-style-type: none;
}
body{
margin: 50px;
}
#ul{
height: 30px;
margin-bottom: 10px;
}
#ul li{
height: 30px;
line-height: 30px;
padding: 0 15px;
border: 1px solid #abcdef;
float: left;
margin-right: 3px;
cursor: pointer;
}
#ul li.current{
background: #abcdef;
}
#content div{
width: 300px;
height: 200px;
border: 1px solid #abcdef;
display: none;
}
#content div.show{
display: block;
}
style>
head>
<body>
<ul id = "ul">
<li class="current">javali>
<li>rubyli>
<li>pythonli>
ul>
<div id = "content">
<div class="show">java的介绍div>
<div>ruby的介绍div>
<div>python的介绍div>
div>
<script>
$("#ul li").click(function() {
/*$(this).addClass("current").siblings().removeClass("current");
$("#content>div").eq($(this).index()).show().siblings().hide();*/
$(this).addClass("current").siblings().removeClass("current")
.parent().next().children("div")
.eq($(this).index()).show().siblings().hide();
});
script>
body>
html>
第9节课demo1
<html lang="en">
<head>
<script src = "jquery.min.js">script>
<title>第九节课demo1——title>
<style>
.a{
background: red;
}
.aa{
color: #fff;
}
.b{
background: #abcdef;
}
style>
head>
<body>
<p title="js" class="a aa">11111p>
<script>
// var newElement = $('div标签');
// $('body').append(newElement);
// var newElement = "我是用字符串方法创建的标签";
// $('body').append(newElement);
// var strong = $('我是被插入的新节点');
// $('p').append(strong);
// strong.appendTo($('p'));
// $('p').prepend(strong);
// strong.prependTo($('p'));
// $('p').after(strong);
// $('p').before(strong);
// $('p').wrap('');
// $('p').wrapAll('');
// $('p').wrapInner('111');
/*$('a').click(function() {
alert(1111);
});
var newA = $('a').clone(true); // 默认false
$('body').append(newA);*/
// $('p').replaceWith('我是strong标签');
// $('我是strong标签').replaceAll($('p'));
// $('p').attr('title','livescript');
// $('p').attr('class','b');
// $('p').removeAttr('class');
script>
body>
html>
第10节课demo1
<html lang="en">
<head>
<script src = "jquery.min.js">script>
<title>第10节课demo1——title>
<style type="text/css">
/*.bgred{
background: red;
}
.white{
color:#fff;
}
p{
height: 30px;border:10px solid red;padding:10px;margin:10px;
}
*{
margin:0;
}
p{
margin:50px;
}*/
/*div{
position: relative;
left: 20px;
top: 20px;
width: 200px;
height: 200px;
background: red;
}
p{
position: absolute;
left: 50px;
top:100px;
width: 50px;
height: 50px;
background: yellow;
}*/
input{
position: fixed;
top: 50px;
}
style>
head>
<body style="height:8000px">
<input type="button" name="" value="滚动条"/>
<script type="text/javascript">
// $('p').addClass('bgred').addClass('white');
//$('p').addClass('bgred white');
/*$('p').click(function() {
$('p').toggleClass('bgred white');
});*/
// $('p').css('background','red').css('color','white');
/*$('p').css({
'background':'red',
'color':'white',
'border':'10px solid #abcdef',
});*/
// alert($('p').innerHeight());
// innerHeight()方法获得到的高度不把border和margin计算进去，但会把padding值计算进去
// outerHeight()方法如果参数不写，为默认值false，不会把margin值计算进去，如果参数为true，会把border，margin，padding都计算进去
/*alert('我是outerHeight获得到的高度：'+$('p').outerHeight());
alert('我是innerHeight获得到的高度：'+$('p').innerHeight());*/
/*var a = $('p').offset();
alert(a.left);*/
/*var a = $('p').position();
var b = $('p').offset();
alert(a.left);
alert(b.left);*/
$('input').click(function() {
alert($(window).scrollTop());
});
script>
body>
html>
第11节课demo1
<html lang="en">
<head>
<script src = "jquery.min.js">script>
<title>第11节课demo1——设置和获取节点内的html和文本title>
head>
<body>
<p>111<strong style="background: red">22strong>111p>
<script type="text/javascript">
// text()有参数时修改标签的值，没有参数时返回标签的值
// 如果里面有子标签，则只能通过html获得到子标签的内容
// alert($('p').html());
// alert($('p').text());
// $('p').text('22222');
script>
body>
html>
第12节课demo1
<html lang="en">
<head>
<script src = "jquery.min.js">script>
<title>第12节课demo1——实例title>
<style type="text/css">
table{
width: 600px;
border: 1px solid #abcdef;
border-collapse: collapse;
}
tr{
height: 30px;
}
th{
border: 1px solid #abcdef;
}
td{
border: 1px solid #abcdef;text-align: center;
}
td a{
margin-right: 5px;color: #f00;
}
.popDiv{
width: 500px;
border: 1px solid red;
padding: 10px;
position: absolute;
left: 50%;
margin-left: -250px;
top: 100px;
background: #fff;
display: none;
}
.popDiv p{
border-bottom: 1px solid red;
}
style>
head>
<body>
<table id = "table">
<tr>
<th>姓名th>
<th>年龄th>
<th>身高th>
<th>工资th>
<th>操作th>
tr>
<tr>
<td>张三td>
<td>26td>
<td>176td>
<td>12000td>
<td><a href="#" class='view'>查看a><a href="#">修改a><a href="#" class='del'>删除a>td>
tr>
<tr>
<td>李四td>
<td>25td>
<td>167td>
<td>10000td>
<td><a href="#" class='view'>查看a><a href="#">修改a><a href="#" class='del'>删除a>td>
tr>
<tr>
<td>王五td>
<td>30td>
<td>170td>
<td>15000td>
<td><a href="#" class='view'>查看a><a href="#">修改a><a href="#" class='del'>删除a>td>
tr>
table>
<div class = 'popDiv'>
<p><strong>姓名：strong><span>span>p>
<p><strong>年龄：strong><span>span>p>
<p><strong>身高：strong><span>span>p>
<p><strong>工资：strong><span>span>p>
<a href="#" class = 'close'>关闭a>
div>
<script>
$('.view').click(function() {
// $('.popDiv').show();
var maskHeight = $(document).height();
var maskWidth = $(document).width();
// 添加遮罩测层
$('').appendTo($('body'));
$('div.mask').css({
'opacity': 0.4,
'background': '#000',
'position': 'absolute',
'left': 0,
'top': 0,
'width': maskWidth,
'height': maskHeight,
'z-index': 2
});
var arr = [];
$(this).parent().siblings().each(function(){
arr.push($(this).text());
// alert($(this).text());
});
// alert(arr);
$('.popDiv').show().children().each(function(i){
$(this).children('span').text(arr[i]);
});
$('.close').click(function(){
$(this).parent().hide();
$('.mask').remove();
});
});
$('.del').click(function(){
$(this).parents('tr').remove();
});
script>
body>
html>第13节课demo1
<html lang="en">
<head>
<script src = "jquery.min.js">script>
<title>第13节课demo1——滚动公告title>
<style type="text/css">
*{
padding:0;
margin:0;
}
body{
margin:50px;
}
ul{
list-style-type: none;
}
li{
height: 30px;line-height: 30px;
}
style>
head>
<body>
<ul>
<li>我是第1条滚动公告li>
<li>我是第2条滚动公告li>
<li>我是第3条滚动公告li>
<li>我是第4条滚动公告li>
<li>我是第5条滚动公告li>
<li>我是第6条滚动公告li>
<li>我是第7条滚动公告li>
<li>我是第8条滚动公告li>
<li>我是第9条滚动公告li>
ul>
<script>
setInterval(function(){
var li = $('ul>:first').clone();
$('ul>:first').remove();
$('ul').append(li);
},2000);
script>
body>
html>第14节课demo1
<html lang="en">
<head>
<script src = "jquery.min.js">script>
<title>第13节课demo1——滚动公告title>
<style>
*{
padding: 0;
}
ul{
list-style-type: none;
}
body{
margin: 50px;
}
div{
width: 200px;
height: 24px;
line-height: 24px;
text-align: center;
border: 1px solid #ccc;
}
ul{
width: 200px;
border: 1px solid #ccc;
display: none;
}
ul li{
height: 24px;
line-height: 24px;
}
ul li:hover{
background: #cfcfcf;
}
style>
head>
<body style='height:3000px;width: 3000px'>
<p>这是一个P标签p>
<script>
/*$('p').click(function(){
alert($(this).text());
});*/
/*$('p').dblclick(function(){
alert($(this).text());
});*/
/*$('div').focusin(function(){
$('div>span').show();
});
$('div').focusout(function(){
$('div>span').hide();
});*/
/*$('p').mousedown(function(){
alert(123);
});*/
/*$(document).mousemove(function(e){
// console.info('x轴坐标：'+e.pageX+'y轴坐标：'+e.pageY);
$('#input').val('x:'+e.pageX+'y:'+e.pageY);
});*/
/*$('p').mouseover(function(){
$(this).css('background','red');
});*/
/*$('p').mouseout(function(){
$(this).css('background','none');
});*/
/*$(document).mouseover(function(){
$('p').css('background','none');
});*/
/*$(document).mouseenter(function(){
$('p').css('background','red');
});
$(document).mouseleave(function(){
$('p').css('background','none');
});*/
/*$('input').keydown(function(){
alert($(this).val());
});*/
/*$('input').keyup(function(){
alert($(this).val());
});*/
/*$('input').keypress(function(){
alert($(this).val());
});*/
/*$('input').focus(function(){
$('span').show();
}).blur(function(){
$('span').hide();
});*/
/*$('input').change(function(){
$('span').show();
});*/
/*$('input[type=file]').change(function(){
$('span').show();
});*/
/*$('input').select(function(){
$('span').show();
});*/
/*$("input[type=password]").select(function(){
$('span').show();
});*/
/*$('#form1').submit(function(e){
// alert('提交成功！！！！');
// e.preventDefault();
});*/
/*$(window).resize(function(){
alert('浏览器窗口大小已改变！！！');
});*/
/*$(window).scroll(function(){
console.info('滚动条正在滚动！！！');
});*/
/*$(document).click(function(e){
var x = e.pageX;
var y = e.pageY;
$('input').val(x+','+y);
});*/
/*$('div').click(function(e){
$('ul').show();
e.stopPropagation();
});
$(document).click(function(){
$('ul').hide();
});*/
/*$('p').bind('click',function(){
alert($(this).text());
});
$('p').mouseover(function(){
$(this).css('background','red');
});
// $('p').unbind('click');
$('p').unbind('click mouseover');*/
/*$('p').one('click',function(){
alert($(this).text());
});*/
/*$('body').delegate('p','click',function(){
$(this).append('这是新增的p标签
');
});*/
/*$('p').bind('click',function(){
$('body').append('这是新增的p标签
');
});*/
/*$('body').on('click','p',function(){
$('body').append('这是新增的p标签
');
});*/
// 命名空间
$('p').bind('click.background',function(){
$(this).css('background','red');
});
$('p').bind('click.color',function(){
$(this).css('color','white');
});
$('p').unbind('click.color');
script>
body>
html>第15节课demo1
<html lang="en">
<head>
<script src = "jquery.min.js">script>
<title>第15节课demo1——事件补充title>
<style>
p{
background-color: #f00;padding: 20px;
}
a{
background-color: #abc;padding: 20px;
}
style>
head>
<body>
<p><a href="#">点击a>p>
<script>
/*$('p').hover(function(){
$(this).css('background','red');
},function(){
$(this).css('background','none');
});*/
$('a').click(function(){
alert('我是a，我被点击了！！！');
});
/*$('a').trigger('click');*/
$('p').click(function(){
alert('我是p，我被点击了！');
});
// $('a').trigger('click');
$('a').triggerHandler('click');
script>
body>
html>第16节课demo1
"en">
第<span class="hljs-number">16</span>节课demo1——
--
1.基础动画
show()显示
hide()隐藏
toggle()切换显示和隐藏
2.渐变动画
fadeln()
fadeOut()
fadeTo()
fadeToggle()
3.滑动动画
slideDown()
slideUp()
slideToggle()
4.自定义动画
animate()
5.动画队列
stop()
dequeue()
finish()
delay()
jQuery.fx.interval()，设置运行的时间，不推荐
-->
-- 点击
1.hover()用法
2.trigger()
3.triggerHandler()阻止事件冒泡
-->
type='button' id = "run" value='运行'>
type='button' id = "stop" value='stop'>
type='button' id = "dequeue" value='dequeue'>
type='button' id = "finish" value='finish'>
type='button' id = "delay" value='delay'>
第17节课demo1
<html lang="en">
<head>
<script src = "jquery.min.js">script>
<title>第17节课demo1——jQuery中动画算法的插件title>
<style>
div{
width: 20px;
height: 20px;
background: #abcdef;
padding: 20px;
left: 0;
top: 30px;
position: absolute;
}
style>
head>
<body>
<input type="button" value="点击">input>
<div>div>
<script>
$('input').click(function(){
$('div').animate({
'left':'+=200px'
},2000);
});
/*$('input').click(function(){
$('div').animate({'top':'500px'},6000)
.animate({'left':'800px'},6000)
.animate({'top':'30px'},6000)
.animate({'left':'0px'},6000);
});*/
script>
body>
html>第18节课demo1
<html lang="en">
<head>
<script src = "jquery.min.js">script>
<title>第18节课demo1——表单选择框实例title>
head>
<body>
<div id="checkbox">
<input type="checkbox" name="" checked="checked" />吃
<input type="checkbox" name=""/>喝
<input type="checkbox" name=""/>嫖
<input type="checkbox" name=""/>赌
div>
<div>
<input type="button" name="" id="checkAll" value="全选"/>
<input type="button" name="" id="checkReverse" value="反选"/>
<input type="button" name="" id="checkNone" value="全不选"/>
<div>
<script>
$('#checkAll').click(function(){
$('#checkbox>:checkbox').attr('checked',true);
});
$('#checkNone').click(function(){
$('#checkbox>:checkbox').attr('checked',false);
});
$('#checkReverse').click(function(){
$('#checkbox>:checkbox').each(function(){
$(this).attr('checked',!$(this).attr('checked'));
});
});
script>
body>
html>第19节课demo1
<html lang="en">
<head>
<script src = "jquery.min.js">script>
<title>第19节课demo1——页面搜索实例title>
<style>
table{
width: 500px;
border: 1px solid #abcdef;
border-collapse: collapse;
}
tr{
height: 20px;
border: 1px solid #abcdef;
}
th,td{
border: 1px solid #abcdef;
text-align: center;
}
style>
head>
<body>
<table>
<tr>
<th>姓名th>
<th>性别th>
<th>年龄th>
<th>电话th>
tr>
<tr>
<td>张三td>
<td>男td>
<td>30td>
<td>74874874888td>
tr>
<tr>
<td>李四td>
<td>男td>
<td>32td>
<td>16816816888td>
tr>
<tr>
<td>移动客服td>
<td>女td>
<td>21td>
<td>10086td>
tr>
<tr>
<td>移动充值td>
<td>女td>
<td>21td>
<td>13816681978td>
tr>
table>
<input type="text" name=""/>
<input type="button" value="搜索"/>
<script>
$('input[type=button]').click(function(){
var text = $('input[type=text]').val();
$('table tr:not(":first")').hide().filter(':contains("'+text+'")').show();
});
script>
body>
html>第20节课demo1
<html lang="en">
<head>
<script src = "jquery.min.js">script>
<title>第20节课demo1——title>
head>
<body>
<textarea style="height: 200px;width: 200px">textarea>
<span>你还可以输入<strong style="color: red">140strong>个字span>
<script>
var maxLength=140;
$("textarea").keyup(function(){
var l = $(this).val().length;
$('strong').text(maxLength-l);
/*if($('strong').text()<0){
alert("不能超过140个字");
}*/
if(parseInt($('strong').text())<0){
$('strong').text(0);
var val = $(this).val().substring(0,140);
$(this).val(val);
}
});
script>
body>
html>第21节课demo1
<html lang="en">
<head>
<script src = "jquery.min.js">script>
<script src = "demo21.js">script>
<title>第21节课demo1——eval、jquery插件编写title>
<style>
div{
height: 100px;
width: 100px;
background-color: #f90
}
style>
head>
<body>
<div>div>
body>
<script>
// $.zixueit.myAlert("我是通过调用插件弹出的警告框");
// $.myAlert2();
/*var a = '[1,2,3,4]';
var b = eval(a);
alert(typeof b);
alert(b[0]);*/
/*$.zixueit.centerDiv($('div'));*/
$.zixueit.centerDiv($('div')).css('background-color','red');
script>
html>第22节课demo1
<html lang="en">
<head>
<script src = "jquery.min.js">script>
<script src = "jQuery-table1.0.js">script>
<title>第22节课demo1——eval、jquery插件编写title>
<style>
table{
width: 100%;
border-collapse: collapse;
border: 1px solid #abcdef;
}
th,td{
height: 36px;
border: 1px solid #abcdef;
text-align: center;
}
.evenRow{background-color: #f90;}
.oddRow{background-color: #a30;}
.currentRow{background-color: #asd;}
style>
head>
<body>
<table id = 'mytable'>
<tr>
<th>姓名th>
<th>性别th>
<th>年龄th>
<th>工资th>
tr>
<tr>
<td>小张td>
<td>男td>
<td>26td>
<td>12000td>
tr>
<tr>
<td>小陈td>
<td>男td>
<td>25td>
<td>13000td>
tr>
<tr>
<td>TOMtd>
<td>男td>
<td>30td>
<td>20000td>
tr>
<tr>
<td>小丽td>
<td>女td>
<td>22td>
<td>25000td>
tr>
<tr>
<td>小美td>
<td>女td>
<td>25td>
<td>26000td>
tr>
table>
<script type="text/javascript">
$('#mytable').table();
script>
body>
html>