欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JQuery 基本使用、操作样式、简单动画

程序员文章站 2023-12-25 23:32:33
JQ与JS JQ是JS写的插件库,就是一个JS文件 凡是用JQ能实现的,JS都能实现,JS能实现的,JQ不一定能实现 引入 BootCDN:https://www.bootcdn.cn/jquery/ 本地文件引入:`` 在线引入:`` 选择元素 在JQ中使用选择器选择元素和在CSS中使用CSS选择 ......

jq与js

  • jq是js写的插件库,就是一个js文件
  • 凡是用jq能实现的,js都能实现,js能实现的,jq不一定能实现

引入

  • bootcdn:https://www.bootcdn.cn/jquery/
  • 本地文件引入:<script src="js/jq.js"></script>
  • 在线引入:<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>


选择元素

  • 在jq中使用选择器选择元素和在css中使用css选择器是一样的
  • $("p,span").click(function () { ... });
  • 方法内使用时,选择当前选中的元素,用this:$(this)

基本使用一

  • 修改内容
    • html()
    • text()
  • jq/js对象转换
    • get()/[]
    • $()
  • 点击事件
    • 单击:click()
    • 双击:dblclick()
  • 鼠标滑入滑出:hover()
  • 添加内容
    • 前:prepend()
    • 后:append()
  • 添加标签
    • 前:before()
    • 后:after()
  • 移除值
    • empty()
    • remove()
// 修改内容
$("#p1").html("<h1>11</h1>");//html()
$("#p2").text("<h1>12</h1>");//text()

//将jq对象转换为js对象
var p = $('p');
p.get(0).innerhtml=("<h1>21</h1>");//get()
p[1].innertext=("<h1>22</h1>");//[]

// 将js对象转换为jq对象
var sp1 = document.getelementsbyclassname('sp1');
$(sp1).text("23");//$()

//单击
$("#p1").click(function () {
    alert("单击")
});
//双击
$("#p2").dblclick(function () {
    alert('双击')
});

// 鼠标滑入滑出
$("#p2").hover(function () {
    alert("鼠标滑入")
},function () {
    alert("鼠标滑出")
});

//添加内容
var p2 = $("#p2");
p2.prepend("在前==preend==");//prepend()
p2.append("==append==在后");//append()

//添加标签
var p1 = $("#p1");
p1.before("<p id='p0'>p1_前</p>");//before()
p1.after("<p class='p'>p1_后</p>");//after()

//移除
$('#p1').empty();//清空内容、标签还在
$('#p2').remove();//连标签一起删除


基本使用二

  • 操作属性
    • attr()
    • removeattr()
  • 添加/移除class属性的值
    • addclass()
    • removeclass()
  • 判断:hasclass()
  • 索引
    • each()
    • index()
  • 滚动条事件
    • scroll()
    • scrolltop()
    • scrollleft()
var div1 = $("#div1");
// 操作属性
div1.attr("aaa","bbb");
// alert(div1.attr("aaa"));//bbb
div1.removeattr("aaa");

// 添加/移除class属性的值
div1.addclass("divclass1");
div1.addclass("divclass2");//class="divclass1 divclass2"
div1.removeclass("divclass1");//class标签还在,但没有值

//判断class是否有这个值
// alert(div1.hasclass("divclass"));

//遍历 each()
$("ul li").each(function (i) {
    $(this).text("元素下标:"+i)
});

//下标  index()
$("li").click(function () {
    alert($(this).index())
});

// 滚动条事件
$(window).scroll(function () {
    console.log("左:"+$(document).scrollleft());//离左边
    console.log("上:"+$(document).scrolltop());//离上边
})


基本使用三

  • 父级元素:parent()
  • 子级元素:children()
  • 兄弟:siblings()
  • 后代:find()
  • 祖宗:parents()
// 查找父级元素
console.log($("li").parent());
// 查找子级元素
console.log($("#div1").children());
// 查找兄弟元素
console.log($("#p2").siblings());
// 查找后代元素
console.log($("ul").find("li"));//find必须给参数
// 查找祖辈元素
console.log($("#li3").parents());


操作css样式

$("..").css({...})
//设置
$("#div1").css({
    "height":"300px",
    "width":"300px",
    "border":"1px red solid"
});
//获取
console.log($("#div1").css("border"));


简单动画

  • 隐藏: hide()
  • 显示: show()
  • 向上:slideup()
  • 向下:slidedown()
  • 取反:slidetoggle()
  • 淡入:fadein()
  • 淡出:fadeout()
  • 自定义:fadeto()
  • 取反:fadetoggle()
  • 动画:animate()
  • 停止:stop()
  • 延迟:delay()
// //显示
// $("#btn1").click(function () {
//     $("#div1").show(500)//设置动画时间
// });
// // 隐藏
// $("#btn2").click(function () {
//     $("#div1").hide()
// });

// //向上
// $("#btn1").click(function () {
//     $("#div1").slideup(2000);//设置动画时间
//     //取反:向上完毕之后会自动返回
//     // $("#div1").slidetoggle(2000);
//
// });
// // 向下
// $("#btn2").click(function () {
//     $("#div1").slidedown();
//     $("#div1").slidetoggle(500);//取反
// });

// //淡入
// $("#btn1").click(function () {
//     $("#div1").fadein(1500);//设置动画时间
//     $("#div1").fadetoggle(500);//取反
//
// });
// // 淡出
// $("#btn2").click(function () {
//     $("#div1").fadeout(1500);
// });
// // 自定义
// $("#btn3").click(function () {
//     // 参数:动画时间,透明度(0-1)
//     $("#div1").fadeto(1000,0.3);
// });

//自定义动画
$("#btn1").click(function () {
    //动画时间3秒、延迟3秒
    //完成或者停止时,3秒过后才能继续后续点击的动画操作
    $("#div1").animate({
        width: "600px",
        height: "400px",
        opacity: "0.3"  //透明度
    }, 3000).delay(3000)
});
//自定义动画
$("#btn2").click(function () {
    //动画时间3秒、延迟2秒
    //完成或者停止时,2秒过后才能继续后续点击的动画操作
    $("#div1").animate({
        width: "100px",
        height: "100px",
        opacity: "1"  //透明度
    },3000).delay(2000)
});
// 停止动画
$("#btn3").click(function () {
    $("#div1").stop();
});




上一篇:

下一篇: