jQuery简介及其选择器

web(2.12-2.13)

一、jQuery简介

jQuery是一个轻量级的"写的少，做的多"的JavaScript库；
jQuery 是目前最流行的 JS 框架；
jQuery库 在head body里面都是可以引入
在写jQuery 代码的时候先引入jQuery文件(库),才能去写常规的jquery代码
运行时先跑jQuery库代码 在走写的jQuery代码;

• jQuery dom获取出现在元素初始化之前，为保证正常获取，处理方法：

 $(document).ready(function (){
        //页面加载完成执行的函数
 });
//简写方式
$(function(){
})

• 原型及原型链
  

二、jQuery选择器

1.基本选择器

• $("#id")
• $(“element”)
• $(".class")
• $("*")
• $(“selector1,selector2”);

2.层次选择器

• $(“parent>child”)
• $(“pre+next”)：匹配所有跟在 pre后面的 next 元素；
• $(“pre~siblings”)：匹配 prev 元素之后的所有 siblings 元素；
• $(“ancestor descendant”):匹配给定的祖先元素下所有的后代元素

3.基本筛选器

• $(“ele:first”);获取匹配的第一个元素；
• $(“ele:eq(index)”);匹配一个等于给定索引值的元素,index从0开始
• $(“ele:lt(index)”);匹配一个小于给定索引值的元素,index从0开始
• $(“ele:gt(index)”);匹配一个大于给定索引值的元素,index从0开始
• $(":header")); 获取所有的h标签
• $(“input:focus”)); 获取获得焦点的元素
• $(":root")); 直接获取html
• :not :last :even :odd 均与js用法相同

4.内容选择器

• $(“ele:contains('text’)”)); //获取包含text内容的元素
• $(“ele:empty”)); //获取空元素
• $(“ele:has(ele1)”));//匹配包含ele1元素的ele元素
• $(“ele:parent”)); //匹配名为ele的父元素

5.可见性选择器

• $(“ele:visible”); 匹配可见元素
• $(“ele:hidden”); 匹配隐藏元素

6.子元素

• ele:first-child;

• ele:last-child;

• ele:only-of-type;获取父元素下同类型标签的子元素有且仅有一个

• ele:only-child；匹配的ele元素必须是父元素的唯一子元素

• $(“ul>li:nth-child(1)”) 匹配所有ul下的第一个li，第一个子元素是li输出，第一个子元素不是li不输出

• $(“ul>li:nth-last-child(1)”) 匹配所有ul下的第一个li，第一个子元素是li输出，第一个子元素不是li不输出

7.表单元素选择器

• :input 匹配所有 input, textarea, select 和 button 元素
• :text 获取单行文本框的
• :password 获取密码框的
• :radio //获取单选按钮的
• :checkbox //获取复选框的
• :submit //获取表单提交的
• :image
• :reset 获取重置按钮
• :button 获取button
• :file 获取文件路径*/

8.表单对象属性

• $(“input:enabled”));// 获取可用的标签
• $(“input:disabled”));
• $(“input:checked”)); //针对checkbox radio
• $(“option:selected”)); //针对下拉菜单

9.属性选择器

• ele[attribute]
• ele[attribute=value]
• ele[attribute!=value]
• ele[attribute^=value] 属性值以value开头
• ele[attribute$=value] 属性值以value结尾
• ele[attribute*=value] 属性值包含value