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

原创 2016年08月31日 11:40:39


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");
});



JavaWeb前端开发知识总结(jQuery)

JavaWeb前端开发知识总结-jQuery
  • L631106040120
  • L631106040120
  • 2017年05月03日 10:36
  • 1296

从头开始学习JAVA 6--引入JQuery

5 JQuery: 在Index.jsp中,使用到JQuery。 1)添加taglib 在页面头部添加如下代码: Taglib类似于自定义控件。 2)添加Jquery      ...
  • xumingxsh
  • xumingxsh
  • 2013年03月10日 07:53
  • 2398

Java+Jquery实现转盘抽奖系统

今天平安夜,协会需要做活动,第一个活动就是在群里发红包,第二个就是进协会网站的抽奖系统进行抽奖。 由于需要,所以我零时做了一个抽奖系统,是一种大转盘抽奖的。效果图如下: 这...
  • qq_25821067
  • qq_25821067
  • 2016年12月24日 23:21
  • 4038

java+jquery文件上传 无刷新 带进度条,监控文件上传情况

  • 2015年11月11日 10:00
  • 173KB
  • 下载

jQuery源码学习(一)

jQuery源码学习
  • liujie19901217
  • liujie19901217
  • 2016年05月25日 22:39
  • 9784

jQuery快速学习

1、$(document).ready 的作用是等页面的文档(document)中的节点都加载完毕后,再执行后续的代码,因为我们在执行代码的时候,可能会依赖页面的某一个元素,我们要确保这个元素真正的的...
  • qq_28568283
  • qq_28568283
  • 2016年11月14日 09:34
  • 923

Java+jquery+jsonp实现跨域

jquery端代码  $.ajax({           async:false,           url: 'http://www.**.com/**/jsonp', // 跨域UR...
  • u010741376
  • u010741376
  • 2017年02月14日 17:02
  • 1376

JAVA+JQUERY 上传截取图片

JAVA 截取图片代码 package com.wansha; import java.awt.Rectangle; import java.awt.image.BufferedImage; im...
  • xpsharp
  • xpsharp
  • 2011年10月17日 14:48
  • 5431

jQuery插件学习

前言 在很多项目里都看到过大神些的jQuery插件,我菜鸟一个,拿着别人的jQuery插件用起来真是方便,大神果然牛B。 后来有时间了,把大神的js代码学习了下,结构清晰、功能强大,由衷感叹真NB也...
  • why2010ps
  • why2010ps
  • 2016年01月27日 18:09
  • 305

jQuery简单的快速入门

内容目录 jQuery 入门 什么是jQuery如何使用jQueryjQuery的运行原理如何选择jQuery版本ready() 准备就绪时执行代码 jQuery 核心:选取元素 ...
  • zhangqiang1116
  • zhangqiang1116
  • 2015年05月31日 17:15
  • 648
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JAVA Script 之Jquery初步学习,入门学习,jquery基础,浅谈其基本用法。
举报原因:
原因补充:

(最多只允许输入30个字)