JAVA Script 之Jquery初步学习,入门学习,jquery基础,浅谈其基本用法。
2016-08-31 11:40
519 查看
jQuery是什么?
1. jquery是一套封装了JS的框架,帮我们解决了很多浏览器兼容问题以及提供了很多功能强大的方法。2. jquery 可以非常方便又快捷的方式查询与控制页面的控件。比如说点击某个BUTTON,响应某个事件。
3. jQuery还提供了链式调用方法,比如说我在做一个控件动画的上移动2s,然后改变其颜色,接着又下移动2s.对应的代码为
$(".panel").slideUp(2000).css('backgroundColor', 'red').slideDown(2000);
好了,好处就将这么多,下面开始学习。
1.如何在html中引入Jquery框架呢,方式如下。
1.本地引用jquery下载 http://jquery.com/download/#Download_jQuery
项目引用方式如下:
在<head> </head>标签中引入js文件,src代表的就是下载下来的jQuery.js文件所在的本地目录路径
<script src="jquery.js"></script>
2. 网络引用
直接在<head> </head>标签中写入以下语句,可能版本需要随着项目的变化而变化
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs /jquery/1.4.0/jquery.min.js"></script>
2. 对jQuery有一个基本的了解。语法
基础语法是:$(selector).action()美元符号定义 jQuery
选择符(selector)“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操作
3. 重点讲解之juqery中如何快速的获取到对应的页面控件。也就是选择器。
选择器分为元素选择器 :
所谓元素选择器,就是选择 某一个标签。 比如 <p></p>, 通过$("p")就可以拿到所有的p标签
常见的元素选择器方式如下
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。
属性选择器
jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
css选择器
jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。
下面的例子把所有 p 元素的背景颜色更改为蓝色:
$("p").css("background-color","blue");
更多jQuery选择器了解请点击 : http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp
4. 重点讲解之jquery事件处理
注意,所有事件处理都需要写在 document ready函数里面,目的就是方式在文档加载完毕之前就调用Jquery方法。 方法示例:$(document).ready(function(){ --- jQuery functions go here ---- });
1. 按钮点击事件处理
$("button").click(function() {..some code... } )
2. 控件的隐藏与显示
$("p").hide(); $("p").show();
3. 控件的隐藏与显示的开关 ,意思就是 显示的隐藏, 隐藏的显示
$("button").click(function(){ $("p").toggle(); });
4. 控件的动画,淡入淡出效果
fadeIn() 淡入已隐藏的元素 fadeOut() 淡出已显示的元素 fadeToggle() 这个就是上面 fadein() 与 fadeOut方法的切换 fadeTo() 方法就是改变透明度的方法
5. 控件的滑动效果
slideDown() 向下滑动元素 slideUp() <span style="white-space:pre"> </span>向上滑动元素 slideToggle() 向上,向下滑动元素
6. 控件的动画效果 ,让div 左移动100px,速度是慢, 同时改变文字的字号。
$("button").click(function(){ var div=$("div"); div.animate({left:'100px'},"slow"); div.animate({fontSize:'3em'},"slow"); });
7. 动画的暂停
$("button").click(function(){ $("div").stop(); });
8. 动画的回调。我们想在某一个动画执行完成以后,通知下,然后需要执行某些操作。上面的每一个动画方式,都是有回调方法的. 后面的function就是回调方法
$("div").hide(2000,function(){});
9.chaining 链式操作。就是吧很多操作控件的动画。链接起来进行执行,这样可以使代码看上去更加紧促。下面的代码意思就是改变id = p1,让颜色变成红色,然后执行向上2s的滑动,然后执行向下2s的滑动
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
5. jquery操纵 html属性与元素的方法。
text() - 设置或返回所选元素的文本内容html() - 设置或返回所选元素的内容(包括 HTML 标记)
val() - 设置或返回表单字段的值
相关示列代码如下:
$("#btn1").click(function(){ alert("Text: " + $("#test").text()); }); $("#btn2").click(function(){ alert("HTML: " + $("#test").html()); });
</pre><pre name="code" class="javascript">$("#btn1").click(function(){ alert("Value: " + $("#test").val()); });
6. jquery 添加元素和内容
append() - 在被选元素的结尾插入内容prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
相关示列代码
$("p").append("Some appended text."); $("p").prepend("Some prepended text."); $("img").after("Some text after"); $("img").before("Some text before");
7. jQuery 删除元素与内容
remove() - 删除被选元素(及其子元素)empty() - 从被选元素中删除子元素
相关示列代码
$("#div1").remove(); $("p").empty();
8. jQuery 对css元素进行操作 , 经常用的场景,就是很多标签比如p, h1,h2,现在他们要实现一个同样的style效果,这时候通过添加class就可以很方便的实现同样的效果,我们只需要在css的文件中,加上这个.class的css样式
addClass() - 向被选元素添加一个或多个类removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性
示列代码
css代码
.important { font-weight:bold; font-size:xx-large; } .blue { color:blue; }这样h1.h2. div,都使用了同样的css样式
$("button").click(function(){ $("h1,h2,p").addClass("<span style="font-family: Arial, Helvetica, sans-serif;">important</span>"); $("div").addClass("important"); });
9. 通过Jquery获取窗口的尺寸
width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距)。height() 方法设置或返回元素的高度(不包括内边距、边框或外边距)。
innerWidth() 方法返回元素的宽度(包括内边距)。
innerHeight() 方法返回元素的高度(包括内边距)。
outerWidth() 方法返回元素的宽度(包括内边距和边框)。
outerHeight() 方法返回元素的高度(包括内边距和边框)。
10. Equerry 遍历 DOM
这些 jQuery 方法很有用,它们用于向上遍历 DOM 树:parent() 方法返回被选元素的直接父元素。
parents()
parents() 方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>)。
parentsUntil() parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素.
示列代码
求span的父级 $(document).ready(function(){ $("span").parent(); }); 求span的所有父级 $(document).ready(function(){ $("span").parents(); }); 求span 与 div 之间的父级 $(document).ready(function(){ $("span").parentsUntil("div"); });
相关文章推荐
- java学习【web基础-jQuery入门】
- java struts2入门学习--OGNL语言基本用法
- java 从零开始,学习笔记之基础入门<Jquery>(四十三)
- Java学习从入门到精通 4方法篇-Java基础-Java-编程开发
- 数据处理的两个基本问题02 - 零基础入门学习汇编语言39
- Java基础:学习Java那些东西是最基本的?
- 数据处理的两个基本问题04 - 零基础入门学习汇编语言41
- Java学习从入门到精通 3过程篇-Java基础-Java-编程开发
- [转载]jquery.validate.js的基本用法入门
- 数据处理的两个基本问题04 - 零基础入门学习汇编语言41
- Java基础学习笔记(一)基本数据类型
- 数据处理的两个基本问题05 - 零基础入门学习汇编语言42
- JAVA基础学习总结---原码、补码、反码以及基本数据类型
- 数据处理的两个基本问题02 - 零基础入门学习汇编语言39
- Java学习从入门到精通 1工具篇-Java基础-Java-编程开发
- Java学习从入门到精通-Java基础-Java-编程开发
- 传智博客学习笔记16--JAVA SCRIPT HTML语言基础
- 基础入门:关于JavaIO流学习总结
- 数据处理的两个基本问题05 - 零基础入门学习汇编语言42
- 数据处理的两个基本问题03 - 零基础入门学习汇编语言40