jquery快速入门

Posted tuziling

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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");
});

 

 


 













































































































































































































































以上是关于jquery快速入门的主要内容,如果未能解决你的问题,请参考以下文章

jQuery入门

jQuery快速入门

jquery 快速入门学习总结

jQuery入门

jquery快速入门

jQuery超快速入门教程上篇