jQuery基础

tztzyzyz 2020-05-31

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事件:

鼠标事件键盘事件表单事件文档/窗口事件
clickkeypresssubmitload
dblclickkeydownchangeresize
mouseenterkeyupfocusscroll
mouseleaveblurunload
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);
    });
});

十一、GET和POST方法的区别

1、发送的数据数量
在GET中,只能发送有限数量的数据,因为数据是在URL中发送的。
在POST中,可以发送大量的数据,因为数据是在正文主体中发送的。

2、安全性
GET方法发送的数据不受保护,因为数据在URL栏中公开,这增加了漏洞和黑客攻击的风险。
POST方法发送的数据是安全的,因为数据未在URL栏中公开,还可以在其中使用多种编码技术这使其具有弹性。

3、加入书签中
GET查询的结果可以加入书签中,因为它以URL的形式存在;而POST查询的结果无法加入书签中。

4、编码
在表单中使用GET方法时,数据类型中只接受ASCII字符。
在表单提交时,POST方法不绑定表单数据类型,并允许二进制和ASCII字符。

5、可变大小
GET方法中的可变大小约为2000个字符。
POST方法最多允许8 Mb的可变大小。

6、缓存

GET方法的数据是可缓存的,而POST方法的数据是无法缓存的。

7、主要作用
GET方法主要用于获取信息。而POST方法主要用于更新数据。

参考资料:(1) https://www.runoob.com/jquery/jquery-tutorial.html

相关推荐

Web全栈笔记 / 0评论 2020-06-15