1).“$(“#id”)”，获取id指定的元素，id是全局唯一的，所以它只有一个成员。
2).“$(“.class”)”，获取class指定的元素，不同的元素可以具有相同的class属性，所以它可能具有多个成员。
3).“$(“element”)”，获取element（元素名，比如div、table等）指定的元素，它可能具有多个成员。
4).“$(“*”)”，获取所有元素，相当于document。
5).“$(“selector1,selector2,…,selectorN”)”，将每个选择器匹配到的元素合并后一起返回。返回selector1匹配的集合+selector2匹配的集合+…+selectorN匹配的集合。
二、层次选择器
什么是层次？层次就是父子关系、兄弟关系的节点。所以，层次选择器就是用来获取指定元素的父子节点、兄弟节点。
1).“$(“ancestor descendant”)”，获取ancestor元素下边的所有元素。
2).“$(“parent > child”)”，获取parent元素下边的所有子元素（只包含第一层子元素）。
3).“$(“pre + next”)”，获取紧随pre元素的后一个兄弟元素。
4).“$(“pre ~ siblings”)”，获取pre元素后边的所有兄弟元素。
想要使用jQuery从select元素中删除options元素，可以先使用jQuery选择器从select中选择需要删除的options元素，然后使用JQuery的remove()方法从HTML文档中删除该选项。
remove()方法用于法移除被选元素，包括所有的文本和子节点。该方法也会移除被选元素的数据和事件。
Query编写插件的两种方法
1.添加jQuery对象级的插件，是给jQuery类添加方法
写法：
;(function($){
$.fn.extend({
“函数名”:function(自定义参数){
//这里写插件代码
}
});
})(jQuery);
或者
;(function($){
$.fn.函数名=function(自定义参数){
//这里写插件代码
}
})(jQuery);
调用方法：$(“#id”).函数名(参数);
2.jQuery类级别的插件，相当于添加静态方法
;(function($){
$.extend({
“函数名”:function(自定义参数){
//这里写插件代码
}
});
})(jQuery);
或者
;(function($){
$.函数名=function(自定义参数){
//这里写插件代码
}
})(jQuery);
调用方法：$.函数名(参数);
jquery插件的种类：
1.对象级别的插件开发，即给jQuery对象添加方法，封装对象方法的插件，如:parent()、appendTo()
2.一种是类级别的插件开发，即给jQuery添加新的全局函数，相当于给jQuery类本身添加方法，jQuery的全局函数就是属于jQuery命 名空间的函数，封装全局函数的插件
3.选择器插件
jQuery插件机制
jQuery为开发插件提拱了两个方法，分别是：
jQuery.fn.extend(object); 给jQuery对象添加方法。
jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法，可以理解为添加静态方法。
这两个方法都接受一个参数，类型为Object，Object对应的”名/值对”分别代表”函数或方法体/函数主体”。
fn 是什么东西呢？
查看jQuery代码，就不难发现：
jQuery.fn = jQuery.prototype = { init: function( selector, context ) {//…. //…… };
原来 jQuery.fn = jQuery.prototype.对prototype肯定不会陌生啦。虽然javascript没有明确的类的概念，但是用类来理解它，会更方便。jQuery便是一个封装得非常好的类，比如 大家用 语句 $(“#btn1”) 会生成一个 jQuery类的实例。
jQuery.fn.extend(object)， 对jQuery.prototype进行扩展，就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。即：$(“#id”).object();
jQuery.extend()方法除了可以扩展jQuery对象外，还可以扩展已有的Object对象，经常被用于设置插件方法的一系列默认参数，可以很方便的用传入的参数来覆盖默认值
jQuery.extend(object1,object2)object1默认参数值，object2传入的参数值；详细说明，请点击这里
var settions ={validate:false,limit:5,name=”foo”};
var options ={validate:true,name=”bar”};
var newOptions=jQuery.extend(settings,options);
结果为：
newOptions = {validate:true,limit:5,name=”bar”};
function foo(options){
options = jQuery.extend({
name=”bar”,
length:5,
dataType=”xml” /*默认参数*/
},options /*options 为传递的参数*/
);
}
如果用户调用foo()方法的时候，在传递的参数options对象中设置了相应的值，
那么就使用设置的值，否则使用默认值，调用方法：
foo({name:”a”,length:4,dataType:”json”});
foo({name:”a”});
foo();
编写jQuery插件
封装jQuery对你方法的插件，首先需要在javaScript文件里搭好框架，代码如下：
;(function($){
//这里写插件代码
})(jQuery);
1.对象级别的插件开发，即给jQuery对象添加方法，封装对象方法的插件，如:parent()、appendTo()
由于是对jQuery对象的方法扩展，因此采用扩展第1类（封装对象方法）插件的方法jQuery.fn.extend()来编写
;(function($){
$.fn.extend({
“color”:function(value){
//这里写插件代码
}
});
})(jQuery);
或者
;(function($){
$.fn.color=function(value){
//这里写插件代码
}
})(jQuery);
这里的方法提供一个参数value,如果调用方法时传入value，那么就用这个值来设置字体颜色,否则就是获取匹配无此的字体颜色的值
;(function($){
$.fn.extend({
“color”:function(value){
return this.css(“color”,value);
}
});
})(jQuery);
插件内部的this指向的是jQuery对象，而非普通的DOM对象。接下来注意的是，插件如果不需要返回字符串之类的特定值，应当使其具有可链接性。
为此，直接返回这个this这个对象，由于css()方法也会返回调用它的对象，即此外的this，因此可以将代码写成上面的形式;
调用时可直接写成：$(“div”).color(“red”);
另外如果要定义一组插件，可以使用如下所示写法：
;(function($){
$.fn.extend({
“color”:function(value){
//这里写插件代码
},
“border”:function(value){
//这里写插件代码
},
“background”:function(value){
//这里写插件代码
}
});
})(jQuery);
2.封装全局函数的插件
这类插件是在jQuery命名空间内部添加一个函数。这类插件很简单，只是普通的函数，没有特别需要注意的地方。
例如新增两个函数，用于去除左侧和右侧的空格。
首先构建一个Object对象，把函数名和函数都放进去，其中的名/值对分别为函数名和函数主体
然后利用jQuery.extend()方法直接对jQuery对象进行扩展
jQuery代码如下：
;(function($){
$.extend({
ltrim:function(text){
return (text||””).replace(/^\s+g,””);
},
rtrim:function(text){
return (text||””).replace(/\s+$/g,””);
}
});
})(jQuery);
或者
;(function($){
$.ltrim=function(text){
return (text||””).replace(/^\s+g,””);
},
$.rtrim=function(text){
return (text||””).replace(/\s+$/g,””);
}
})(jQuery);
*(text||””)部分是用于防止传递进来的text这个字符串变量处于未定义的特殊状态，如果text是undeined，则返回字符串””，否则返回字符串text。
这个处理是为了保证接下来的字符串替换方法replace()方法不会出错
*运用了正则表达式替换首末的空格
调用函数：
$(“trimTest”).val(
jQuery.trim(” test “)+”\n”+
jQuery.ltrim(” test “)+”\n”+
jQuery.rtrim(” test “)
);
运行代码后，文本框中第一行字符串左右两侧的空格都被删除。
第二行的字符串只有左侧的空格被删除。
第三行的字符串只有右侧的空格被删除。
3.自定义选择器
Jquery使用addClass()与removeClass()来动态的添加或移出一个css类，例如：
1.$(“#para1”).addClass(‘highlight’);添加一个“highlight”css类给id为para1的元素。
2.$(‘#para1’).removeClass(‘’highlight’);从id为para1的元素中移出一个‘highlight’css类。具体实例代码如下：<html><head><styletype=”text/css”>.highlight{background:green;}</style><scripttype=”text/javascript”src=”jquery-1.
3.2.min.js”></script></head><body><h1>jQueryadd/removecssclassexample</h1><pid=”para1″>Thisisparagraph1</p><p>Thisisparagraph2</p><p>Thisisparagraph3</p><p>Thisisparagraph4</p><buttonid=”addClass”>Addhighlight</button><buttonid=”removeClass”>Removehighlight</button><scripttype=”text/javascript”>$(“#addClass”).click(function(){$(‘#para1’).addClass(‘highlight’);});$(“#removeClass”).click(function(){$(‘#para1’).removeClass(‘highlight’);});</script></body></html>初始的效果：点击addhighlight后的效果图：点击removehighlight后的效果图：
如果觉得《jquery 选择器css js基本选择器与层次选择器 – CSS – 前端 如何用dw写css》对你有帮助，请点赞、收藏，并留下你的观点哦！
