第49天：绑定方法的几个案例及jQuery快速入门

绑定方法的案例

        定时器示例

    
    
    



开始
结束

        搜索框示例

         省市联动

  
  
  
  



  请选择省:



  请选择市:

jQuery快速入门

        jQuery介绍

1. jQuery是一个轻量级的、兼容多浏览器的JavaScript库。
2. jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“

        jQuery内容

1. 选择器
2. 筛选器
3. 样式操作
4. 文本操作
5. 属性操作
6. 文档处理
7. 事件
8. 动画效果
9. 插

下载链接：jQuery官网

中文文档：jQuery AP中文文档

        jQuery对象

        就是通过jQuery包装DOM对象后产生的对象。jQuery对象是 jQuery独有的。如果一个对象是 jQuery对象，那么它就可以使用jQuery里的方法：例如$(“#i1”).html()。 

        $("#i1").html()的意思是：获取id值为 i1的元素的html代码。其中 html()是jQuery里的方法。

        相当于： document.getElementById("i1").innerHTML;

        jQuery基础语法

$(selector).action()

        查找标签

        基本选择器

        id选择器

$("#id")

        标签选择器

$("tagName")

        class选择器

$(".className")

         组合选择器

$("#id, .className, tagName")

$('#d1,.c1,p')  # 并列+混用
$('div span')  # 后代
$('div>span')  # 儿子
$('div+span')  # 毗邻
$('div~span')  # 弟弟

         基本筛选器

:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
复制代码

        例：

$('ul li:first')  # 大儿子 
$('ul li:last')  # 小儿子
$('ul li:eq(2)')		# 放索引
$('ul li:even')  # 偶数索引 0包含在内
$('ul li:odd')  # 奇数索引
$('ul li:gt(2)')  # 大于索引
$('ul li:lt(2)')  # 小于索引
$('ul li:not("#d1")')  # 移除满足条件的标签
$("div:has('h1')")// 找到所有后代中有h1标签的div标签
$("div:has(.c1)")// 找到所有后代中有c1样式类的div标签
$("li:not(.c1)")// 找到所有不包含c1样式类的li标签
$("li:not(:has(a))")// 找到所有后代中不含a标签的li标签

        属性选择器

        例

$("input[type='checkbox']");// 取到checkbox类型的input标签
$("input[type!='text']");// 取到类型不是text的input标签

        表单筛选器

:text
:password
:file
:radio
:checkbox
:submit
:reset
:button

        例

$(":checkbox")  // 找到所有的checkbox
$('input[type="text"]')---------->$(':text') 
$('input[type="password"]')---------->$(':password') 

        表单对象属性 

:enabled
:disabled
:checked
:selected

         筛选器方法

        下一个元素

$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")

        上一个元素

$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")

        父亲元素

$("#id").parent()
$("#id").parents()  // 查找当前元素的所有的父辈元素
$("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。