本文转载自https://blog.csdn.net/xiaogeldx/article/details/85467270
JQ简单介绍
- JQ是JS写的插件库，就是一个js文件
- 凡是用jq能实现的，js都能实现，js能实现的，jq不一定能实现
- JQ理念
- write less，do more
在JQ中使用选择器选择元素和在css中使用CSS选择器是一样的,如下：
111
hahaha
#下面的也一样 # #在https://www.bootcdn.cn/jquery/里https://cdn.bootcss.com/jquery/3.3.1/jquery.js复制到本地或者直接引用JQ基本使用
JQ基本使用1
修改内容
- html（）相当于JavaScript的innerHTML
text（）相当于JavaScript的innerText
- 1
- 2
- 3
- 4
转换
get()/[]：jq对象使用js方法
var p1 = document.getElementById('p1'); $(p1).html('hahaha');$()：js对象使用jq方法
$('.p2')[0].innerText = 'hengheng'; //两种方法效果一样，索引表示第几个 $('#p1').get(0).innerText = 'hengheng';点击
click()
$("#btn").click(function () { alert("qew"); })鼠标
hover()
//当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。 $("#p1").hover(function () { console.log("移入") },function () { console.log("移出") })追加
append()
$("#p1").append("我是被追加进来的") //加到后面添加
prepend()
$("#p1").prepend("我是被添加进来的“) //添加到前面前后
- before()
after()
$("#p1").before("我是他哥哥"); //加到上一行 $("#p1").after("我是他兄弟"); //加到下一行
移除
- empty() 清空
remove() 移除
$("div").empty() // 清空里面的内容，保留自己属性
$("div").remove() // 移除自己和下面子集的所有
JQ的基本使用２
操作属性
- attr()
removeAttr()
alert($("#p1").attr("id")); //返回属性值 $("#p1").attr("a","b") //添加/修改属性，无则增，有则改 $("#p1").attr({ "a":"b", //注意符号 "class":"d" }); $(".d").removeAttr("a"); //移除添加/移除class
- addClass()
removeClass()
$("#div1").addClass("div3"); //写多个也可以加多个 $("#div1").addClass("div4"); //写多个也可以加多个 $("#div1").removeClass("div3") //移除 $(".div3").removeClass("div3") //同上判断
hasClass() 看是否存在该css
alert($(".div12").hasClass("div12")); //hasClass中添属性值 alert($("#div1").hasClass("div12")); //返回结果都是true索引
- each() each() 方法为每个匹配元素规定要运行的函数
index() 索引 相当于jq的indexOf()
$("ul li").each(function (i) { $(this).html("我是第"+i+"个") //this表示当前标签 }) alert($("#li2").index()); //2，查索引滚动条事件
- scroll()
- scrollTop()
scrollLeft()
$(window).scroll(function () { console.log($(document).scroll()); console.log($(document).scrollLeft()); //左右 console.log($(document).scrollTop()); //上下 })JQ基本使用３
父子元素
- parent
children()
兄弟
siblings
后代
find
祖宗(父级之上)
parents
222
结果：
定位父级
position()
窗口
offset()
宽高
width()/height()
循环添加
on
移除
off
JQ操作样式
$选中元素.css({css样式，以json形式})
$('.div1').css({ 'width':'400px', 'background':'yellow', 'color':'red', 'font-size':29 })
JQ动画
常用的特殊符号
- hide():隐藏
- show():显示
- slideUp:向上
- slideDown:向下
- slideToggle:取反
- fadeIn:淡入
- fadeOut:淡出
- fadeTo:自定义
- fadeToggle;取反
- animate;动画
- stop:停止
delay:延迟
$('#btn1').click(function(){ $('div').hide(); //hide()中可加参数，参数表示执行多久 }); $('#btn2').click(function () { $('div').show(2000); //show()中可不加参数 }); $('#btn1').click(function () { $('div').slideUp(); //slideUp()中可加参数 $('div').slideToggle(); //可加参数,加此条代码拉上后自动下来 }); $('#btn2').click(function () { $('div').slideDown(1000); //slideDown()中可不加参数 $('div').slideToggle(); //可加参数，加此条代码拉下后自动上去 }); $('#btn3').click(function () { $('div').slideToggle(); //可加参数，点一下拉下，再点拉上 }); $('#btn1').click(function () { $('div').fadeOut(2000); //淡出 $('div').fadeToggle(); //取反,淡出后自动淡入 }); $('#btn2').click(function () { $('div').fadeIn(1000); //淡入 $('div').fadeOut(); //取反,淡入后自动淡出 }); $('#btn3').click(function () { $('div').fadeToggle(1000); //可加参数，点一下淡出，再点淡入 }); $('#btn1').click(function () { $('div').animate({ width:'600px', height:'600px', },2000) }); $('#btn2').click(function () { $('div').stop(); //暂停动画 }); $('#btn3').click(function () { $('div').delay(2000).fadeOut(2000); //delay延迟,这里延迟两秒再淡出 });练习
轮播图 - <
- >
