jQuery理解：
这是菜鸟教程的解释：
jQuery 是一个 JavaScript 库。
jQuery 极大地简化了 JavaScript 编程。
jQuery 很容易学习。
JSP和JQ都是要写到
<script>//这是jQuery获取标签，并再点击标签后，进行当前点击对象隐藏效果；
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
<body>
<h1>我的第一个 Web 页面</h1>
<p id="demo">我的第一个段落</p>
<script>
document.getElementById("demo").innerHTML = "段落已修改。";
</script>
</body>
语法
jQuery 语法
jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
基础语法： $(selector).action()
美元符号定义 jQuery
选择符（selector）“查询"和"查找” HTML 元素
jQuery 的 action() 执行对元素的操作
实例:
$(this).hide() - 隐藏当前元素
$(“p”).hide() - 隐藏所有
元素
$(“p.test”).hide() - 隐藏所有 class=“test” 的
元素
$("#test").hide() - 隐藏 id=“test” 的元素
准备就绪
$(document).ready(function(){
// 开始写 jQuery 代码…
});
jQuery addClass() 方法
<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>
</html>
添加、删除多个类
jQuery 操作 CSS
jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些：
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性
设置多个 CSS 属性
如需设置多个 CSS 属性，请使用如下语法：
css({“propertyname”:“value”,“propertyname”:“value”,…});
下面的例子将为所有匹配元素设置 background-color 和 font-size：
实例
$(“p”).css({“background-color”:“yellow”,“font-size”:“200%”});
jQuery parents() 方法
parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 ()。
下面的例子返回所有 元素的所有祖先：
实例
$(document).ready(function(){
$(“span”).parents();
});
jQuery 语法
jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
基础语法： $(selector).action()
美元符号定义 jQuery
选择符（selector）“查询"和"查找” HTML 元素
jQuery 的 action() 执行对元素的操作
实例:
$(this).hide() - 隐藏当前元素
$(“p”).hide() - 隐藏所有
元素
$(“p.test”).hide() - 隐藏所有 class=“test” 的
元素
$("#test").hide() - 隐藏 id=“test” 的元素
元素选择器
在页面中选取所有
元素:$("p")
#id 选择器
通过 id 选取元素语法如下：$("#test")
.class 选择器
语法如下：$(".test")
语法 描述 实例
https://www.cnblogs.com/cxd4321/p/3232396.html
$(document)//选择整个文档对象
$('#myId')//选择ID为myId的网页元素
$('div.myClass')//选择class为myClass的div元素
$('input[name=first]')//选择name属性等于first的input元素
$('a:first')//选择网页中第一个a元素
$('tr:odd')//选择表格的奇数行
$('#myForm :input')//选择表单中的input元素
$('div:visible') //选择可见的div元素
$('div:gt(2)')//选择所有的div元素，除了前三个
$('div:animated')//选择当前处于动画状态的div元素
$("*") 选取所有元素
$(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> 元素
$("#id", ".class") 复合选择器
$(div p span) 层级选择器 //div下的p元素中的span元素
$(div>p) 父子选择器 //div下的所有p元素
$(div+p) 相邻元素选择器 //div后面的p元素(仅一个p)
$(div~p) 兄弟选择器 //div后面的所有p元素(同级别)
$(.p:last) 类选择器 加 过滤选择器 第一个和最后一个（first 或者 last）
$("#mytable td:odd") 层级选择 加 过滤选择器 奇偶（odd 或者 even）
$("div p:eq(2)") 索引选择器 div下的第三个p元素（索引是从0开始）
$("a[href='www.baidu.com']") 属性选择器
$("p:contains(test)") // 内容过滤选择器，包含text内容的p元素
$(":emtyp") //内容过滤选择器，所有空标签（不包含子标签和内容的标签）parent 相反
$(":hidden") //所有隐藏元素 visible
$("input:enabled") //选取所有启用的表单元素
$(":disabled") //所有不可用的元素
$("input:checked") //获取所有选中的复选框单选按钮等
$("select option:selected") //获取选中的选项元素
独立文件中使用 jQuery 函数
<head>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script src="my_jquery_functions.js"></script>
</head>
通过 jQuery text() 和 html() 方法来获得内容：
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
通过 jQuery val() 方法获得输入字段的值：
$("#btn1").click(function(){
alert("值为: " + $("#test").val());
});
获取属性 - attr()
jQuery attr() 方法用于获取属性值。
下面的例子演示如何获得链接中 href 属性的值：
实例
KaTeX parse error: Expected '}', got 'EOF' at end of input: …ion(){ alert(("#runoob").attr(“href”));
});
动作事件
效果
jQuery $.post() 方法
$.post() 方法通过 HTTP POST 请求向服务器提交数据。
语法:
$.post(URL,data,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 data 参数规定连同请求发送的数据。
可选的 callback 参数是请求成功后所执行的函数名。
下面的例子使用 $.post() 连同请求一起发送数据：
实例
$("button").click(function(){
$.post("/try/ajax/demo_test_post.php",
{
name:"菜鸟教程",
url:"http://www.runoob.com"
},
function(data,status){
alert("数据: \n" + data + "\n状态: " + status);
});
});
尝试一下 »
$.post() 的第一个参数是我们希望请求的 URL (“demo_test_post.php”)。
然后我们连同请求（name 和 url）一起发送数据。
“demo_test_post.php” 中的 PHP 脚本读取这些参数，对它们进行处理，然后返回结果。
第三个参数是回调函数。第一个回调参数存有被请求页面的内容，而第二个参数存有请求的状态。
提示： 这个 PHP 文件 (“demo_test_post.php”) 类似这样：
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;
?>
jQuery $.get() 方法
$.get() 方法通过 HTTP GET 请求从服务器上请求数据。
语法：
$.get(URL,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 callback 参数是请求成功后所执行的函数名。
下面的例子使用 $.get() 方法从服务器上的一个文件中取回数据：
实例
$("button").click(function(){
$.get("demo_test.php",function(data,status){
alert("数据: " + data + "\n状态: " + status);
});
});
区别：有无传递参数过去，post传参了
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
