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)
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";
};
.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({"属性名"："属性值"},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:
绑定多个事件
参数:{"事件的类型":事件处理函数,
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快速入门的主要内容，如果未能解决你的问题，请参考以下文章