jQuery基础_1

jQuery事件的因果关系是怎么样的一个格式：

$("button").click(function(){ });

【正式接触jQuery】
(1)jQuery的书写步骤：
1.引入jQuery文件;
2.新建一对script标签来书写jQuery;
3.用jQuery的方式进行代码分离;
4.按照jQuery用谁就选谁的原则去书写代码;
【jQuery的css修改】
alert()弹出一个警示框；弹出的信息可以写在小括号里面作为参数;
css()
1.单属性获取，格式css("要获取的css属性名称")
2.单属性修改，格式css("参数1","参数2")
参数1:表示要修改的css属性名称;
参数2:表示要修改的值;
3.多属性修改，格式css({属性名:"值",属性名:"值",...})
注意:关于css复合属性的修改；遇到复合属性需要按照驼峰式命名法去书写css属性;

$("div").click(function (){
            $(this).css("width","200px");
        });

【基础选择器】
>表示选中指定的元素唯一的一级子代元素;
+表示选中指定元素其后紧邻的唯一一个元素;
~表示选中指定元素后面所有的兄弟元素;

<div>
    <p></p>
    <p>123</p>
    <p></p>
    <p>456</p>
</div>

$("p~").click(function(){
            alert(123)
        });

在jQuery中所有的过滤选择器都有一个特点，都以冒号开头;

【过滤选择器】
:not()在指定的元素中排除某一个元素或某一类元素;
:eq()按照指定的索引值进行过滤,(注意程序中的索引值是从0开始的);
:gt()过滤大于指定索引值的所有元素;
:lt()过滤小于指定索引值的所有元素;
(注意:无论是大于还是小于,都是不包含自己本身的;)

<div>
    <p></p>
    <p>123</p>
    <p></p>
    <p>456</p>
</div>

$("p").eq(0).click(function(){
            alert(123)
        });

 

【内容选择器】
:contains("text"):匹配含有text内容的元素
:empty:匹配内容为空的元素
:has(selector):选择包含有selector的选择器
:parent:选择作为父元素的元素

<div>
    <p></p>
    <p>123</p>
    <p></p>
    <p>456</p>
</div>

$("p:parent").click(function(){
            alert(123)
        });

【筛选选择器】
筛选选择器中有3个巨头选择器,父子兄;
特点;所有的筛选选择器都是一个函数的形势,所以它不会写在选择符号的内部;
父;parent()选中当前元素的父级元素;
子;children()选中当前元素的子集元素,小括号内可以再次传递参数进行更精细的筛选;
兄;sibling()选中当前元素所有的同级兄弟元素;(不包含自己)

<div>
    <p></p>
    <p>123</p>
    <p></p>
    <p>456</p>
</div>

$("p").eq(0).siblings().click(function(){
            alert(123)
        });

$(this)注意在事件当中使用

jQuery当中的动画和事件是遵循一个叫做排队机制的原理,也就是说如果一次触发执行了很多动画那么后面的动画不会自动替换前面的而会一直排队等待执行;
解决方法:在执行动画之前用stop()函来清空排队;