1基础

1.基本

作用：JQuery是一个javascript的框架，通过JQuery可以非常方便的操作html的元素

1.链接：https://pan.baidu.com/s/1Alwqt-UBYYCJIAYgf0L7DA
提取码：jc2h

2.引入：

<script src="http://...../jquery.min.js"></script>

3.格式

<script>
    $(function(){
        ....
    });
</script>

4.通过id获取元素

 $("#idName")

5.增加监听器

$("#idName").click(function(){
  ......
});

6.取值

$("#idName").val()

• 获取元素内容,如果有子标签元素，保留字标签

$("#idName").html()

• 通过text() 获取元素内容,如果有子标签元素，不包含标签

$("#idName").text()

2.css

1给元素增加类样式

$("#idName").addClass("类样式名");

2删除元素的类样式

$("#idName").remove("类样式名");

3给元素直接设置样式

$("#idName").css(property,value)
$("#idName").css({"p1":"v1","p2":"v2"})

3.选择器

1.根据id选择所在元素

$("#idName")

2.根据标签名选择所有该标签的元素

$("tabName")

3.根据类属性选择所在的元素

$(".类名")

4.层级

$("selector1 selector2") 
选择 selector1下的selector2元素 。 

5.选择同个标签的第几个

$(selector:first) 满足选择器条件的第一个元素 
$(selector:last) 满足选择器条件的最后一个元素

$(selector:odd) 满足选择器条件的奇数元素 
$(selector:even) 满足选择器条件的偶数元素 
因为是基零的，所以第一排的下标其实是0(是偶数)

6.将可见的隐藏，将隐藏的可见

 $("div:visible").hide();
 
  $("div:hidden").show();

7.属性

$(selector[attribute])选择器有某属性的元素
$(selector[attribute=value]) 选择器属性等于value的元素
$(selector[attribute!=value]) 选择器属性不等于value的元素
$(selector[attribute^=value]) 选择器属性以value开头的元素
$(selector[attribute$=value]) 选择器属性以value结尾的元素
$(selector[attribute*=value]) 选择器属性包含value的元素

8.表示当前自己

$(this).hide();

$(ancestor descendant)
$(paraent > child)
$(prev + next)
$(prev ~ sibiling)

$(selectro).first()
$(selectro).last()
$(selectro).eq(num)//num从0开始

$("selector").parent()

$("selector").parent()

4.属性

1. 获取,修改，删除属性值

$("selector").attr("name");

$("selector").attr("name"，"value");

$("selector").removeAttr("name"，"value");

5.动态效果

1. 隐藏，显示

$("selector").show()
$("selector").hide()

2.向上向下滑动，同时切换滑动

$("selector").slideUp()
$("selector").slideDown(2000)
$("selector").slideToggle(2000)

3.淡入 淡出 淡入淡出切换 指定淡入程度

$("selector").fadeIn()
$("selector").fadeOut(2000)
$("selector").fadeToggle()
$("selector").fadeTo("slow",0.2)

$("selector"). animate({left:'0px',top:'50px',height:'50px'},2000,function(){
        alert("动画演示结束")});
//注： 默认情况下，html中的元素都是固定，并且无法改变的位置的。 为了使用animate()自定义动画效果，需要通过css把元素的position设置为relative、absolute或者fixed。

6.事件

1. 加载

 $("#image").load();//图片加载

2.点击:

click() 表示单击 
dblclick() 表示双击 

3.键盘

keydown 表示按下键盘
keypress 表示按住键盘
keyup 表示键盘弹起
//按照 keydown keypress keyup 顺序发生

4.鼠标

mousedown 表示鼠标按下 
mouseup表示鼠标弹起 


mousemove表示鼠标进入 //当鼠标进入元素，每移动一下都会被调用 
mouseenter表示鼠标进入 
mouseover表示鼠标进入 


mouseleave表示鼠标离开 
mouseout表示鼠标离开 

5.焦点

focus() 获取焦点 
blur() 失去焦点

change() 内容改变 

注： 对于文本框，只有当该文本失去焦点的时候，才会触发change事件。

7.提交

$("#form").submit(function(){
      alert("提交成功");
   });

8.功能绑定到事件

$("selector").on("event",function);

9.触发事件

$("selector").trigger("event");