Web学习历程记录（十三）—— jQuery

企业开发 2023-04-16 13:29:28 阅读次数: 0

jQuery

概述

jq就是js库，封装了js常见的操作

jQuery的作用
简化js的DOM树操作

jq与js对象转换

js对象：document.getElement() 获得的都是js对象 大部分是属性
jq对象：$()大部分是方法

jq本质上虽然是js，但是使用jq的属性和方法必须保证对象是jQuery对象而不是js方式获得的DOM对象。
使用js方式获取的对象是js的DOM对象，使用jq获取的对象是jq对象

转换语法
js的DOM对象转换成jQuery对象，语法：$(js对象)
jQuery对象转换成js对象，语法：jquery对象[索引]或jquery对象.get(索引)：一般索引写0

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.3.1.js"></script>

</head>
<body>
<span id="spanId"></span><br/>
<input type="button" value="插入内容" onclick = "writeIn()"/>
<input type="button" value="插入内容" onclick = "writeIn02()"/>
</body>
<script>
    function writeIn() {
     
     
        var spanEle = document.getElementById("spanId");
        var $sE = $(spanEle);
        $sE.html("hello...");
    }
    function writeIn02() {
     
     
        var $spanEle = $("#spanId");
        var spanEle = $spanEle[0];
        spanEle.innerHTML = "hello";
    }
</script>
</html>

jq中事件的使用

基本事件的使用

点击事件

<body>
<input id="btnid" type="button" value="click"/>
</body>
<script>
    $("#btnid").click(function () {
     
     
        alert("点击")
    })
</script>

获得焦点和失去焦点

<body>
<input id="btnid" type="text" value="focus"/>
</body>
<script>
    $("#btnid").focus(function () {
     
     
        alert("获得了焦点");
    });
    $("#btnid").blur(function () {
     
     
        alert("失去焦点");
    });
</script>

内容改变事件

<body>
<select id="select">
    <option value = "1">这是1</option>
    <option value = "2">这是2</option>
    <option value = "3">这是3</option>
    <option value = "4">这是4</option>
</select>
</body>
<script>
   $("#select").change(function () {
     
     
       alert("内容改变为" + this.value);
   }) ;
</script>

鼠标相关事件

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.3.1.js"></script>
    <style>
        #divId{
     
     
            width:200px;
            height:200px;
            background: black;
        }
    </style>

</head>
<body>
<div id = "divId"></div>
</body>
<script>
    $("#divId").mouseenter(function () {
     
     
        $(this).css("backgroundColor","red");
    });
    $("#divId").mouseout(function () {
     
     
        $(this).css("backgroundColor","blue");
    });
</script>

键盘相关事件

<body>
<input id="inputId" type="text">
</body>
<script>
   $("#inputId").keydown(function () {
     
     
       console.log("键盘摁下")
   })
    $("#inputId").keyup(function () {
     
     
        console.log("键盘抬起");
    });
</script>

事件的绑定与解绑

事件的绑定
jq元素对象.on(事件类型，function(){})

事件的解绑
jq元素对象.off(事件名称)

<body>
<input id="btnid" type="button" value="click"/><br/>
<input id="bthid2" type="button" value="解绑">
</body>
<script>
    var btn = $("#btnid");
    btn.click(function () {
     
     
        alert("helli")
    })
    $("#btnid2").on("click",function () {
     
     
        btn.off("click");
    });

</script>

事件切换

<body>
<div id = "divId"></div>
</body>
<script>
    $("#divId").mouseenter(function () {
     
     
        $(this).css("backgroundColor","red").
        mouseout(function () {
     
     
        $(this).css("backgroundColor","blue");
    });
</script>

jQ动画

基本效果

方法
show([speed],[easing],[fn]) 显示元素方法
hide([speed],[easing],[fn]) 隐藏元素方法
toggle([speed],[easing],[fn]) 切换元素方法

参数
speed 三种预定速度之一的字符串(“slow”,“normal”,or"fast")
easing 用来指定切换，默认是swing，可用参数是linear
fn 在动画完成时执行的函数，每个元素执行一次

<body>
<input type="button" value="show()" id="btn1"/>
<input type="button" value="hide()" id="btn2"/>
<input type="button" value="toggle()" id="btn3"/><br/>
<div id="div1" style="width: 100px;height: 100px;border: 1px solid red;"></div>
</body>
<script>
    $("#btn1").click(function () {
     
     
        $("#div1").show(1000);
    });
    $("#btn2").click(function () {
     
     
        $("#div1").hide(1000);
    });
    $("#btn3").click(function () {
     
     
        $("#div1").toggle();
    })
</script>

滑动效果

方法
slideDowm([speed],[easing],[fn]) 向下滑动方法
slideUp([speed],[easing],[fn]) 向上滑动方法
slideToggle([speed],[easing],[fn]) 切换元素方法

淡入淡出效果

方法
fadeIn(同上)
fadeOut(同上)
fadeToggle(同上)

jQ选择器

基本选择器

标签选择器(元素选择器) $(“html标签名”) 获得所有匹配标签名称的于元素
id选择器 $("#id的属性值") 获得与指定id属性值匹配的元素
类选择器 $(".class的属性值") 获得与指定的class属性值匹配的元素

层级选择器

后代选择器 $(“A B”) 选择A元素内部的所有B元素
子选择器 $(“A>B”) 选择A元素内部的所有B子元素
兄弟选择器 $(“A+B”) 获得A元素同级的下一个B元素
兄弟选择器 $(“A~B”) 获得A元素同级的所有B元素

属性选择器

$(“A[属性名]”) 包含指定属性的选择器
$(“A[属性名=值]”) 包含指定属性等于指定值的选择器

基本过滤选择器

首元素选择器 :first 获得选择的元素中的第一个元素
尾元素选择器 :last 获得选择的元素中的最后一个元素
非元素选择器 :not(selecter) 不包括指定内容的元素
偶数选择器 :even 偶数，从0开始
奇数选择器 :odd 奇数，从0开始
等于索引选择器 :eq(index) 指定索引元素
大于索引选择器 :gt(index)
小于索引选择器 :It(index)

表单属性选择器

可用元素选择器 :enabled 获得可用元素
不可用元素选择器 :disable 获得不可用元素
选中选择器 :checked 获得单选/复选框选中的元素
选中选择器 :selected 获得下拉框选中的元素

JQ操作样式

方法
css(name) 获取CSS样式
css(name,value) 设置CSS样式

<body>
<div id="divId" style="width: 100px ; height: 100px ; background-color: #ff0000;"></div>
<input type="button" value="获得背景色样式值" id="btn01"/>
<input type="button" value="设置背景色样式" id="btn02"/>
</body>
<script>
    $("#btn01").click(function () {
     
     
        var colorValue = $("#divId").css("background-color");
        alert("colorValue = " + colorValue);
    });
    $("#btn02").click(function () {
     
     
        $("#divId").css("background-color" , "green");
    });
</script>

jq操作属性

方法
attr(name,[value]) 获得/设置属性的值
prop(name,[value]) 获得/设置属性的值(checked,selected)

使用JQ操作DOM

API
val([value]) 获得/设置标签里面value属性相应的值
text([value]) 获得/设置元素的文本内容
html([value]) 获得/设置元素的标签体内容

val()和val(…)

<body>
<input type="text" value="hello" id="inputId"/> <br/>
<input type="submit" value="获得value" id="btn01" />
<input type="submit" value="设置value" id="btn02"/>
</body>
<script>
    $("#btn01").click(function () {
     
     
        var value = $("#inputId").val();
        console.log(value);
    });
    $("#btn02").click(function () {
     
     
        $("#inputId").val("balabalablabala");
    });
</script>

text()和html()

<body>
<p id="pid"></p><br/>
<input type="button" value="html(...)" id="btn01"/>
<input type="button" value="text(...)" id="btn02"/>
</body>
<script>
    $("#btn01").click(function () {
     
     
        $("#pid").html("<font color='red'>hello...html</font>");
    });
    $("#btn02").click(function () {
     
     
        $("#pid").text("<font color = 'red'>hello...text</font>");//不支持标签
    });
</script>

JQ的创建，插入

API

$(“A”) 创建A元素对象
append(element) 添加成最后一个子元素，两者之间是父子关系
prepend(element) 添加成第一个子元素,两者之间是父子关系
appendTo(element) 添加到父元素的内部最后面
prependTo(element) 添加到父元素的内部最前面
before(element) 添加到当前元素前面，两者之间是兄妹关系
after(element) 添加到当前元素的后面，两者之间是兄妹关系

内部插入

append      a.apend(c)      将c插入到a的内部的后面
appendTo    c.appendTo(a)   将c插入到a的内部的后面
<a>
    ...
    <c></c>
</a>    
prepend      a.prepend(c)   将c插入到a的内部的前面
prependTo    c.prepend(a)   将c插入到a的内部的前面
<a>
   <c></c>
   ...
</a>

外部插入

after   a.after(c)
<a></a><c></c>

before   a.before(c)
<c><c><a></a>

jq移除节点

API
remove() 删除指定元素
empty() 清空指定元素的所有子元素

JQ遍历

js方式遍历

for(var i = 0;i<元素数组.length;i++){
元素数组[i];
}

<script>
var array = [1,2,3,4,5];
for(var i = 0 ; i <  array.length ; i++){
     
     
    array[i];
}
</script>

jq对象方法遍历

jquery对象.each(function(index,element){})

<script>
var array = [1,2,3,4,5];
$(array).each(function (a,n) {
     
     
    console.log("array[" +a+ "]="+n);
});
</script>

jq全局遍历

$.each(jquery,function(index,element){});

<script>
var array = [1,2,3,4,5];
$.each($(array),function (a,n) {
     
     
    console.log(a,n);
})
</script>

jq3.0新特性for of语句遍历
for(变量 of jquery对象){
变量;
}

for(n of $ (array)){
    console.log(n);
}

案例

使用JQuery完成页面定时广告弹出

进入页面3s后弹出广告，3s后广告隐藏

<body>
<div id="adDiv" style="width: 100%;height: 300px;display: none">
    <img src="../src/ad.jpg" height="100%" width="100%"/>
</div>
</body>
<script>
    setTimeout("showAd()",3000);

    function showAd(){
     
     
        var $adObj = $("#adDiv");
        $adObj.show(3000,function () {
     
     
            setTimeout("hideAd()",3000);
        });
    }
    function hideAd(){
     
     
        var $adObj = $("#adDiv");
        $adObj.hide(3000);
    }
</script>

使用jquery完成表格的隔行换色

使用筛选器，匹配出奇数偶数行，设置背景色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.3.1.js"></script>
</head>
<body>
<table width="500px" align="center" border="1px">
    <tr>
        <td><input type="checkbox" id="all" /></td>
        <td>商品名称</td>
        <td>商品价格</td>
        <td>商品数量</td>
        <td>操作</td>
    </tr>
    <tr>
        <td><input type="checkbox" class="one"/></td>
        <td>Mac</td>
        <td>18800</td>
        <td>10</td>
        <td>
            <a href="#">删除</a>
            <a href="#">修改</a>
        </td>
    </tr>
    <tr>
        <td><input type="checkbox" class="one"/></td>
        <td>Mac</td>
        <td>18800</td>
        <td>10</td>
        <td>
            <a href="#">删除</a>
            <a href="#">修改</a>
        </td>
    </tr>
    <tr>
        <td><input type="checkbox" class="one"/></td>
        <td>Mac</td>
        <td>18800</td>
        <td>10</td>
        <td>
            <a href="#">删除</a>
            <a href="#">修改</a>
        </td>
    </tr>
    <tr>
        <td><input type="checkbox" class="one"/></td>
        <td>Mac</td>
        <td>18800</td>
        <td>10</td>
        <td>
            <a href="#">删除</a>
            <a href="#">修改</a>
        </td>
    </tr>
    <tr>
        <td><input type="checkbox" class="one"/></td>
        <td>Mac</td>
        <td>18800</td>
        <td>10</td>
        <td>
            <a href="#">删除</a>
            <a href="#">修改</a>
        </td>
    </tr>

</table>
</body>
<script>
    $("tr:odd").css("backgroundColor","#ffb6c1");
    $("tr:even").css("backgroundColor","#4f818d");
</script>
</html>

使用jq完成复选框效果

<script>
     $("#all").click(function () {
     
     
     $(".one").attr("checked",this.checked);
    });
</script>

使用jq完成表格换色

<script>
    var color;
    $("tr:odd").css("backgroundColor","#ffb6c1");
    $("tr:even").css("backgroundColor","#4f818d");
    $("tr").mouseenter(function () {
     
     
        color = $(this).css("backgroundColor");
        $(this).css("backgroundColor","red");
    });
    $("tr").mouseout(function () {
     
     
        $(this).css("backgroundColor",color);
    })
    $("#all").click(function () {
     
     
        $(".one").attr("checked",this.checked);
    });
</script>

电子时钟

<body>
<span id="spanid">
</span>
</body>
<script>
    setInterval("gettime()",1000)
    function gettime() {
     
     
        var data = new Date().toLocaleString();
        $("#spanid").html(data);
    }
</script>

猜你喜欢

转载自blog.csdn.net/qq_49658603/article/details/108929305
今日推荐
周排行
vue + echart +map中国地图，省市地图，区县地图
spring boot2 (31)-cors跨域请求
『学习资料推荐』299元买的微信营销资料打包
个人学习卷积神经网络的疑惑解答
网络工程师-软考
模拟人生4 春夏秋冬、星梦起飞版更新下载方法以及常见问题
python关于对象的字符串显示str和repr以及
奇怪的session混乱问题
【3】分治法（divide-and-conquer）
Java项目开发成绩管理系统（九） 各模块实现信息修改
每日归档
更多
2024-08-07(0)
2024-08-06(0)
2024-08-05(0)
2024-08-04(0)
2024-08-03(0)
2024-08-02(0)
2024-08-01(0)
2024-07-31(0)
2024-07-30(0)
2024-07-29(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022