web前端前端学习

jQuary 基础学习

2017-06-20  本文已影响50人  郭豪豪

一、简介与安装

jQuery是一个JavaScript函数库。
jQuery是一个轻量级的"写的少，做的多"的JavaScript库

jQuary 主要功能包括如下：
  1. html 的元素选取
  2. html的元素操作
  3. html dom遍历和修改
  4. js特效和动画效果
  5. css操作
  6. html事件操作
  7. ajax异步请求方式
网页中添加jQuary有两种方式：

  1. 第一种是在官网下载jQuary库，然后在<head>标签中添加使用HTML的<script>标签引用它,或者在<body>标签的最后引用它，需要注意的是要将jQuery的引用放在所有js引用的最前边，避免引入其他js文件时对它的调用造成影响。

         <script src="js/jquery-1.11.1.min.js"></script>

我们下载的jQuery库时有两个版本可供选择：
* Production version —— 用于实际的网页开发，jQuery文件是被压缩和精简的
* Development version —— 用于开发测试，jQuery文件具有可读性

  1. 第二种是通过 CDN 引用它，百度、谷歌、微软、新浪、菜鸟教程等的服务器都存有jQuery，我们可通过<script>标签的src引用他们的CDN 库。注意：国内的建议使用百度、新浪等国内CDN地址，国外的可以使用谷歌和微软。 下面简单举两个例子：

    • 百度 CDN:
       <head>
       <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
       </script>
   </head>
    • 新浪 CDN:
        <head>
       <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">
       </script>
   </head>

二、基础内容

1. 选择器

        通过选择器我们可以多单个或者多个HTML元素进行操作。jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。
         以美元符号开头： $() 来获取。
实例：

语法 描述
$("p") 元素选择器,获取页面中所有的<p>标签
$("#test") #id 选择器，获取id为test的元素，页面中id是唯一的
$(".test") .class 选择器，获取class为test的元素
$("*") 选取所有元素
$(this) 选取当前 HTML 元素
$("p.intro") 选取 class 为 intro 的<p>元素
$("p:first") 选取第一个<p>元素
$("ul li:first") 选取第一个<ul>元素的第一个<li>元素
$("ul li:first-child") 选取每个<ul>元素的第一个<li>元素
$("[href]") 选取带有 href 属性的元素
$("a[target='_blank']") 选取所有 target 属性值等于 "_blank" 的 <a> 元素
$("a[target!='_blank']") 选取所有 target 属性值不等于 "_blank" 的<a>元素
$(":button") 选取所有 type="button"的 <input>元素 和 <button> 元素
$("tr:even") 选取偶数位置的 <tr> 元素
$("tr:odd") 选取奇数位置的 <tr> 元素
2. 语法
* jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。写法如下：

 ```
 $(selector).action();

 $("#test").hide(); - 隐藏所有 id="test" 的元素
 ```

* 文档就绪事件
  为了防止文档在完全加载（就绪）之前运行 jQuery 代码,我们可以将标签的初始化事件和方法的绑定在如下函数中操作。
  
  ```
  $(document).ready(function(){
        // 开始写 jQuery 代码...
    });
    
    也可以简写为：
    $(function(){
         // 开始写 jQuery 代码...
    });
  ```
3. 事件
鼠标 事件 鼠标事件触发方式
click 用户点击 HTML 元素时
dblclick 双击元素
mouseenter 鼠标指针穿过元素
mouseleave 鼠标指针离开元素
mousedown 鼠标指针移动到元素上方，并按下鼠标按键
mouseup 在元素上松开鼠标按钮
hover 当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)
键盘事件 键盘事件触发方式
keypress
keydown 在键盘按下时触发
keyup 在按键释放时触发
表单事件 表单事件触发方式
submit 提交表单
change 元素的值发生改变
focus 元素获得焦点
blur 元素失去焦点
文档/窗口事件 文档/窗口事件触发方式
load 指定的元素（及子元素）已加载，适用于任何带有 URL 的元素（比如图像、脚本、框架、内联框架）
resize 调整浏览器窗口的大小
scroll 所有可滚动的元素和 window 对象滚动
unload 用户离开页面

三、页面效果

方法 描述
show() 显示
hide() 隐藏
toggle() 切换 hide() 和 show() 方法
fadeIn() 淡入已隐藏的元素
fadeOut() 淡出可见元素
fadeToggle() fadeIn() 与 fadeOut() 方法之间进行切换
fadeTo() 渐变为给定的不透明度（值介于 0 与 1 之间）
slideDown() 向下滑动元素
slideUp() 向上滑动元素
slideToggle() 在 slideDown() 与 slideUp() 方法之间进行切换
animate() 添加动画效果，可操作所有 CSS 属性，也可添加动画队列，实现一系列的动画效果
stop() 停止动画或效果，在它们完成之前，参数属性： stopAll 参数规定是否应该清除动画队列；goToEnd 参数规定是否立即完成当前动画

注：以上方法除标注不带参数的都可带有参数，speed代表速度；callback代表完成后所执行的函数。

四、页面元素 HTML

  1. 获取内容

    • text() — 设置或返回所选元素的文本内容
    • html() - 设置或返回所选元素的内容，包括 HTML 标记（span标签）
    • val() - 设置或返回表单字段的值（input、 div标签）

  2. jQuery HTML 属性操作方法

方法 描述
val() 设置或返回匹配元素的值
html() 设置或返回匹配的元素集合中的 HTML 内容
attr() 设置或返回匹配元素的属性和值
addClass() 向匹配的元素添加指定的类名
hasClass() 检查匹配的元素是否拥有指定的类
removeAttr() 从所有匹配的元素中移除指定的属性
removeClass() 从所有匹配的元素中删除全部或者指定的类
toggleClass() 从匹配的元素中添加或删除一个类
append() 在被选元素的结尾插入内容
prepend() 在被选元素的开头插入内容
after() 在被选元素之后插入内容
before() 在被选元素之前插入内容
width() 设置或返回元素的宽度（不包括内边距、边框或外边距）
height() 设置或返回元素的高度（不包括内边距、边框或外边距）
innerWidth() 返回元素的宽度（包括内边距）
innerHeight() 返回元素的高度（包括内边距）
outerWidth() 返回元素的宽度（包括内边距和边框）
outerHeight() 返回元素的高度（包括内边距和边框）
empty() 删除被选元素的子元素
remove() 删除被选元素及其子元素 $("p").remove(".italic");过滤被删除的元素

五、与后台的交互 Ajax

AJAX 是与服务器交换数据的技术，它在不重载全部页面的情况下，实现了对部分网页的更新。它不是一种新的编程语言，而是一种使用现有标准的新方法。
AJAX = 异步 JavaScript 和 XML。

通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。

load() 方法

此方法是jQuery从后台加载数据，并将返回的数据展示在页面中。

语法：

$(selector).load(URL,data,callback);

$("button").click(function(){
$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("外部内容加载成功!");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
});
```

HTTP 网络请求 GET POST

jQuery中客户端与服务端有两种方式进行交互，常用的方法就是GET 和 POST：

方法 描述
GET 从指定的资源请求数据,基本上用于从服务器获得（取回）数据,可能返回缓存数据
POST 向指定的资源提交要处理的数据，也可以从服务端返回数据，但不会缓存数据，常用于请求时上传数据

$.get() 方法

$.get() 方法通过 HTTP GET 请求从服务器上请求数据。

基本语法：
$.get(URL,callback);

实例：
$("button").click(function(){
  $.get("demo_test.php",function(data,status){
    alert("数据: " + data + "\n状态: " + status);
  });
});

$.post() 方法

$.post() 方法通过 HTTP POST 请求从服务器上请求数据。

基本语法：
$.post(URL,data,callback);

实例：
$("button").click(function(){
    $.post("/try/ajax/demo_test_post.php",
    {
        name:"biubiubiu",
        url:"http://eyimu.com"
    },
        function(data,status){
        alert("数据: \n" + data + "\n状态: " + status);
    });
});
上一篇 下一篇

猜你喜欢

热点阅读