笔记7：Jquery知识

时间  2019-11-06
标签 笔记 jquery 知识 栏目 JQuery 繁體版
原文   原文链接

jQuery

1 基本知识

jQuery 是一个 JavaScript 库。jQuery 极大地简化了 JavaScript 编程。其下载地址：http://jquery.com/download/javascript

<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});
</script>
</head>
<body>
<p>若是你点我，我就会消失。</p>
<p>继续点我!</p>
<p>接着点我!</p>
</body>
</html>
  • jquery语法，jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。

1559785302614

  • 文档就绪事件
$(document).ready(function(){
 
   // 开始写 jQuery 代码...
 
});
等价于
$(function(){
     // 开始写 jQuery 代码...
});
  • jquery选择器

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此以外，它还有一些自定义的选择器。php

$(function(){
    $("button").click(function(){
        $("p").hide();
    });
});
  • id选择器

页面中元素的 id 应该是惟一的，因此您要在页面中选取惟一的元素须要经过 #id 选择器。css

$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});
  • class选择器

Query 类选择器能够经过指定的 class 查找元素。html

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

1559785739292

若是您的网站包含许多页面，而且您但愿您的 jQuery 函数易于维护，那么请把您的 jQuery 函数放到独立的 .js 文件中。当咱们在教程中演示 jQuery 时，会将函数直接添加到 部分中。不过，把它们放到一个单独的文件中会更好，就像这样（经过 src 属性来引用文件）：java

  • jquery事件

页面对不一样访问者的响应叫作事件。事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。jquery

  • 在元素上移动鼠标。
  • 选取单选按钮
  • 点击元素

1559789471915

2 效果

1559790556698

1559790626229

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideToggle("slow");
  });
});
</script>
 
<style type="text/css"> 
#panel,#flip
{
    padding:5px;
    text-align:center;
    background-color:#e5eecc;
    border:solid 1px #c3c3c3;
}
#panel
{
    padding:50px;
    display:none;
}
</style>
</head>
<body>
<div id="flip">点我，显示或隐藏面板。</div>
<div id="panel">Hello world!</div>
</body>
</html>

1559790701468

3 获取内容与属性

jQuery 中很是重要的部分，就是操做 DOM 的能力。jQuery 提供一系列与 DOM 相关的方法，这使访问和操做元素和属性变得很容易。DOM = Document Object Model（文档对象模型）ajax

1559790915314

  • 获取值
$("#btn1").click(function(){
  alert("值为: " + $("#test").val());
});
  • 改变文本中的值
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("#test1").text("Hello world!");
  });
  $("#btn2").click(function(){
    $("#test2").html("<b>Hello world!</b>");
  });
  $("#btn3").click(function(){
    $("#test3").val("RUNOOB");
  });
});
</script>
</head>

<body>
<p id="test1">这是一个段落。</p>
<p id="test2">这是另一个段落。</p>
<p>输入框: <input type="text" id="test3" value="菜鸟教程"></p>
<button id="btn1">设置文本</button>
<button id="btn2">设置 HTML</button>
<button id="btn3">设置值</button>
</body>
  • 改变标签属性
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#runoob").attr("href","http://www.runoob.com/jquery");
  });
});
</script>
</head>

<body>
<p><a href="//www.runoob.com" id="runoob">菜鸟教程</a></p>
<button>修改 href 值</button>
<p>点击按钮修改后，能够点击连接查看连接地址是否变化。</p>
</body>
  • 添加元素

1559791189918

  • 操做CSS

1559791334083

  • 向元素添加css样式
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("h1,h2,p").addClass("blue");
    $("div").addClass("important");
  });
});
</script>
<style type="text/css">
.important
{
    font-weight:bold;
    font-size:xx-large;
}
.blue
{
    color:blue;
}
</style>
</head>
<body>

<h1>标题 1</h1>
<h2>标题 2</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<div>这是一些重要的文本!</div>
<br>
<button>为元素添加 class</button>

</body>
  • 返回css元素属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    alert("背景颜色 = " + $("p").css("background-color"));
  });
});
</script>
</head>

<body>
<h2>这是一个标题</h2>
<p style="background-color:#ff0000">这是一个段落。</p>
<p style="background-color:#00ff00">这是一个段落。</p>
<p style="background-color:#0000ff">这是一个段落。</p>
<button>返回第一个 p 元素的 background-color </button>
</body>
</html>
  • jQuery遍历

1559791603479

  • ajax。AJAX 是与服务器交换数据的技术，它在不重载所有页面的状况下，实现了对部分网页的更新。

AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。简短地说，在不重载整个网页的状况下，AJAX 经过后台加载数据，并在网页上进行显示。jQuery load() 方法是简单但强大的 AJAX 方法。load() 方法从服务器加载数据，并把返回的数据放入被选元素中。语法：编程

$(selector).load(URL,data,callback);
  • 回调函数

可选的 callback 参数规定当 load() 方法完成后所要容许的回调函数。回调函数能够设置不一样的参数：json

  • responseTxt - 包含调用成功时的结果内容
  • statusTXT - 包含调用的状态
  • xhr - 包含 XMLHttpRequest 对象

下面的例子会在 load() 方法完成后显示一个提示框。若是 load() 方法已成功，则显示"外部内容加载成功！"，而若是失败，则显示错误消息：跨域

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").load("/try/ajax/demo_test.txt",function(responseTxt,statusTxt,xhr){
      if(statusTxt=="success")
        alert("外部内容加载成功!");
      if(statusTxt=="error")
        alert("Error: "+xhr.status+": "+xhr.statusText);
    });
  });
});
</script>
</head>
<body>

<div id="div1"><h2>使用 jQuery AJAX 修改该文本</h2></div>
<button>获取外部内容</button>

</body>
</html>
  • get和post

jQuery get() 和 post() 方法用于经过 HTTP GET 或 POST 请求从服务器请求数据。HTTP 请求：GET vs. POST，两种在客户端和服务器端进行请求-响应的经常使用方法是：GET 和 POST。

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

GET 基本上用于从服务器得到（取回）数据。注释：GET 方法可能返回缓存数据。POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，而且经常使用于连同请求一块儿发送数据。

$.get(URL,callback);

demo_test.php 文件代码:
<?php
echo '这是个从PHP文件中读取的数据。';
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $.get("/try/ajax/demo_test.php",function(data,status){
            alert("数据: " + data + "\n状态: " + status);
        });
    });
});
</script>
</head>
<body>

<button>发送一个 HTTP GET 请求并获取返回结果</button>

</body>
</html>

$.post() 方法经过 HTTP POST 请求向服务器提交数据。必需的 URL 参数规定您但愿请求的 URL。可选的 data 参数规定连同请求发送的数据。可选的 callback 参数是请求成功后所执行的函数名。

$.post(URL,data,callback);

demo_test_post.php 文件代码:
<?php
$name = isset($_POST['name']) ? htmlspecialchars($_POST['name']) : '';
$url = isset($_POST['url']) ? htmlspecialchars($_POST['url']) : '';
echo '网站名: ' . $name;
echo "\n";
echo 'URL 地址: ' .$url;
?>
$("button").click(function(){
    $.post("/try/ajax/demo_test_post.php",
    {
        name:"菜鸟教程",
        url:"http://www.runoob.com"
    },
        function(data,status){
        alert("数据: \n" + data + "\n状态: " + status);
    });
});
  • JSONP

Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可让网页从别的域名（网站）那获取资料，即跨域读取数据。为何咱们从不一样的域（网站）访问数据须要一个特殊的技术(JSONP )呢？这是由于同源策略。同源策略，它是由Netscape提出的一个著名的安全策略，如今全部支持JavaScript 的浏览器都会使用这个策略。

服务器JSON数据，服务端文件jsonp.php代码为：

<?php
header('Content-type: application/json');
//获取回调函数名
$jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']);
//json数据
$json_data = '["customername1","customername2"]';
//输出jsonp格式的数据
echo $jsoncallback . "(" . $json_data . ")";
?>

客户端实现 callbackFunction 函数

<script type="text/javascript">
function callbackFunction(result, methodName)
{
    var html = '<ul>';
    for(var i = 0; i < result.length; i++)
    {
        html += '<li>' + result[i] + '</li>';
    }
    html += '</ul>';
    document.getElementById('divCustomers').innerHTML = html;
}
</script>
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程