jQuery基础

引入jQuery

<script type="text/javascript" src="路径/jquery.js"/>

使用

<script>
    
    jQuery(document).ready(function(){
        //...执行的js代码 
    });

    $(document).ready(function(){
        //...执行的js代码 
    });

    //简写方式
    $(funciton(){
        //...执行的js代码 
    });

</script>

jquery当整个dom树结构绘制完毕就会加载,加载时顺序执行的

获取元素

$("#btn")//获取id为btn 
$(".mini")//类选择器
$("div")//选择所有div元素
$("*")//选择所有元素
$("#to,.mini")//选择id为to，class为mini的元素

//层级选择器
ancestor descendant 匹配ancestor元素下所有descendant元素(包括儿子，孙子，及以下)
parent > child 匹配parent所有child(仅儿子)
prev + next 匹配 prev相邻的next
prev ~ siblings 匹配prev 兄弟 siblings

//过滤
$("body div:first")//获取body第一个元素
$("body div:last")//获取body最后一个元素
$("tr:even");//从0开始的偶数 元素
$("tr:odd");//奇数元素

//属性选择器
$("div[attribute]")//选择div有attribute属性的元素
$("div[attribute=value]")//选择div中attribute值为value的

$("ul li:first-child")//为每个父元素匹配第一个子元素

//表单匹配
$(":input")//匹配所有input button textarea
$("input:checked")//匹配所有checked的元素
$("select option:selected")//匹配select中选中的option

jquery对象转换为DOM对象

$("#a").get(0);//方式一
$("#a")[0];//方式二

DOM对象转换为jquery对象

$(DOM对象);

元素展示和隐藏效果

$("#img2").show();//参数可为展现动画时间
$("#img2").hide();

slideDown();//滑动
slideUp();

fadeIn();//逐渐隐藏
fadeOut();

toggle();显示隐藏取反

设置css样式

$("#one").css("background-color","pink");//设置元素背景为粉色

$("#one").addClass("selected");//给元素增加class属性
$("#one").removeClass("selected");//移除元素class属性

设置属性

$("#one").attr("checked",true);//设置属性
$("#one").attr({src:"test.jpg",alt:="test img"});//设置多个属性

attr方法与jQ版本有关，在1.8.3及以下有效,新版本用如下

prop();

循环

$("").each(function(){
    //循环 this表示当前
});

$.each(元素组,function(i,n){
    //i为编号，n为当前对象
});

追加内容

$("p").append("内容");//将内容追加到p标签内末尾处
$("p").appendTo("div");//把P标签以及内容增加到div中末尾

删除内容

$("p").empty();//把p标签内的内容都删除
$("p").remove();//移除所有P元素

事件

$("btn").click(function(){});//单机
$("btn").dbclick(function(){});//双击
$("btn").bind("click",function(){});//绑定事件\$("btn").unbind("click");//移除事件
$("btn").mouseover(function(){})///鼠标滑入
$("btn").mouseout(function(){})///鼠标滑出
$("btn").hover(function(){},function(){})///鼠标滑动事件，参数一为滑入，参数二为滑出
$("btn").toggle(function(){},function(){})///鼠标点击事件，参数一为点击开，参数二为点击关

jQ数据效验插件validate

引入 jquery.validate.min.js(主js) 和 messages_zh.js（国际化）
注意:要先引入jquery，

<style>
    label.error{
        //错误样式
    }

    label.success{
        //成功样式
    }

</style>

$("#checkForm").validate(){//表单名
    rules:{
        username:{//input名
            reuired:true,//规则:值
            milength:6
        }
    }，message:{
        username:{
            reuired:"提示",
            milength:"提示"
        }
    }，
    errorElement:"label",//错误提示使用label标签，默认也为这个
    success:function(label){//成功时回调
        label.text(" ")//清空错误提示信息
            .addClass("success");//增加成功样式
    }
};