jQuery基础知识

一 引入

1.1 jQuery就是js的一个类库，是单独的js文件，对常用的方法和对象进行封装，方便我们使用。

通过script标签的src属性导入；

1.2 获取jQuery对象     $（"选择器"）

页面加载 ：js：windows.onload=function(){};

jQuery ：$(function(){...}); 或者 $(document).ready(function(){});

1.3 派发事件：$("选择器").click(function(){...});

基本事件有：focus ; blur ; change ; click;

1.4 jQuery中的效果：

隐藏或展示：show();hide()

滑入或滑出：slideDown();slideUp();

淡入或淡出：fadeIn();fadeOut();

二 选择器

2.1 基本选择器：$("#id值")  $(".class值")  $("标签名")  $("*")//获取多个选择器用逗号隔开

 $(function(){  //<input type="button" value="选择 id为 one 的元素." id="btn1"/>  $("#btn1").click(function(){ $("#one").css("background-color","red"); })  //<input type="button" value="选择 class 为 mini 的所有元素." id="btn2"/> $("#btn2").click(function(){ $(".mini").css("background-color","green"); })  //<input type="button" value="选择 元素名是 div 的所有元素." id="btn3"/> $("#btn3").click(function(){ $("div").css("background-color","yellow"); })  //<input type="button" value="选择 所有的元素." id="btn4"/> $("#btn4").click(function(){ $("*").css("background-color","red"); })  //<input type="button" value="选择 所有的span元素和id为two的元素." id="btn5"/> $("#btn5").click(function(){ $("span,#two").css("background-color","green"); }) })

2.2 层次选择器：a b:a的所有b后代
a>b:a的所有b孩子(不包括孙子)
a+b:a的下一个兄弟(大兄弟)
a~b:a的所有弟弟们

$(function(){ //<input type="button" value="选择 body内的所有div元素." id="btn1"/> $("#btn1").click(function(){ $("body div").css("background-color","red"); })  //<input type="button" value="在body内,选择子元素是div的。" id="btn2"/> $("#btn2").click(function(){ $("body>div").css("background-color","red"); })  //<input type="button" value="选择 id为one 的下一个div元素." id="btn3"/> $("#btn3").click(function(){ $("#one+div").css("background-color","red"); })  //<input type="button" value="选择 id为two的元素后面的所有div兄弟元素." id="btn4"/> $("#btn4").click(function(){ $("#two~div").css("background-color","red"); }) })

2.3 基本过滤选择器：:frist 第一个
:last 最后一个
:odd  索引奇数
:even 索引偶数
:eq(index) 指定索引
:gt(index) >索引大于哪一个值
:lt(index) <索引小于哪一个值

$(function(){  $("#btn6").click(function(){ $("div:gt(3)").css("background-color","green"); }) });

2.4 内容过滤器：:has("选择器"):包含指定选择器的元素

2.5 可见过滤：:hidden   在页面不展示元素 一般指 input type="hidden" 和 样式中display:none
:visible 
2.6 属性过滤器:[属性名]
[属性名="值"]
2.7 表单过滤：:input  所有的表单子标签  input select textarea button
   input   仅仅获取input标签