jQuery基础

时间：2020-05-31 01:07:40 阅读：81 评论：0 收藏：0 [点我收藏+]

jQuery是一个轻量级的"写的少，做的多"的JavaScript库。它包含以下功能：1、HTML元素选取；2、HTML元素操作；3、CSS操作；4、HTML事件函数；5、JavaScript特效和动画；6、HTML DOM遍历和修改；7、AJAX；8、Utilities；除此之外，Jquery还提供了大量的插件。

一、下载安装

1、可以去官网下载下来然后放入项目中，在项目中引入即可。有两个版本的jQuery可供下载：

Production version - 用于实际的网站中，已被精简和压缩。
Development version - 用于测试和开发（未压缩，是可读的代码）

以上两个版本都可以从jquery.com中下载。jQuery库是一个JavaScript文件，您可以使用HTML的<script>标签引用它：

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

<!--您是否很疑惑为什么我们没有在<script>标签中使用type="text/javascript"?
在HTML5中，不必那样做了。JavaScript是HTML5以及所有现代浏览器中的默认脚本语言！-->

2、使用CDN在项目中引入jQuery

<!--百度CDN:-->
<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
</head>

<!--又拍云CDN:-->
<head>
<script src="https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js">
</script>
</head>

<!--新浪CDN:-->
<head>
<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">
</script>
</head>

二、jQuery语法

jQuery语法是通过选取HTML元素，并对选取的元素执行某些操作。
基础语法： $(selector).action()
$表示jQuery，selector表示选择器，有标签选择器，类选择器，id选择器。也就是分别对应html中的标签，class类选择器，id标识。
标签选择器示例：$("p").hide() 意思是隐藏所有的p标签。
类选择器示例：$(".test").hide() 意思是隐藏所有class="test"的元素。
id选择器示例：$("#test").hide() 意思是隐藏id="test"的元素。
jQuery是在html文档完全加载完成之后才执行的，如果在文档加载完成之前执行jQuery代码将会出现问题，因为有些元素还没有加载完成。因此需要执行文档就绪事件。

//意思是文档加载完成之后才进行操作
$(document).ready(function(){
    // 开始写jQuery代码...
 });

//简写方式 与上面效果一样
$(function(){
    // 开始写jQuery代码...
 });

三、jQuery选择器

jQuery选择器允许您对HTML元素组或单个元素进行操作。jQuery选择器基于元素的id、类、类型、属性、属性值等"查找"（或选择）HTML元素。它基于已经存在的CSS 选择器，除此之外，它还有一些自定义的选择器。jQuery中所有选择器都以美元符号开头：$()。
1、元素选择器

//选中所有的p标签，当点击按钮时p标签全部隐藏
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});

2、#id选择器

//当用户点击按钮后，有id="test"属性的元素将被隐藏：
$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});

3、.class选择器

//用户点击按钮后所有带有class="test"属性的元素都隐藏：
$(document).ready(function(){
  $("button").click(function(){
    $(".test").hide();
  });
});

4、其他更多实例

语法	描述	实例
$("*")	选取所有元素	在线实例
$(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>` 元素	在线实例

四、jQuery事件

jQuery是为事件处理特别设计的。页面对不同访问者的响应叫做事件。事件处理程序指的是当HTML中发生某些事件时所调用的方法。在事件中经常使用术语"触发"（或"激发"）例如： "当您按下按键时触发keypress事件"。
常见DOM事件：

鼠标事件	键盘事件	表单事件	文档/窗口事件
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload
hover

在jQuery中，大多数DOM事件都有一个等效的jQuery方法。

例如点击事件：

$("p").click(function(){
    // 动作触发后执行的代码!!
});

jQuery更多事件参见： https://www.runoob.com/jquery/jquery-events.html

五、jQuery hide()和show()显示和隐藏元素

通过 jQuery，您可以使用hide()和show()方法来隐藏和显示HTML元素。
例如：

$("#hide").click(function(){
  $("p").hide();
});
 
$("#show").click(function(){
  $("p").show();
});

$(selector).hide(speed,callback);
$(selector).show(speed,callback);

可选的speed参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的callback参数是隐藏或显示完成后所执行的函数名称。
$("#hide").click(function(){
  $("p").hide(1000,function(){
	alert("隐藏之后执行的函数");
});
});

toggle()方法
通过jQuery，您可以使用toggle()方法来切换hide()和show()方法。显示被隐藏的元素，并隐藏已显示的元素。
例如：也可以指定speed和callback函数。

$("button").click(function(){
  $("p").toggle();
});

六、jQuery - 链(Chaining)

通过jQuery，可以把动作/方法链接在一起。Chaining允许我们在一条语句中运行多个jQuery方法（在相同的元素上）。

七、jQuery - 获取html内容和属性

jQuery拥有可操作HTML元素和属性的强大方法。
1、获得内容 - text()、html()以及val()
三个简单实用的用于DOM操作的jQuery方法：

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

//获取所选元素的文本内容
$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});

//获取文本内容，包括html
$("#btn2").click(function(){
  alert("HTML: " + $("#test").html());
});

//获取input中的值
$("#btn1").click(function(){
  alert("值为: " + $("#test").val());
});

//设置值
$("#btn1").click(function(){
    $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
    $("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
    $("#test3").val("RUNOOB");
});

2、获取属性 - attr()

//获取a标签中的href属性的值
$("button").click(function(){
  alert($("#runoob").attr("href"));
});

//给属性设置值
$("button").click(function(){
  $("#runoob").attr("href","http://www.runoob.com/jquery");
});

//可以同时设置多个属性的值
$("button").click(function(){
    $("#runoob").attr({
        "href" : "http://www.runoob.com/jquery",
        "title" : "jQuery 教程"
    });
});

八、jQuery - 添加元素

通过jQuery，可以很容易地添加新元素/内容。主要有四个方法，如下：

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

示例：

//在p标签末尾追加
$("p").append("追加文本");

//在p标签开头追加
$("p").prepend("在开头追加文本");
//还可以利用append或者prepend追加多个内容。

jQuery after()和before()方法
jQuery after()方法在被选元素之后插入内容。
jQuery before()方法在被选元素之前插入内容。

//在被选元素之前或者之后添加
$("img").after("在后面添加文本");
$("img").before("在前面添加文本");

九、jQuery - 删除元素

通过jQuery，可以很容易地删除已有的HTML元素。主要有两个方法，如下：

remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素

//删除div1及其里面的所有元素
$("#div1").remove();

//清空div里面的所有元素，但是不清空这个div
$("#div1").empty();

可以对将要删除的元素进行过滤，例如要删指定的某个元素。
例子：删除class="italic"的所有<p>元素：$("p").remove(".italic");

十、jQuery - AJAX

AJAX是与服务器交换数据的技术，它在不重载全部页面的情况下，实现了对部分网页的更新。
jQuery提供多个与AJAX有关的方法。通过jQuery AJAX方法，您能够使用HTTP Get和HTTP Post从远程服务器上请求文本、HTML、XML或JSON- 同时您能够把这些外部数据直接载入网页的被选元素中。
1、jQuery load()方法
jQuery load()方法是简单但强大的AJAX方法。load()方法从服务器加载数据，并把返回的数据放入被选元素中。
语法格式：$(selector).load(URL,data,callback)
必需的URL参数规定您希望加载的URL。即请求的url路径。
可选的data参数规定与请求一同发送的查询字符串键/值对集合。也就是要传递的参数。
可选的callback参数是load()方法完成后所执行的函数名称。请求成功后要执行的函数。

2、AJAX get()方法
两种在客户端和服务器端进行请求-响应的常用方法是：GET和POST。

GET - 从指定的资源请求数据
POST - 向指定的资源提交要处理的数据

GET基本上用于从服务器获得（取回）数据。注释：GET方法可能返回缓存数据。
POST也可用于从服务器获取数据。不过，POST方法不会缓存数据，并且常用于连同请求一起发送数据。
$.get()方法通过HTTP GET请求从服务器上请求数据。
语法格式：$.get(URL,callback)
例如：

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

$.get()的第一个参数是我们希望请求的URL（"demo_test.php"）。
第二个参数是回调函数。第一个回调参数存有被请求页面的内容，第二个回调参数存有请求的状态。

3、AJAX post()方法
$.post()方法通过HTTP POST请求向服务器提交数据。
语法格式:$.post(URL,data,callback)
必需的URL参数规定您希望请求的URL。
可选的data参数规定连同请求发送的数据。
可选的callback参数是请求成功后所执行的函数名。
例如：

$("button").click(function(){
    $.post("/try/ajax/demo_test_post.php",
    {
        name:"菜鸟教程",
        url:"http://www.runoob.com"
    },
    function(data,status){
        alert("数据: \n" + data + "\n状态: " + status);
    });
});