<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jquery 练习 </title>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
$().ready(function(){ //这一句一定不能忽略啊！！！
// 基础选择器 id class html标签 多个一起
/* $("#div1").text('a');
$('div').text('b');
$('.p1').text(333);
$('div,p').text(10086);
<body>
<div id="div1">456</div>
<div>789</div>
<p class="p1">0</p>
</body>
*/
/************************************************************/
// 层级选择器 后代 子代 > 紧挨 +
//$("#div1 p").html(123); //后代 段落1 2 3
//$("#div1 > p").html(456); //子代 段落1 3
// $('#div1 + p').html(789); //紧挨 段落4 变了
/*
* <div id='div1'>
<p>段落1</p>
<form>
<p>段落2</p>
</form>
<p>段落3</p>
</div>
<p>段落4</p>
<p>段落5</p>
*/
/*******************简单*************************/
// 重要的 :eq(index) ：匹配索引为指定值的元素
// :not(selector) ：匹配除了指定选择器之外的所有元素
/* $('td:first').text('ab');
// :first :last :even(偶数） ：odd(奇数）
$('td:eq(1)').text('cd'); //下标从0开始
$('td:not(td:eq(2))').text('fg'); //除了 第2 ，其他都为 fg
*/
/*
* <table width=800 border=1>
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
*/
/*****************内容********************/
// ：constains(text) 匹配内容中包含指定内容的元素
// :empty 匹配内容为空的元素
/* $('li:contains("三国")').text(123);
$('li:empty').text(456);
*/ /*
* <ol>
<li>三国</li>
<li>
西
<a>游</a>
记
</li>
<li></li>
<li>水浒传</li>
</ol> */
/*****************:hidden :visible********************/
/* $('#btnOk').bind('click', function () {
// $('div:hidden').show(); //显示 div2
$('div:visible').hide(); //隐藏 div1
})*/
/*<div>div1</div>
<div style='display: none'>div2</div>
<hr>
<input type='button' id='btnOk' value='确定' />
*/
/*****************属性********************/
//[attribute] ：匹配具有指定属性的元素
//[attribute=value] ：匹配属性等于指定值的元素 // $('font[color]').html(123);
// $('font[color="#ccccc5"]').html(456);
/*<font>test1</font>
<hr>
<font color='#ccccc5'>test2</font>
<hr>
<font color='#cc3cc5'>test3</font>
*/
/*****************表单********************/
// :input 匹配所有表单元素
//$(":input") 匹配所有表单元素 select textarea
//$("input") 匹配Input 标签 // jquery转dom 操作 ：jquery[0] jquery.get[0]
// dom 转 jquery 操作： $(dom) /***************************************/
// 属性操作
/*attr(name) ：获取指定属性的值
attr(key,value) ：设置指定属性的值
attr(properties) ：一次设置多个属性的值，要求参数必须是json对象
attr(key,fn) ：通过一个函数的返回值设置指定属性的值
removeAttr(name) ：删除指定的属性
*/
/*var a=$("#id1").attr('src');
document.write(a);*/
//$("#id1").attr("src","../img/2.jpg");
/*var data={
src:'../img/2.jpg',
width:100
}
$("#id1").attr(data);
*/
/*$("#id1").attr('src', function () {
return '../img/2.jpg';
});
$("#id1").removeAttr('src'); <img id="id1" src="../img/1.jpg"/>
*/
/**********css操作************************/ /* $("#btnOk").bind('click',function(){
$("#div1").addClass('cls2'); // 添加css样式
$("#div1").removeClass('cls1'); // 删除 css 样式
$("#div1").toggleClass('cls3'); // 切换 样式
if($("#div1").hasClass('cls3')){ // 判断是否有样式
alert('yes');
}else{
alert('no');
}
}); */
/*<style>
.cls1 {
color: red;
} .cls2 {
font-size: 30px;
} .cls3 {
border: 1px solid green;
}
</style>
<div id='div1' class='cls1'>jQuery</div>
<hr>
<input type='button' id='btnOk' value='确定' />
*/
/***********html 文本 val ************************/
// 获取值 html() 设置值 html('<font color=red>abc</font>');
// html
// 文本
// val 表单 /***********css 操作 ************************/
// $("#btnOk").bind('click', function () {
//$("#div1").css('color'); // 获取 css 属性值
// $("#div1").css('color','red'); //设置 css
//设置多个 json格式
/* var data={
color:'green',
fontSize:'30px'
}
$("#div1").css(data);
*/
// 获取 div1元素位置
//var data=$("#div1").offset();
// alert(data.left + ':'+ data.top);
// 设置 div1元素的位置
/* var data={
left:50,
top:100
}
$("#div1").offset(data);
*/
// 设置 尺寸 width() height()
/* $("#div1").css({
'border':'1px solid red'
});
$("#div1").width(500);
$("#div1").height(100);
})
<div id='div1'>jQuery</div>
<hr>
<div id='div2'>Ajax</div>
<hr>
<input type='button' id='btnOk' value='确定' />
*/
/*********** 事件编程 ************************/
//mouseover();
/* $("#content").bind('mouseover', function () {
$(this).css('color','red');
})
$("#content").bind("mouseout", function () {
$(this).css('color','blue');
})
<div id='content'>jQuery</div>
*/
/* * blur(fn) ：失去焦点
change(fn) ：内容改变
click(fn) ：点击
dblclick(fn) ：双击
focus(fn) ：获得焦点
keydown(fn) ：键盘按下
keyup(fn) ：键盘抬起
keypress(fn) ：键盘点击
load(fn) ：页面载入
unload(fn) ：页面关闭
mousedown(fn) ：鼠标按下
mouseup(fn) ：鼠标抬起
mousemove(fn) ：鼠标移动
mouseover(fn) ：鼠标经过
mouseout(fn) ：鼠标离开
resize(fn) ：改变尺寸
scroll(fn) ：滚动条滚动
select(fn) ：选择内容
submit(fn) ：提交按钮 * */
/*********** 事件切换 ************************/
/* $("#content").hover(function () { // $().hover( function(){},function(){} 注意写法 );
$(this).css('color','red');
},function(){
$(this).css("color","blue");
});
// toggle(fn,fn2,[fn3,fn4,...]); 鼠标点击时的事件绑定 切换 // $().toggle( function(){},function(){},function(){});
$("#result").toggle(function () {
$(this).css('color','red');
}, function () {
$(this).css('color','green');
}, function () {
$(this).css('color','blue');
});
*/
/*<div id='content'>jQuery</div>
<div id='result'>Smarty</div>
*/
/*********** 事件绑定 bind ************************/
//绑定多个
/* var data={
mouseover: function () {
//$(this).css('color','red');
this.style.color='red';
},
mouseout: function () {
$(this).css('color','blue');
}
};
$("#div1").bind(data);
*/
/*<div id='div1'>div1</div>
<hr>
<p id='p1'>p1</p>
<hr>
<input type='button' id='btnOk' value='确定' />
*/ //one方法绑定的事件只触发一次
/* $('#div1').one('click', function() {
alert('hello!');
}); //移除所有事件绑定
$('#div1').unbind();
\
*/ // jquery 解决事件冒泡 取消默认行为 已经写了 // jquery 效果
/*
show() 显示 hide() 隐藏 toggle() 显示隐藏切换
show(speed,[callback]) 以动画效果显示
speed：动画持续时间（毫秒）
[callback] ：动画执行完毕后所调用的函数
*/ /* $("#btn1").bind('click', function () {
$("div").show(5000);
})
$("#btn2").bind('click', function () {
$("div").hide('normal', function () { //"slow"：缓慢 "normal"：正常 "fast"：快速
alert('ok');
});
})
$("#btn3").bind("click", function () {
$("div").toggle();
})
*/
/*
<div style="width:250px; height:250px; background-color:red;"></div>
<hr>
<input type='button' id='btn1' value='show' />
<input type='button' id='btn2' value='hide' />
<input type='button' id='btn3' value='toggle' /> */ // 滑动 显示隐藏
/*
slideDown(speed,[callback])
向下滑动 （显示） slideUp(speed,[callback])
向上滑动 （隐藏） slideToggle(speed,[callback])
滑动切换 */
// 淡入淡出
/*
fadeIn(speed,[callback])
淡入（显示） fadeOut(speed,[callback])
淡出（隐藏） fadeTo(speed,opacity,[callback])
淡入淡出到指定值
speed：动画持续时间
opacity：清晰度 0-----1 0：消息 1：显示 0.2 20% 【清晰度】
[callback]：动画完毕后执行的函数 */
// 文档处理
// 1.1内部插入
// <div>abcjQuerydef</div>
// append() 插后面 appendTo()
// prepend() 插前面 prependTo()
/* $("#btnOk").bind('click', function() {
// $("#result").append('linux'); //在result内容最后插入linux!
// $("#result").appendTo('#p1'); //将result插入到p1内容的最后
$("#result").prependTo("#p1"); ////将result插入到p1内容的最前面
}); */
/*
<div id='result'>jQuery!</div>
<p id='p1'>thinkphp!</p>
<hr>
<input type='button' id='btnOk' value='确定' />
*/ // 1.2.外部 插入
// abc<div>jQuery</div>def
/*
after(content) ：在元素的后面插入数据
before(content) ：在元素的前面插入数据
insertAfter(content) ：将匹配元素插入到指定内容的后面
insertBefore(content) ：将匹配元素插入到指定内容的前面 // 2 删除
/*
empty是将元素内容清空，但元素本身保留
remove是将元素本身删除，后面不允许再对元素进行操作
//$('#result').empty();
*/
// 3 复制
/*
clone() ：复制匹配的元素
clone(true) ：复制匹配的元素，同时也复制它的事件机制 指绑定的事件 */
/* $('div').bind('click', function() {
alert('hello!');
});
//绑定按钮点击事件
$("#btnOk").bind('click', function() {
var $div = $('div:first').clone(true); // true 复制所绑定的事件
//将新的div插入btnOk按钮的后面
$div.insertAfter('#btnOk');
});
*/
/*
<div style="border:1px solid red;">jQuery!</div>
<hr>
<input type='button' id='btnOk' value='确定' /> */
// 4 replaceWith() 替换
/* $('#btnOk').bind("click", function() { //$('li:eq(1)').html('红楼梦');
//$('li:eq(1)').replaceWith('<li>红楼梦</li>');
var $li = $('<li></li>'); // 创建一个新节点 document.createElement('li');
$li.html('红楼梦');
$li.css('color', 'red');
$li.bind('click', function() {
alert('hi!');
});
$('li:eq(1)').replaceWith($li);
$('p').replaceWith('<div>smarty!</div>');
});
*/
/*
<ol>
<li>三国</li> <li>西游</li> <li>水浒</li>
</ol>
<hr>
<p>p1</p>
<input type='button' id='btnOk' value='确定' />
*/ // 5 包裹 【外包】
//<strong><div><b>jQuery</b></div></strong>
/*
wrap() ：对匹配的元素使用指定的内容进行包裹 //$('div').wrap('<strong></strong>');
wrapAll() ：对匹配的元素使用指定的内容进行包裹（仅包裹一次）
wrapInner() ：对匹配元素的内容进行包裹 // 包在里面！ */ // 6.查找
/*
eq(index) ：匹配指定索引的元素
$(‘div’).eq(3) ：匹配索引为3的div
filter(expr) ：匹配过滤的元素
$(‘div’).filter(‘.cls1’) ：匹配使用了cls1样式的所有div
not(expr) ：匹配除了指定元素之外的所有元素
$(‘div’).not(‘.cls1’) ：匹配除了使用cls1样式的所有div
children([expr]) ：匹配所有子元素
$(‘product’).children(‘name’).text();
find(expr) ：查找指定的元素
$(xml).find(‘product’)
next([expr])
$(“#div1”).next() ：匹配div1相邻的下一个平辈节点
prev([expr])
$(‘#div1’).prev() ：匹配div1相邻的上一个平辈节点
parent([expr])
$(“#div1”).parent ：匹配div1元素的父节点 */
// 插件机制 有时间再加强。。。
/*
jquery.fn.extend({
fn1:function(){},
fn2:function(){},
......
});
*/
/* jQuery.fn.extend({
fn1: function (size) {
this.css('fontSize',size);
},
fn2: function (color) {
this.css('color',color);
}
});
$("#btnOk").bind('click', function () {
$('div').fn1('50px');
$('div').fn2('blue');
})
*/
/*
<div>jQuery!</div>
<hr>
<input type='button' id='btnOk' value='确定' />
*/ // each() each方法用于遍历jQuery对象
/* function callback(i,item){ i指个数 item 指div 本身
}
*/
/* $("#btnOk").bind('click', function () {
$('div').each(function (i,item) {
$(item).html('这是第'+(i+1)+'个div');
});
})
*/
/*
<div>div1</div>
<hr>
<div>div2</div>
<hr>
<div>div3</div>
<hr>
<input type='button' id='btnOk' value='确定' />
*/ // jquery底层 ajax
/*
jQuery.ajax(options);
要求参数必须是一个json对象，json对象下的属性如下 async ：是否异步 true：异步（默认） false：同步
complete ：当ajax对象的状态码为4时执行的函数
contentType ：请求头
dataType ：期望得到的数据类型 type ：请求类型 get post
url ：请求地址
data ：传递的参数，要求是一个字符串
cache ：是否缓存
success ：ajax对象状态码为4并且http响应状态码为200时所执行的函数
*/
$("#btn1").bind('click', function () {
$.ajax({
type: 'get', // get
url: 'demo03_1.php',
data: 'username=zhangsan',
cache: false, // get 需要 cache
success: function (msg) {
alert(msg);
}
});
});
$('#btn2').bind('click', function() {
$.ajax({
type : 'post', //post
url : 'demo03_2.php',
data : 'username=lisi',
success : function(msg) {
alert(msg);
}
});
}); $('#btn3').bind("click", function() {
$.ajax({
type : 'post',
url : 'demo03_3.php',
dataType : 'json', // dataType
success : function(msg) {
alert(msg.name + ':' + msg.age);
}
});
});
/*
* <?php
$person = array (
'name' => 'xiaoqiang',
'age' => 30
); echo json_encode ( $person ); json_encode 就得到 json 数据
*
* ?>
*
* */ /*
demo03_1.php
<?php $username=$_GET['username'];
echo 'hello,'. $username; // echo
?>
*/
/*
html
<input type='button' id='btn1' value='$.ajax() get' />
<input type='button' id='btn2' value='$.ajax() post' />
<input type='button' id='btn3' value='$.ajax() json' />
*/ // jquery 高级ajax
$.get(); // 需要时间戳
$('#btn1').bind('click', function() { //将要传递的参数生成json对象
//注意：需要自己解决缓存问题
var data = {
first : 10,
second : 20,
_ : new Date().getTime() // 时间戳参数
}; //发送get请求
$.get('demo04_1.php', data, function(msg) { // $.get();
alert(msg);
});
});
/*
<?php
$first = $_GET ['first'];
$second = $_GET ['second'];
echo $first + $second; ?>
*
* */
$('#btn2').bind('click', function() {
//将要传递的参数生成json对象
var data = {
first : 10,
second : 20
};
//发送post请求
$.post('demo04_2.php', data, function(msg) { // $.post();
alert(msg);
});
});
/*
<input type='button' id='btn1' value='$.get()' />
<input type='button' id='btn2' value='$.post' />
*/
// jquery 跨域请求 先路过吧。。 })
</script> </head> <body> </body>
</html>