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");
});

原创：https://www.cnblogs.com/tuziling/p/10111570.html