zoukankan      html  css  js  c++  java

  • jQuery基础

    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 + "
状态: " + 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("数据: 
" + data + "
状态: " + 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
  • 相关阅读:
    Java构造和解析Json数据的两种方法详解一
    使用json-lib进行Java和JSON之间的转换
    java 读取文件转换成字符串
    Jackson 框架，轻易转换JSON
    （转载）最黑的黑客米特尼克：多次耍FBI 终被高手擒
    （转载）Linux下IPTABLES防火墙的设定
    （转载）Linux下IPTABLES配置详解
    （转载）Linux上iptables防火墙的基本应用教程
    （转载）更好的重启nginx 服务器
    （转载）JavaScript中的Window窗口对象
  • 原文地址：https://www.cnblogs.com/jasonboren/p/12995627.html
Copyright © 2011-2022 走看看