JQuery入门

jQuery

• jQuery是目前使用最广泛的javascript函数库

<script type="text/javascript" src="js/jquery-1.12.2.js"></script>  

• jquery文档加载完再执行，将获取元素的语句写到页面头部，会因元素还没加载而出错

# readyf方法解决
<script type="text/javascript">
$(document).ready(function){
        .....
}
</script>
# 简写
<script type="text/javascript">
$(function){
        .....
});
</script>
#JQ可以有多个入口函数
#JS原生一个页面只能有一个入口函数，如果有多个，只执行最后一个

jquery选择器

• 用法思想一：选择某个网页元素，然后对它进行某种操作
• 作用：可以快速地选择元素，用length属性判断是否选择成功（大于0选择到元素）

$("#myId") //选择id为myId的网页元素
$(".myClass") //选择class为myClass的元素
$("#ul1 li sapn") //选择id为ul1元素下的所有li下的span元素
$("input[name=first]") //选择name属性等于first的input元素 
#自定义属性
data-xx="aa"
# 对选集进行过滤
$("div").has("p"); //选择包含p元素的div元素(选中父级，p查找条件)
$("div").not(".myClass"); //选择class不等于myClass的div元素
$("div").eq(5); //选择第6个div元素
# 选择集转移
$("#box").prev(); //选择id是box的元素前面紧挨的同辈元素
$("#box").prevAll(); //选择id是box的元素之前所有的同辈元素
$("#box").next(); //选择id是box的元素后面紧挨的同辈元素
$("#box").nextAll(); //选择id是box的元素后面所有的同辈元素
$("#box").parent(); //选择id是box的元素的父元素
$("#box").children(); //选择id是box的元素的所有子元素
$("#box").siblings(); //选择id是box的元素的同级元素（排它）
$("#box").find("myClass"); //选择id是box的元素内的class等于myClass的元素(选中子集，box是查找条件)
$(this).index(); //获取点击的索引

jquery样式、属性操作

• 用法思想二：同一个函数完成取值和赋值

#操作样式
// 获取div的样式
$("div").css("width");
$("div").css("color");

//设置div的样式
$("div").css("width","30px");
$("div").css("height","30px");
$("div").css({fontSize:"30px",color:"red"});
#操作样式类名
$("#div1").addClass("divClass2") //为id为div1的对象追加样式divClass2
$("#div1").removeClass("divClass")  //移除id为div1的对象的class名为divClass的样式
$("#div1").removeClass("divClass divClass2") //移除多个样式
$("#div1").toggleClass("anotherClass") //重复切换anotherClass样式


# 操作属性
# 1.html()取出或设置html内容
// 取出html内容
var $htm = $('#div1').html();
# 2.test()获取文本值
$('#div1').html();

// 设置html内容
$('#div1').html('<span>添加文字</span>');
# 3.trim() 给文本内容去掉两边的空格
$.trim($('#div1').html())

# 4.porp()取出或设置某个属性的值
// 取出图片的地址
var $src = $('#img1').prop('src');

// 设置图片的地址和alt属性
$('#img1').prop({src: "test.jpg", alt: "Test Image" });
# 5.attr()获取属性值
$('#img1').attr("src");

• 特别注意：选择器获取的多个元素，获取信息获取的是第一个的

绑定click事件

#绑定click事件
$('#btn1').click(function(){
    // 内部的this指的是原生对象
    // 使用jquery对象用 $(this)
})
#获取元素索引值 使用index()方法

jquery动画

• 通过animate方法设置元素某属性值上的动画（一个或多个属性值）,动画执行完后会执行一个函数

/*
    animate参数：(不支持变色动画)
    参数一：动画过程(css键值对)，要改变的样式属性值，写成字典的形式
    参数二：动画持续的时间，单位为毫秒，一般不写单位
    参数三：动画曲线(不常用)，默认为‘swing’，缓冲运动，还可以设置为‘linear’，匀速运动
    参数四：动画回调函数(function(){})，动画完成后要执行的命令
*/

$('#div1').animate({
    width:300,
    height:300
},1000,'swing',function(){
    alert('done!');
});