JAVA Script 之Jquery初步学习，入门学习，jquery基础，浅谈其基本用法。

来源：互联网发布：网络棋牌赌博犯法吗编辑：程序博客网时间：2024/06/14 07:37

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() - 设置或返回表单字段的值

6. jquery 添加元素和内容

append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

7. jQuery 删除元素与内容

remove() - 删除被选元素（及其子元素）
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() 方法返回介于两个给定元素之间的所有祖先元素.