笔记7：Jquery知识

2023-08-13 14:12:58

jQuery

1 基本知识

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

<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 选择器语法的组合。

文档就绪事件

$(document).ready(function(){

   // 开始写 jQuery 代码...

});

等价于

$(function(){

     // 开始写 jQuery 代码...

});

jquery选择器

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

$(function(){

    $("button").click(function(){

        $("p").hide();

    });

});

id选择器

页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。

$(document).ready(function(){

  $("button").click(function(){

    $("#test").hide();

  });

});

class选择器

Query 类选择器可以通过指定的 class 查找元素。

$(function(){

    $("button").click(function(){

        $("p").hide();

    });

});

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

jquery事件

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

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

2 效果

<!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>

3 获取内容与属性

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

获取值

$("#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>

添加元素

操作CSS

向元素添加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遍历

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

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

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

回调函数

可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：

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>

码农公寓

jQuery

1 基本知识

2 效果

3 获取内容与属性

相关文章