jQ选择器与常用的方法归纳

1、jQuery入口函数与JS入口函数的区别（理解）

JS入口函数指的是：window.onload = function() {};
jQ入口函数指的是：`$`(function(){});
区别一：书写个数不同Js入口函数只能出现一次，出现多次会存在事件覆盖的问题。jQuery的入口函数，可以出现任意多次，并不会存在事件覆盖问题。
区别二：执行时机不同Js入口函数是在所有的文件资源加载完成后，才执行。这些文件资源包括：页面文档、外部的js文件、外部的css文件、图片等。jQuery的入口函数，是在文档加载完成后，就执行。文档加载完成指的是：DOM树加载完成后，就可以操作DOM了，不用等到所有的外部资源都加载完成。文档加载的顺序：从上往下，边解析边执行。

2、 jQ选择器

a. 基本选择器（重点）：

Id选择器（#）、
类选择器（.）、
标签选择器（element）、
文档所有元素（*）；

b. 层级选择器（重点）：

后代选择器（‘空格’）、
子代选择器（>）、
所有的label元素的下一个input元素节点（$("label + input") ）、
同胞选择器，同父级id为prev的所有div元素（$("#prev ~ div") ）；

c. 过滤选择器：

1）基本过滤选择器：匹配索引号为index的元素（:eq(index)）、匹配索引号为奇数的元素（:odd）、匹配索引号为偶数的元素（:even）、选择第一个元素（:first）、选择最后一个元素（:last）、过滤checked选择器的元素（:not(:checked)）、选择序号大于index的元素（:gt(index)）、选择序号小于index的元素（:lt(index)）；2）内容过滤选择器：选择所有div中含有John文本的元素（:contains('John')） 、选择所有的为空（也不包括文本节点）的td元素的数组 （:empty）、选择所有含有p标签的元素 （:has(p)）、选择所有的以td为父节点的元素数组 （td:parent）、

d. 筛选选择器：

查找所有指定后代元素（find()）、
查找所有指定子元素（children()）、
查找所有兄弟元素（siblings()）、
查找父元素（parent()）；

e. 属性过滤选择器

选择所有含有id属性的div元素 （div[id]）、
选择所有的name属性等于'newsletter'的input元素（input[name='newsletter']）、
选择所有的name属性不等于'newsletter'的input元素（input[name!='newsletter']）、
选择所有的name属性以'news'开头的input元素 （input[name^='news']）、
选择所有的name属性以'news'结尾的input元素 （input[name$='news']）、
选择所有的name属性包含'news'的input元素（input[name*='man']）、
可以使用多个属性进行联合选择，该选择器是得到所有的含有id属性并且name属性以man结尾的元素（input[id][name$='man']）；

f. 表单选择器

选择所有的表单输入元素，包括input, textarea, select 和 button（:input）
选择所有的text input元素 （:text）
选择所有的password input元素 （:password）
选择所有的radio input元素 （:radio）
选择所有的checkbox input元素 （:checkbox）
选择所有的submit input元素 （:submit）
选择所有的image input元素 （:image）
选择所有的reset input元素 （:reset）
选择所有的button input元素 （:button）
选择所有的file input元素 （:file）
选择所有类型为hidden的input元素或表单的隐藏域（:hidden）
选择所有的可操作的表单元素 （:enabled）
选择所有的不可操作的表单元素 （:disabled）
选择所有的被checked的表单元素 （:checked）
选择所有的select 的子元素中被selected的元素（select option:selected）

3、jQ DOM操作

节点操作

1、创建元素节点：$li1=$("<li></li>");
2、创建文本节点：$li2=$("<li>苹果</li>");
3、创建属性节点：$li3=$("<li title='榴莲'>榴莲</li>");
4、增加节点：（注：以下方法两两对应，效果一样，操作结果作用域为前面的元素）
- append()：向匹配的元素内部追加内容$("ul").append("<li title='香蕉'>香蕉</li>");
- appendTo()：将所有匹配的元素追加到指定的元素中$("<li title='荔枝'>荔枝<li>").appendTo("ul");
- prepend()：将每匹配的元素内部前置要添加的元素$("ul").prepend("<li title='芒果'>芒果</li>")
- prependTo()：将元素添加到每一个匹配的元素内部前置$("<li title='西瓜’>西瓜</li>").prependTo("ul");
- after()：向匹配的元素后面添加元素$("p").after("<span>番茄</span>");
- insertAfter()：将新建的元素插入到查找到的目标元素后$("<p>insertAfter操作</p>").insertAfter("span");
- before()：在每一个匹配的元素之前插入$("p").before("<span>下面是个段落</span>");
- insertBefore()：将新建元素添加到目标元素前$("<a href='#'>锚</a>").insertBefore("ul");
5、删除节点：
- remove()：删除所有匹配的元素$span=$("span").remove();
- empty()：清空元素中的所有子节点$("ul li:eq(0)").empty();
6、修改节点：
- clone()：复制节点元素（clone(true)若该方法加上参数true，则表示复制元素时也复制行为）$("ul li:eq(0)").clone();
- repalcewith()：替换某个节点（后面元素替换前面元素）$("p").replaceWith("<strong>我要留下</strong>");
- repalceAll()：替换某个节点（前面元素替换后面元素）$("<h3>替换strong</h3>").repalceAll("strong");
7、包裹节点：
- wrap()：每个p标签都用一个b标签包裹$("p").wrap("<b></b>");
- wrapAll()：所有的p标签只用一个b标签包裹$("p").wrapAll("<b></b>");
- wrapInner()：b标签包裹每个一strong元素的子元素$("strong").wrapInner("<b></b>");

属性操作和样式操作

1、获取元素属性，设置元素属性、删除元素属性：attr()、removeAttr()
$("p").attr("title");该示例用于获得p元素的title属性值;
$("p").attr("title","你最喜欢的水果");该示例设置p元素的title属性值为”你最喜欢的水果”;
$("p").attr({"title":"你最喜欢的水果","name":"水果"});该示例一次设置两个属性值;
$("p").removeAttr("name");该方法就是移除p元素的name属性。
2、添加样式，删除样式，切换样式，查看样式：addClass()、removeClass()、toggleClass()、hasClass()
$("p").addClass("ul");该示例设置元素p的样式为ul;
$("p").removeClass("ul");该救命去除掉p元素的ul类样式;
$("p").toggleClass("ul");该方法来回切换【添加删除实现切换】元素p的样式ul;
alert($("p").hasClass("ul"));打印出p元素是否有ul样式。
3、获取文本、设置文本：html()、text()、val()
$("p").html();该示例获得元素p的html内容。
$("p").html("<strong>添加html内容</strong>");该示例设置p的html内容为”添加html内容“;
$("p").text();该示例获得元素p的text文本内容。
$("p").text("重新设置的文本内容");该示例设置元素p的text文本为”重新设置的文本内容”;
$("#userName").val();获得input元素的值。
$("#userName").val('响马');设置input元素的值为’响马’。
val()方法的不仅能操作input，最重要的一个用途用于select【下拉列表框】、checkbox【多选框】、radio【单选框】。例：在下拉框下的多选赋值应用<select id="fruits" multiple="multiple"><option>苹果</option><option>香蕉</option><option>西瓜</option></select>
　$("#fruits").val(['苹果','香蕉']);该示例使select中苹果和香蕉两项被选中。

遍历节点操作children()、next()、prev()、siblings()、closest()

$("$("body").children().length;该示例获得body元素的子元素个数；
$("p").next().html();该示例获得p元素的下一个兄弟节点的html内容。
$("ul").prev().text();该示例获得ul元素的上一个兄弟节点的文本内容。
$("p").slibings();示例获得p元素的所有兄弟节点元素。
closest()方法用来取得最近的匹配元素，首先检查当前元素是否匹配如果匹配则直接返回，否则继续向上查找父元素中符合条件的元素返回，如果没有匹配的元素则返回空JQuery对象。

CSS-Dom操作css()、offset()、position()、scrollTop()、scrollLeft()、width()、innerWidth()、outerWidth()

$("p").css("color","red");该示例用于设置元素的颜色属性为红色;
$("p").css("color");该示例用于获得元素的color样式值;
$("p").css({"font-size":"30px","backgroundColor","#888888"});该示例用于设置元素的多个样式。
var offset= $("p").offset(); var left=offset.left;var top=offset.top;该示例用于获得元素p的偏移量，offset偏移量为相对整个屏幕而言。
var postion = $("p").positon();var left=positon.left;var top=positon.top;该示例用于获得元素p的位置，position的位置为相对父级盒子而言。
var scrollTop=$("p").scrollTop();var scrollLeft=$("p").scrollLeft();该示例用于获得元素的滚动条的位置。
$("textarea").scrollTop(300);$("textarea").scrollLeft(300);该示例添加参数指将元素滚动到指定的位置。

拓展：

$(function(){alert( $('div').width() );  //widthalert( $('div').innerWidth() );  //width + paddingalert( $('div').outerWidth() );  //width + padding + borderalert( $('div').outerWidth(true) );  //width + padding + border + margin});

4、jQ事件

click(handler)            单击事件
blur(handler)             失去焦点事件
mouseenter(handler)       鼠标进入事件
mouseleave(handler)       鼠标离开事件
dbclick(handler)          双击事件
change(handler)           改变事件，如：文本框值改变，下来列表值改变等
focus(handler)            获得焦点事件
keydown(handler)          键盘按下事件