JQuery

Posted 2020-10-05 忘尘天外天

　　JQuery是一个javascript函数库。极大地简化了JavaScript编程。同时也很容易学习。

　　JQuery库包含以下特性：

• html元素的选取
• HTML元素的操作
• CSS操作
• HTML时间函数
• JavaScript特效和动画
• HTML DOM 遍历和修改
• AJAX
• Utilities

　　JQuery库位于一个JavaScript文件中，包含所有的JQuery函数，可以通过<script>标签把JQuery添加到网页上。

　　JQuery语法：是为HTML元素的选取编制的，可以对元素执行某些操作。基础语法是：$(selector).action() 

• 　　美元符号($)定义JQuery
• 　　选择器(selector)查询和查找HTML元素
• 　　JQuery的zction()对元素执行操作

　　通常，文档中的JQuery函数都位于一个document ready函数中：$(document).ready(function(){......}) ;   这是为了防止文档在完全加载就绪之前运行JQuery代码。

　　JQuery选择器

　　通过选择器可以对元素组或单个元素进行操作。JQuery元素选择器和属性选择器允许通过标签名、属性名或内容对HTML元素进行选择。选择器允许对HTML元素组或单个元素进行操作。

JQuery元素选择器

　　JQuery使用CSS选择器里选取HTML元素

　　$("p")选取<p>元素。

　　$("p.intro")选取所有class="intro"的<p>元素。

　　$("p#demo")选取所有id="demo"的<p>元素。

JQuery属性选择器

　　JQuery使用XPath表达式来选择带有给定属性的元素

　　$("[href]")选取所有带有href属性的元素。

　　$("[href=‘#‘]")选取所有带有href值等于"#"的元素。

　　$("[href!=‘#‘]")选取所有带有href值不等于"#"的元素。

　　$("[href$=‘.jpg‘]")选取所有href值以".jpg"结尾的元素。

JQuery CSS选择器

　　JQuery  CSS选择器可用于改变HTML元素的CSS属性。

    $("p").css("background-color","red") ;

 JQuery选择器：

选择器	实例	选取
*	$("*")	所有元素
#id	$("#lastname")	id="lastname"的元素
.calss	$(".intro")	所有class="intro"的元素
element	$("p")	所有<p>元素
.class.class	$(".intro.demo")	所有class="intro"且class="demo"的元素
:first	$("p:first")	<p>元素的第一个
:last	$("p:last")	<p>元素的最后一个
:even	$("tr:even")	所有偶数的<tr>元素
:odd	$("tr:odd")	所有奇数的<tr>元素
:eq(index)	$("ul li:eq(3)")	列表中的第四个元素（index从0 开始）
:gt(no)	$("ul li:gt(3)")	列出index大于3 的元素
:lt(no)	$("ul li:lt(3)")	列出index小于3 的元素
:not()	$("input:not(:empty)")	所有不为空的input元素
:heder	$("header")	所有标题元素<h1>--<h6>
:animate		所有动画元素
:contains(text)	$("contains(W3S)")	编号指定字符串的所有元素
:empty	$(":empty")	无子元素的所有元素
:hidden	$("p:hidden")	所有隐藏的<p>元素
:visible	$("table:visible")	所有可见的表格
s1,s2,s3	$("th,td,intro")	所有带匹配选择的元素
[attribute]	$("[href]")	所有带有href属性的元素
[attribute-value]	$("[href=‘#‘]")	所有href属性的值等于"#"的元素
[attribute!=value]	$("[href!=‘#‘]")	所有href属性的值不等于"#"的元素
[attribute$=value]	$("[href$=‘.jpg‘]")	所有href属性的值包含以".jpg"结尾的元素
:input	$(":input")	所有<input>元素
:text	$(":text")	所有type="text"的元素
:password	$(":password")	所有type="password"的元素
:radio	$(":radio")	所有type="radio"的元素
:checkbox	$(":checkbox")	所有type="checkbox"的元素
:submit	$(":submit")	所有type="submit"的元素
:reset	$(":reset")	所有type="reset"的元素
:button	$(":button")	所有type="button"的元素
:image	$(":image")	所有type="image"的元素
:file	$(":file")	所有type="file"的元素
:enabled	$(":enabled")	所有激活的 input 元素
:disabled	$(":disabled")	所有禁用的 input 元素
:selected	$(":selected")	所有被选取的 input 元素
:checked	$(":checked")	所有被选中的 input 元素