码迷,mamicode.com
首页 > 其他好文 > 详细

jqurey基础一

时间:2016-09-09 12:01:52      阅读:143      评论:0      收藏:0      [点我收藏+]

标签:

jqurey1

 

 

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"); )

jqurey基础一

标签:

原文地址:http://www.cnblogs.com/shuiyaodongwu310988929/p/5855795.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!