jqurey基础一

Posted 2020-08-08

jqurey1

用法

笔记

jqurey

 

• • • API的使用
    • jqurey的详细介绍

 

API的使用

• 引入包名

  1. <script src = "jquery-1.11.1.min.js"><script> 

     ---

  2.  

     ---

• 入口函数

  • 方式1

  1. $(document).ready(function (){ 

     ---

  2. alert("入口函数1"); 

     ---

  3.  

     ---

  4. }); 

     ---

  • 方式2

    1. $(function(){ 

       ---

    2. alert("入口函数2"); 

       ---

    3. });  

       ---

• 事件的处理程序

  1. <script src="包名"> </script>  

     ---

  2. <script> 

     ---

  3. $(function(){ 

     ---

  4. $("#demo").click(function(){ 

     ---

  5. alert("btn事件处理程序"); 

     ---

  6. $("btn").click(function(){ 

     ---

  7. $("div").hide  

     ---

  8. }); 

     ---

  9. }); 

     ---

  10. }); 

      ---

  11. </script>  

      ---

  1. //html文件13297974522 

     ---

  2. <input type = "button" value="按钮" id="btn"/> 

     ---

  3. <div></div> 

     ---

jqurey的详细介绍

• JS入口函数跟jquery入口函数的区别:

JS的window.onload事件是等到所有的内容,以及我们的外部图片之类的文件加载完之后,才回去执行
jQuery的入口函数是在html所有标签都加载之后,就回去执行.

• jquery基本选择器

基本选择器
符号	说明	用法
$("#demo")	选择id为demo的第一个元素	$("demo").css("background","red")修改了id为demo元素的CSS样式
$(".style")	选择所有类名为style的元素	$(".style").css("background","yellow")修改了class为style的所有元素的样式
$("div")	选择标签为div的所有元素	$("div").css("background","blue")
$("*")	选择所有元素,一般很少用	$("*").css("background","green");
$("div ,.sty")	复合选择器,选择所有的div元素和类名为sty的元素	$("div ,.sty").css("background","blue")

• jQuery的其他选择器(层级选择器)

层级选择器
符号	说明	用法
空格	后代选择器,选择所有的后代元素	$("div span").css("background","red");
>	子代选择器,选择所有的子代选择器	$("div>p").css("background","yellow");
+	选择紧邻着的下一个元素	$("div + p").css("background","blue");
~	兄弟选择器,选择兄弟后面的所有元素	$("div ~ h1").css("background","yellow")
-------------	-------------	-------------

• 过滤选择器的使用

过滤选择器的使用
选择器	描述	返回	示例
:first	选取第一个元素	单个元素	$("first:div").css("background","red");选取所有DIV元素中的第一个元素
:last	选取最后一个元素	单个元素	$("last:div").css("background","red");
:not(select)	去除所有与给定选择器匹配的元素	集合元素	$("div:not(.myClass)")选取class不是myClass的div元素
:even	选取索引(从0开始)是偶数的所有元素	集合元素	$("div:even").css("background","red");
: odd	选取索引(从0开始)是奇数的所有元素	集合元素	$("div: odd").css("background","blue");
:lt(index)	选取索引(从0开始)小于index的所有元素	集合元素	$("div:lt(2)").css("background","red")
:gt	index是从0开始,选取大于index值得所有元素	集合元素	$("div:gt(1)".css("background","blue"))
:eq(index)	index是从0开始,选取等于index值得元素	单个元素	$("div:eq(2)".css("background","blue"); )