jquery快速入门

JQuery快速入门

1.JQuery简介

    JQuery是一个JS库，别人使用JS写了很多功能给我们用，主要集中在以下几点：
        1.简化找标签，改样式等操作语法
        2.增加了动画的操作方法
        3.解决了相关属性的兼容性写法



2.JQuery语法

1.找标签

    $('#box')  id选择器
    $('.box')  类选择器
    $('div')   标签选择器
    $('.box li) 后代选择器
    $('.box > a')  子代选择器
    $('.box, .one') 并集选择器
    
    选择器筛选
    $('.box li:first')  第一个li
    $('.box li:last')   最后一个li
    $('.box li:eq(2)')  第3个li(索引从0开始)
    $('.box li:gt(3)')  索引大于3的li
    $('.box li:lt(3)')  索引小于3的li
    $('.box li:even')   偶数li  (因为索引从0开始，所以显示相反)
    $('.box li:odd')   奇数li
    //表单筛选
    $('.box input:text')   input中是text的标签
    $('.box input:radio')   input中是radio的标签
    $('.box input:checkbox')   input中被选中的标签
    
    //方法找标签
    $('.box li').eq(0)   第一个li
    $('.box li').first() 第一个li
    $('.box li').last()  最后一个li
    
    $('.box').parent()      父元素
    $('.box').children(条件) 所有子元素
    $('.box').siblings(条件) 所有兄弟元素
    $('.box').find(条件)     在box中查找某个元素
    $('.box').next()        下一个元素
    $('.box').nextAll()     下面所有的元素
    $('.box').prev()        上一个元素
    $('.box').prevAll()     上面所有元素



2.加事件

    标签.click(function(){});
    标签.mouseover()
    标签.mouseout()
    标签.hover()
    其他类似
    
    标签.on(事件类型，回调函数);
    $('.box').on('click',function(){});



3.改样式和内容属性

    //内容操作
    标签.html()   修改内容
    标签.val()    修改表单的value值
    标签.text()   修改文字内容
    
    //样式操作
    标签.css('属性名','属性值');
    标签.css({属性名:属性值,属性名:属性值});
    
    //类的操作
    标签.addClass('current') 
    标签.removeClass('current')  
    标签.toggleClass('current')
    标签.hasClass('current')  
    
    
    //自定义属性操作
    标签.attr('属性名'，'属性值');
    标签.removeAttr('属性名');
    标签.prop('属性名'，'属性值');  
    
    注意： prop方法用于获取类似于checked这种标签独有的属性，Jquery未封装



4.加动画

    //显示隐藏
    show()
    hide()
    toggle()
    
    //上拉下拉
    slideDown()
    slideUp()
    slideToggle()
    
    //淡入淡出
    fadeIn()
    fadeOut()
    fadeTo()
    fadeToggle()
    
    //自定义动画
    animate({},时间)  //注意参数写法很多，都带引号总没错  
    stop()      停止动画
    delay()     延迟动画



5.节点操作

    empty()  清空
    remove()  移除
    clone()   克隆
    replace() 替换
    
    after()  标签之后插入
    before() 标签之前插入
    
    append()  标签内最后追加内容
    appendTo() 将某个标签添加到父标签中

7.位置大小获取

    //获取left值和top值
    标签.offset().left
    标签.offset().top
    
    //获取滚动距离
    标签.scrollTop()
    标签.scrollLeft()
    
    //获取宽高
    标签.width()
    标签.height()
    
    
    



6.其他

    //阻止冒泡
    e.stopPropagation()
    
    //获取坐标
    e.pageX
    e.pageY
    
    //获取标签索引
    标签.index();  
    
    //遍历
    each()
    
    //入口函数
    $(function(){});
    
    
    //当前元素
    $(this)

DOM对象和JQ对象互转

1.将DOM对象使用$() 包裹即可转换为JQuery对象，然后使用Jquery的方法
​
//btnObj就是DOM对象
var btnObj= document.getElementById("btn");
btnObj.onclick=function () {
    this.style.backgroundColor="red";
};
//DOM对象转jQuery对象,只需要把DOM对象放在$(dom对象)--->jQuery对象
$(btnObj).click(function () {
    $(this).css("backgroundColor","red");
});
​
$(this)  表示当前标签
$(btnObj) 表示将dom的btn转换为jq对象，这样就可以用到jq的方法

2.JQ对象转换为DOM对象的方法
    $(btnObj).get(0);---->DOM对象
    $(btnObj)[0];----->DOM对象
------------------------------------------
var btnObj=document.getElementById("btn");//DOM对象
var obj= $(btnObj).get(0);//DOM对象
obj.onclick=function () {
  this.style.backgroundColor="green";
};
​
var btnObj=document.getElementById("btn");//DOM对象
var obj= $(btnObj)[0];//DOM对象
obj.onclick=function () {
    this.style.backgroundColor="green";
};

JQuery常见的内容方法

.html()  类似于innerHTML
.text()  类似于innerText
.val()   类似于input的value属性
​
注意： 括号中写一个参数表示设置值，什么都不写表示获取值。
​
.css()   类似于给标签添加样式

类操作

addClass('current')     //添加类
removeClass('current')  //移除类
toggleClass('current)    //开关类 
hasClass('current')     //是否有某个类，返回true和false
​
//可以添加多个类
addClass('current').addClass('bd');
addClass('current bd');
//注意添加类名前面没有点。

常见动画方法

show()  显示
hide()  隐藏   本质上还是display:block和none
slideUp() 上滑
slideDown() 下滑
slideToggle()  上下滑
fadeIn()  淡入
fadeOut() 淡出
fadeToggle() 淡入淡出
fadeTo(事件，透明度)    透明度动画
​
​
参数1： 
    1.可以写毫秒，1000毫秒
    2.可以写字符串 slow normal fast
$("#dv").hide(1000);
$("#dv").show("fast");
​
参数2： 是一个回调函数，可以在动画执行后触发
​
$('#dv').hide(1000,function(){
    alert('动画结束了')；
})

animate动画方法

animate(属性，时间，回调函数);
属性的变化和时间是必须的，回调函数可以没有。
​
animate({"属性名"："属性值"},1000)
注意： animate属性不能修改非数值效果，例如颜色。
​
stop()   动画停止函数（内部原理停止上一个定时器）；
建议: 在每次添加动画之前都加上stop(),直接显示隐藏动画除外

元素创建

直接使用$('标签') 就可以创建一个标签对象。
append()  追加元素
prepend() 插入某个元素前面
​
after()  在后面添加元素
before() 在前面添加元素
​
appendTo()  把当前标签添加到其他标签中去
​

//创建元素
var aObj=$("<a href='http://www.baidu.com'>百度"+i+"</a>");
//把元素添加到div中
$("#dv").append(aObj);//把超链接追加到div中
​
//把元素插入到某个元素的前面
$("#dv").prepend(aObj);
//把元素添加到当前元素的后面(兄弟元素来添加)
$("#dv").after(aObj);
//把元素添加到当前元素的前面(兄弟元素来添加)
$("#dv").before(aObj);

注意：append追加元素，可以把已经存在的元素移除，类似于剪切效果

 

清空内容和克隆节点

html('') //清空内容
empty()  //清空内容
remove()  移除元素
​
clone()  克隆元素
​
children() 子元素

 

自定义属性

attr()  设置和获取自定义属性
设置自定义属性
attr('ss','1');
获取自定义属性
attr('ss')
注意： attr不能获得多选框的选中值checked属性
​
prop()  //该方法可以获取多选框的checked属性

 

复选框选中属性操作

//复选框选中案例
//获取选中状态
 var flag=$("#ck").prop("checked");
if(flag){
    //选中了
    $("#ck").prop("checked",false);
}else{
    //没有选中
    $("#ck").prop("checked",true);
}

 

设置和获取元素宽高

width()   //获取和设置宽度
height()  //获取和设置高度
$("#dv").css("width")   //获取宽度，返回字符串 100px，可以使用parsetInt转换为数字
​
$('#dv').width(100);    //直接设置元素宽度为100，不需要带px
​
总结： 通过css设置和获取宽高，需要带px单位，使用width()方法可以不用带px单位。
​

获取元素的位置操作

offset() 方法可以获得 left和top值，都是数字，不带单位
offset().left  //left值
offset().top
​
​
//获取left和top的值--->都是数字类型
console.log($("#dv").offset().left);
console.log($("#dv").offset().top);
​
//设置left和top值
$("#dv").offset({"left":200,"top":200});

13.页面滚动距离

scrollLeft()  滚动出去的左边距离
scrollTop()   滚动出去的顶部距离
​
$(document).click(function () {
    //获取的滚动出去的距离----->数字类型
    console.log($(this).scrollLeft()+"===="+$(this).scrollTop());
});

绑定事件

bind() 事件绑定 类似于JS中的addEventListener
​
普通添加事件：
    $('#btn').click();
​
添加多个监听事件
$('#btn').bind({"click"：回调函数},{"mouseover"：回调函数});
​
//可以同时添加多个事件，但是事件执行函数是一样的
$('#btn').bind("mouseover mouseout",function(){});

delegate(标签,事件类型，回调函数)  //给某个元素的子元素添加事件

on()  父元素调用为子元素添加事件
on(事件类型，标签，回调函数);
​
两种用法：
    1.两个参数： 事件名称 回调函数
    2.三个参数: 事件名称 添加事件元素，回调函数

总结：
    bind:
         绑定多个事件
         参数:{"事件的类型":事件处理函数,....}
    delegate
         参数:父级元素.delegate("子级元素","事件类型",事件处理函数)
    on
         参数:父级元素.on("事件类型","子级元素",事件处理函数);
​
建议：在手机上或者动态添加的事件推荐使用on来添加

解绑事件

on()  off()
bind()  unbind()
delegate()  undelegate()
​
//建议： 事件绑定和解绑，不要混着使用，普通的click方法可以使用off解绑

注意： 如果是通过父级元素添加事件，那么父级元素解绑事件，子级元素事件也会消失。

 //第一个按钮通过on的方式绑定点击事件
$("#btn1").on("click",function () {
    alert("我被点了");
});
//第二个按钮把第一个按钮的点击事件解绑
$("#btn2").on("click",function () {
    //off()参数:要解绑的事件的名字
    $("#btn1").off("click");//解绑事件
});

 //第一个按钮bind绑定事件
$("#btn1").bind("click",function () {
    alert("我又被点了");
});
//第二个按钮unbind解绑事件
$("#btn2").bind("click",function () {
    $("#btn1").unbind("click");//解绑事件的方法
});

//点击第一个按钮为div中p绑定点击事件
$("#btn1").click(function () {
    $("#dv").delegate("p","click",function () {
        alert("我被点了");
    });
});
//点击第二个按钮为div中p解除绑定事件
$("#btn2").click(function () {
    $("#dv").undelegate("p","click");//解绑
});

事件对象

e.delegateTarget----->div--->谁在替元素绑定的事件--div
e.currentTarget----->input--->真正是谁绑定的事件
e.target---->input----触发的事件

链式编程原理

链式编程原理： 内部返回了return this当前对象；
​
注意： 有些方法传入了参数，才能返回对象，如果是直接获取属性的值，返回的是内容，就不是对象了。

function Student(name) {
    this.name=name;
    this.sayHi=function (name) {
        if(name){
            console.log("俺是"+name);
            return this;
        }else{
            console.log("我的名字叫"+this.name);
        }
        //console.log("我的名字叫"+this.name);
        // return this;//把当前对象返回
    };
    this.eat=function () {
        console.log("我就是喜欢吃大蒜+榴莲+臭豆腐");
    };
}
var stu=new Student("小明");
stu.sayHi().eat();
​

1.评分案例

 $(".comment>li").mouseover(function () {
     $(this).text("★").prevAll("li").text("★").end().nextAll("li").text("☆");
 }).mouseout(function () {
     $(".comment").find("li").text("☆");
     $(".comment>li[index=1]").text("★").prevAll("li").text("★")
 }).click(function () {
     $(this).attr("index","1").siblings("li").removeAttr("index");
 });