jQuery语法、选择器

jQuery

一、简介

jQuery是一个JavaScript函数库。

jQuery库包含以下功能：

​ 1.html元素选取

​ 2.html元素操作

​ 3.CSS操作

​ 4.HTML事件函数

​ 5.JavaScript特效和动画

​ 6.HTML DOM遍历和修改

​ 7.AJAX

​ 8.Utilities

二、语法

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

基础语法： $(selector).action()

• 美元符号定义 jQuery
• 选择符（selector）“查询"和"查找” HTML 元素
• jQuery 的 action() 执行对元素的操作

实例:

• $(this).hide() - 隐藏当前元素
• $(“p”).hide() - 隐藏所有

  元素

• $(“p.test”).hide() - 隐藏所有 class=“test” 的

  元素

• $("#test").hide() - 隐藏所有 id=“test” 的元素

三、对象

<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
    $(function(){
        //JS对象转换成Jquery对象。 $()包裹起来即可。
        //var div1 = document.getElementById("div1");
        //var jqDiv1 = $(div1);
        //alert(jqDiv1.attr("id"))
        //Jquery对象转换成JS对象。1.JQ对象.get(index)   2.JQ对象[index]
        //var div1 = $("#div1")[0];
        var div1 = $("#div1").get(0);
        var result = div1.getAttribute("haha");
        alert(result)
        //注意:DOM 对象才能使用DOM 中的方法，jQuery 对象是不可以使用DOM中的方法。
    })
</script>

四、选择器

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。

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

jQuery 中所有选择器都以美元符号开头：$()。

1、基本选择器

$("p")：根据给定的元素名匹配所有元素
$("#test")：根据给定的ID匹配一个元素
$(".test")：根据给定的类匹配元素
$("*")：匹配所有元素
$("div,span,p.myClass")：将每一个选择器匹配到的元素合并后一起返回
$('li:first')：获取第一个元素
$('li:last')：获取最后个元素
$("input:not(:checked)")：去除所有与给定选择器匹配的元素
$("tr:even")：匹配所有索引值为偶数的元素，从0开始计数
$("tr:odd")：匹配所有索引值为奇数的元素，从0开始计数
$("tr:eq(1)")：匹配一个给定索引值的元素
$("tr:gt(0)")：匹配所有大于给定索引值的元素
$("tr:lt(2)")：匹配所有小于给定索引值的元素
$(":header")：匹配如 h1, h2, h3之类的标题元素
$(":animated")：匹配所有正在执行动画效果的元素
$(":focus")：匹配当前获取焦点的元素

2、层级选择器

$("form input")：在给定的祖先元素下匹配所有的后代元素
$("form > input")：在给定的父元素下匹配所有的子元素
$("label + input")：匹配所有紧接在 prev 元素后的 next 元素
$("form ~ input")：匹配 prev 元素之后的所有 siblings 元素

3、内容选择器

$("div:contains('John')")：匹配包含给定文本的元素
$("td:empty")：匹配所有不包含子元素或者文本的空元素
$("div:has(p)").addClass("test")：匹配含有选择器所匹配的元素的元素
$("td:parent")：匹配含有子元素或者文本的元素

4、可见性选择器

$("tr:hidden")：匹配所有不可见元素，或者type为hidden的元素
$("tr:visible")：匹配所有的可见元素

5、属性选择器

$("div[id]")：匹配包含给定属性的元素
$("input[name='newsletter']")：匹配给定的属性是某个特定值的元素
$("input[name!='newsletter']")：匹配所有不含有指定的属性，或者属性不等于特定值的元素
$("input[name^='news']")：匹配给定的属性是以某些值开始的元素
$("input[name$='letter']")：匹配给定的属性是以某些值结尾的元素
$("input[name*='man']")：匹配给定的属性是以包含某些值的元素
$("input[id][name$='man']")：复合属性选择器，需要同时满足多个条件时使用

6、子元素选择器

$("ul li:nth-child(2)")：匹配其父元素下的第N个子或奇偶元素
$("ul li:first-child")：匹配第一个子元素
$("ul li:last-child")：匹配最后一个子元素
$("ul li:only-child")：如果某个元素是父元素中唯一的子元素，那将会被匹配，如果父元素中含有其他元素，那将不会被匹配

五、属性

attr()  设置或返回被选元素的属性值。
removeAttr(name)  从每一个匹配的元素中删除一个属性
prop(name|properties|key,value|fn) 获取在匹配的元素集中的第一个元素的属性值。//为checked时用
html([val|fn])  取得第一个匹配元素的html内容。
text([val|fn])  取得所有匹配元素的内容。
val([val|fn|arr])  获得匹配元素的value值。

六、AJAX

​ AJAX是与服务器交换数据的技术，它在补充在全部页面的情况下，实现了对部分王爷的更新。

AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。

简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。

jQuery.ajax(url,[settings])
url:一个用来包含发送请求的URL字符串。
settings:AJAX 请求设置。所有选项都是可选的。
dataType  预期服务器返回的数据类型。
success  请求成功后的回调函数。

jQuery.post(url, [data], [callback], [type])
通过远程 HTTP POST 请求载入信息。
这是一个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。
url:发送请求地址。
data:待发送 Key/value 参数。
callback:发送成功时回调函数。
type:返回内容格式，xml, html, script, json, text, _default

<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
    $(function(){
    $.post("http://192.168.14.15:8080/show/ShowAction?startindex=0&endindex=20",
           function(msg){
        $.each(msg.list, function(index) {
            $("#app").append("<div><img src='"+this.cover+"' title='"+this.title+"'>评分:"+ this.rate +"</div>")
        });
    },"json")
});
</script>