jquery全解(1)
来源:互联网 发布:vb页面跳转 编辑:程序博客网 时间:2024/06/06 10:54
本章内容
1.jquery语法
jquery的使用
在<head></head>
里引用jquery.js
<!DOCTYPE html><html lang="en"><head> <!-- 引用jquery.js --> <script src="jquery.js"></script> <meta charset="UTF-8"> <title>Document</title></head><body></body></html>
jquery 符号
$(“选择器”).动作()
$(“div”).animate({opacity:0},3000);
注:选择器名要加引号
例如操作一个div
<!DOCTYPE html><html lang="en"><head><style>div{width: 100px;height: 100px;background: red;}</style><!-- 引用jquery.js --> <script src="jquery.js"></script> <meta charset="UTF-8"> <title>Document</title></head><body> <div></div> <script> //$("选择器").动作(变化,时间) $("div").animate({opacity:0},3000); </script></body></html>
2.juqery效果
<!DOCTYPE html><html lang="en"><head><style>div{width: 100px;height: 100px;background: red;}</style><!-- 引用jquery.js --> <script src="jquery.js"></script> <meta charset="UTF-8"> <title>Document</title></head><body> <div></div> <script> // $("div").animate({opacity:0},3000);//渐变 // $("div").hide(3000)//隐藏 // $("div").show(3000)//显示 // $("div").fadeOut(2000)//淡出 // $("div").fadeIn(3000)//淡入 $("div").slideUp(2000) $("div").slideDown(3000) </script></body></html>
渐变:
隐藏与显示:
淡出与淡入
滑动(滑上滑下)
3.事件
<!DOCTYPE html><html lang="en"><head><script src="jquery.js"></script> <meta charset="UTF-8"> <title>Document</title></head><body> <input type="button" value="点我"> <script> //点击 $("input").click( function(){ document.title="这是标题位置" } ) //双击 $("input").dblclick( function(){ document.title="这是标题位置" } ) //鼠标进入 // $("input").mouseenter( // function(){ // document.title="这是标题位置" // } // ) //鼠标滑出 // $("input").mouseleave( // function(){ // document.title="aaa" // } // ) </script></body></html>
4.方法
<!DOCTYPE html><html lang="en"><head><style></style> <script src="jquery.js"></script> <meta charset="UTF-8"> <title>Document</title></head><body> <input type="button" value="1"> <input type="button" value="2"> <input type="button" value="3"> <script> //点击位置为1的input(即第二个input) $("input:eq(1)").click( function(){ $("input:eq(1)").hide(); //第一个input消失 //$("input:first").hide(); //第二个input消失 //$("input:last").hide(); } ) </script></body></html>
5.html操作(捕获【拿】和设置【给】)
<!DOCTYPE html><html lang="en"><head><script src="jquery.js"></script> <meta charset="UTF-8"> <title>Document</title></head><body><div> <input type="text" value=""> <input type="button" value="提交"></div><script>//点击按钮title显示input的value值$("input:eq(1)").click( function(){ document.title=$("input:eq(0)").val() } )</script></body></html>
阅读全文
1 0
- jquery全解(1)
- jquery全解(2)
- jquery系列教程1-选择器全解
- jQuery选择器全解
- jQuery选择器全解
- jquery选择器全解
- jQuery选择器全解
- jQuery选择器全解
- jQuery选择器全解
- jQuery选择器全解
- jquery选择器全解
- jQuery选择器全解
- jQuery选择器全解 .
- jQuery选择器全解
- jQuery选择器全解
- jQuery 事件全解
- jQuery选择器(全)
- jQuery选择器全解~~收藏
- WKWebView 进度条
- java基础点
- leetCode刷题记录 Sort Colors
- 快速排序——复习
- Frament+ViewPager
- jquery全解(1)
- 模拟试——repair
- 计算机网络总结
- js中onblur和onfocus事件(用于文本框)
- 余弦计算相似度度量【转】 此博文包含图片(2014-11-17 10:18:40)转载▼ 标签: 数学 基础 自然语言处理分类: 学习 http://blog.csdn.net/u0121606
- Spring 03
- Django 1.8.2 文档
- Spring 各个jar包的作用
- [CF600E]Lomsat gelral