jQuery基础知识总结
1、什么是JQuery？
它是js的⼀个框架，它是开源的项⽬。对底层的js进⾏封装，我们通过js框架就可以快速的完成DOM    对元素的增删改查操作，并提供了动画功能。jquery对外提供api让开发者去开发jquery
插件（就是⼀个功能模块，⽤户只要做⼀些简单的配置就完成复杂的功能）。jquery⽬前
是⽐较流⾏的⼀个JQuery框架。（宗旨：写得少，做的多）。
jquery在一个元素后追加标签2、JQuery特点:
轻量级
强⼤的选择器
出⾊的DOM封装
可靠的事件处理机制
完善的Ajax
出⾊的浏览器兼容性
丰富的插件⽀持
完善的⽂档
⽀持链式操作
3、JQuery的环境配置
2)去下载jquery库⽂件:
通常有两个版本:
*未压缩版本：--⽤在开发和调试。（我们下载此版本）
*压缩版本:--产品发布的时候使⽤，可以提⾼性能和减少带宽
4、在html页⾯中如何使⽤jQuery？
使⽤<script src="jquery.js" type="text/javascript"></script>引⼊
5、在<script></script>内编写jquery脚本
/*当⽂档解析完毕好以后去执⾏⼀个函数*/
// 第⼀种写法
jQuery(document).ready(function(){
alert("hello,jQuery");
});
// 第⼆种写法
$(document).ready(function(){
alert("hello,jQuery");
})
// 第三种写法
$(function(){
alert("hello,jQuery");
})
注意:jQuery可以使⽤$符号作为别名。
强调：和window.οnlοad=function(){}区别?
*加载时机不同，$(function(){})优先于window.οnlοad=function(){}先执⾏
*执⾏的次数不同，window.οnlοad=function(){}只会执⾏最后⼀个绑定的函数。
$(function(){})可以绑定多个函数来分别执⾏。
6、JQuery对象和DOM对象之间的关系，他们之间如何去转换？
*使⽤DOM⽅法来查询得到的结果是DOM对象，它只能访问DOM对象中所提供的属性和⽅法。
*使⽤JQuery查询得到的结果是Jquery对象，它只能访问jQuery对象中所提供的属性和⽅法。
也就是说JQuery对象不能调⽤DOM对象的属性和⽅法，反之也⼀样。
注意：养成⼀个良好的书写习惯,JQuery对象的变量名最好以$开头。
记住:JQuery查询出来的结果是⼀个对象数组，就算根据id来进⾏查询就是返回的是⼀个对象数组。        数组内存放的是DOM对象。
*JQuery对象转换成DOM对象，通过[下标]就可以转，或者get(下标)⽅法来取出数据就是DOM对象  *DOM对象转换成JQuery对象，通过$()⼯⼚函数就可以了，把DOM对象作为参数传给$()函数，那么      就把DOM对象转换成了JQuery对象。
-------------------------------------------------------------------------------------------
选择器的学习:
*回顾下CSS选择器：---css选择器的作⽤是给指定的元素设置样式的。
1)id选择器  #id名{样式规则}    id="id名"
2)类选择器  .类名{样式规则}    class="类名1 类名2 ....."
3)标签选择器 标签名{样式规则}
4)后代选择器 选择器1 选择器2{样式规则}
5)⼦元素选择器  选择器1>选择器2{样式规则}
6)相邻选择器  选择器1+选择器2{样式规则}
7)同辈选择器  选择器1~选择器2{样式规则}
8)属性选择器
[属性名='值']
[属性名^='值']
[属性名$='值']
[属性名|='en']  ⽐如:<input type="en-aa">
[属性名*='en']
[属性名~='en']  ⽐如:<input type="en aa">
jQuery选择器:--Jquery选择器的作⽤是给指定的元素设置⾏为的。它提供了css1，css2                  css3部分的选择器，还包含⾃⾝特有的⼀些选择器。功能⽐较强⼤。
选择器效率的问题
1)$("#id")
2)$("#id").find("");
3)$("p")
4)$(".className")
5)$("#id :hidden")
1)常⽤的基本选择器
#id：根据给定的id匹配⼀个元素*****
.classname：根据给定的类名匹配⼀个元素*****
classname：根据给定的元素名匹配元素*****
*：匹配所有元素
select1,select2…：将每⼀个匹配到的元素合并后⼀起返回
2)层次选择器*****
ancestor descendant：选取ancestor元素⾥的所有descendant元素--对应的⽅法find()    parent>child：获取parent元素下的child元素---对应的⽅法children()
prev+next：选取紧接在prev元素后的next元素---对应的next()⽅法
prev~siblings：选取prev元素之后的所有siblings元素--对应的nextAll()⽅法
实例：
//获取所有的input元素
alert($("#divTest input").length);
alert($("#divTest").find("input").length);
// 获取id为divTest的元素下的input⼦元素
alert($("#divTest>input").length);
alert($("#divTest").children("input").length);
// 获取id为next元素的下⼀个input元素的内容
alert($("#next+input").val());
alert($("#next").next("input").val());
//获取id为next元素的前后所有同辈a元素的个数
alert($("#next~span").length);
alert($("#next").siblings("span").length);
3)基本过滤选择器
:first：根据给定的id匹配⼀个元素==first()
:
last：根据给定的类名匹配⼀个元素---last()
:not(selector)：去除所有与给定选择器匹配的元素
:even：选取索引值为偶数的所有元素，从0开始计数*****
:odd：选取索引值为奇数的所有元素，从0开始计数*****
:eq(index)：匹配⼀个给定索引值元素，从0开始*****
:gt(index)：匹配⼤于给定索引值元素，从0开始
:lt(index)：匹配⼩于给定索引值元素，从0开始
:header：选择h1,h2,h3⼀类的标签
:animated：匹配正执⾏动画效果的元素
:focus：匹配获取焦点的元素
4)常⽤的内容过滤选择器
:
contains(text)：匹配包含给定⽂本的元素
:empty：匹配所有不包含⼦元素或者⽂本的空元素
:has(selector)：匹配含有选择器所匹配元素的元素*****
:parent：选取含有⼦元素或者⽂本的元素
//查空元素的个数
//alert($("li:empty").length);
//查内容包含ip的li元素的个数
//alert($("li:contains('ip')").length);
//查拥有⼦元素的所有li元素，输出满⾜条件的元素个数
// alert($("li:parent").length);
//查并输出包含a元素的li元素的内容
/
/alert($("li:has('a')").text());
5)常⽤的可见性过滤选择器*****
:hidden：选取所有不可见的元素 <input type="hidden">  display:none
:visible：选取所有可见的元素
6)常⽤的属性过滤选择器
元素名[attribute]：选取拥有此属性的元素
元素名[attribute=value]：选取属性值等于value的元素
元素名[attribute!=value]：选取属性值不等于value的元素
元素名[attribute^=value]：选取属性值以value开始的元素
元素名[attribute$=value]：选取属性值以value结束的元素
元素名[attribute*=value]：选取属性值包含value的元素
元素名[attribute|=value]：选取属性值是value的元素或以value开头，后⾯跟-    元素名[attribute~=value]：选取属性值包含value且以空格隔开的元素
元素名[attribute1][attribute2]…：多个属性选择器合并成⼀个复合属性选择器
7)：常⽤的⼦元素过滤选择器
:first-child：选取每个⽗元素下的第⼀个⼦元素
:first-of-type：选取同名兄妹节点的第⼀个⼦元素的所有元素
:last-child：选取每个⽗元素下的最后⼀个⼦元素

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。