jQuery里面的选择器

jQuery里面dom元素的获取
基本选择器
id class 元素 * 复合元素选取

//$()  jQuery()

//jQuery dom元素获取时注意元素是否初始化
//jQuery 加载函数 类似浏览器的加载完成事件window.onloade

$(document).ready(function(){
	//加载完成之后去执行的函数
	console.log("加载完成");
	console.log($("#btn"));
});

简写函数

$(function(){
//console.log("加载完成")；
//jQuery对象返回的是一个集合    类似于数组
console.log($("#bth"));
console.log($("#btn")[0]);
console.log($(".btn"));
console.log($("button"));
console.log($("*"));//获取所有元素
console.log($("button,input"));
})

//jQuery返回的是集合 直接使用 jquery代码可以进行隐式迭代（可以进行一堆操作）

层次选择器

console.log($("ul.menu li"));
console.log($("ul.menu>li"));

console.log($(".li2+li"));//+代表下一个li
console.log($(".li2~li"));//~获取当前匹配元素之后的所有

基本筛选器

console.log($("ul.menu>li:first"));
console.log($("ul.menu>li:last"));
console.log($("ul.menu>li:not(.li2)"));
console.log($("ul.menu>li:even"));//偶数获取
console.log($("ul.menu>li:odd"));//奇数获取
console.log($("ul.menu>li:eq(2)"));//按照索引来获取
console.log($("ul.menu>li:gt(2)"));//获取大于索引
console.log($("ul.menu>li:lt(2)"));//获取大于索引
console.log($(":header"));//获取所有的h标签
console.log($("input:focus"));//获取获得焦点的元素
console.log($(":root"));//直接获取html
console.log($("button[id]"));
console.log($("button[id][class]"));
console.log($("button[id='btn']"));
console.log($("button[id='btn'][class='btn']"));
console.log($("button[id!='btn']"));
console.log($("button[id!='btn'][class!='btn']"));
console.log($("button[id^='b']"));//获取的属性值以什么开头
console.log($("button[id$='n']"));//获取的属性值以什么结尾
console.log($("button[id*='n']"));//获取的属性值包含什么

内容选择器

//:contains(text)
//:empty:has(selector)
//:parent

console.log($("div:contains('今')"));//包含某个内容
console.log($("div:empty")); //直接获取空元素
console.log($("ul:has(.li2)"));//匹配包含某个元素的父元素
console.log($("div:parent"));//匹配的元素必须是父元素

可见性
//:hidden
//:visible
//根据元素的显示隐藏来匹配元素
console.log($("button:visible"));
console.log($("button:hidden"));

属性
console.log($("button[id]"));
console.log($("button[id][class]"));
console.log($("button[id='btn']"));
console.log($("button[id='btn'][class='btn']"));
console.log($("button[id!='btn']"));
console.log($("button[id!='btn'][class!='btn']"));
console.log($("button[id^='b']"));//获取的属性值以什么开头
console.log($("button[id$='n']"));//获取的属性值以什么结尾
console.log($("button[id*='n']"));//获取的属性值包含什么

子元素过滤选择器

console.log($("ul>li:first-child"));//匹配第一个子元素
console.log($("ul>li:last-child"));//匹配最后一个子元素
console.log($("ul>li:first-of-type"));//匹配父元素 里面元素的第一个
console.log($("ul>li:last-of-type"));//匹配父元素 里面元素的最后一个
//上面的两个一对  之间的区别是  first-child last-child 如果指定元素标签 找当前标签里面的第一个  如果没写  找所有元素里面的第一个
//first-of-type last-of-type  如果写指定标签  获取指定标签里面的第一个   如果没写  获取所有类型标签里面的第一个
console.log($("ul>li:nth-child(2)"));//括号里面写的是序号   1·开始
console.log($("ul>li:nth-last-child(2)"));//括号里面写的是序号   1·开始  后往前
console.log($("ul>:nth-last-of-type(1)"));//后往前  按类型获取标签里面的最后一个
console.log($("ul>:nth-of-type(1)"));//前往后  按类型获取标签里面的第一个
console.log($("ul:only-child"));//匹配的元素必须是父元素的唯一子元素
console.log($("ul>p:only-of-type"));//获取父元素里面同类型标签里面只有唯一的一个标签  全部获取到

表单元素选择器

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

//表单对象属性获取
console.log($("input:disabled"));
console.log($("input:enabled"));
console.log($("input:checked"));//获取CheckBox  radio  被选择的元素
console.log($("select option:selected"));//匹配被选择的下拉的option

//混淆选择器 版本低  .escapeSelector is not a function
console.log("."+$.escapeSelector(".box"));//\.box
console.log($(".block").find("."+$.escapeSelector(".box")));