你的位置:首页 > Java教程

[Java教程]jqurey基础一


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")
:gtindex是从0开始,选取大于index值得所有元素集合元素$("div:gt(1)".css("background","blue"))
:eq(index)index是从0开始,选取等于index值得元素单个元素$("div:eq(2)".css("background","blue"); )