认识了解JQuery页面交互

耀世
2022-11-07 / 2 评论 / 37 阅读 / 正在检测是否收录...

la6l7v8c.png

认识JQuery

  • jQuery 是一个 JavaScript 库。
  • jQuery 极大地简化了 JavaScript 编程。
  • jQuery 很容易学习。
  • 快速获取文档元素
    jQuery的选择机制构建于Css的选择器,它提供了快速查询DOM文档中元素的能力,而且大大强化了JavaScript中获取页面元素的方式。
  • 提供漂亮的页面动态效果
    jQuery中内置了一系列的动画效果,可以开发出非常漂亮的网页,许多网站都使用jQuery的内置的效果,比如淡入淡出、元素移除等动态特效。
  • 创建AJAX无刷新网页
    AJAX是异步的JavaScript和XML的简称,可以开发出非常灵敏无刷新的网页,特别是开发服务器端网页时,比如PHP网站,需要往返地与服务器通信,如果不使用AJAX,每次数据更新不得不重新刷新网页,而使用AJAX特效后,可以对页面进行局部刷新,提供动态的效果。
  • 提供对JavaScript语言的增强
    jQuery提供了对基本JavaScript结构的增强,比如元素迭代和数组处理等操作。
  • 增强的事件处理
    jQuery提供了各种页面事件,它可以避免程序员在HTML中添加太多事件处理代码,最重要的是,它的事件处理器消除了各种浏览器兼容性问题。
  • 更改网页内容
    jQuery可以修改网页中的内容,比如更改网页的文本、插入或者翻转网页图像,jQuery简化了原本使用JavaScript代码需要处理的方式。

只需要少量的代码,即可将它们集成到网站上,并且能够帮助访问者分享网站上的内容。

JS与JQ之间的获取

la6kqp6o.png

//原生js获取元素
var div = document.getElementsByClassName("header");
console.log(div);

//jq通过类选择器获取元素并输出控制台
console.log($(".header"));

//等待页面DOM结构加载完成后执行,事件处理的程序
//详写
$(document).ready(function(){
    console.log($(".header"));
})
//简写
$(function(){
    console.log($(".header"));
})

盒子动画示例

这个例子在页面上定义了2个层,单击层会让层消失,选择元素使用了JQuery选择器。例子中消失的动画效果是JQuery提供的默认动画效果。hide隐藏
在操作之前先获取jq3.6.1版本的代码 可通过外链或者本地方式引入 外链引入必须要有网络的情况下才能正常使用jquery-3.6.1.js

la6l24qb.png

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .header{
                width: 300px;
                height: 100px;
                text-align: center;
                background-color: #ccc;
            }
        </style>
        <script src="https://code.jquery.com/jquery-3.6.1.js"></script>
    </head>
    <body>
        <!-- HTML的代码 -->
        <div class="header">
            <h1>Hello World</h1>
        </div>
        <div class="header">
            <h1>Hello XingYiGe</h1>
        </div>
        <br />
        <br />
        <br />
        <button class="butGo">点我点我点我</button>
    </body>
    <script src="js/index.js"></script>
</html>
//JS代码
//等待页面DOM结构加载完成后执行,事件处理的程序
$(function(){
    $(".header").click(function(){
        //hide(隐藏时间) 用于隐藏
        $(this).hide(3000);
    })
})

la6l4ijz.png

给按钮也加上单击事件 多种写法

//写法一
$(document).ready(function(){
    $(".butGo").click(function(){
        alert("你点我干嘛 有种再点一次");
        $(".butGo").hide(3000);
    })
})

//写法二
$().ready(function(){
    $(".butGo").click(function(){
        alert("你点我干嘛 有种再点一次");
        $(".butGo").hide(3000);
    })
})

//写法三
$(function(){
    $(".butGo").click(function(){
    alert("你点我干嘛 有种再点一次");
    $(".butGo").hide(3000);
    })
})

解决JQuery与其他库冲突

var $="其他库";
//解决冲突并重新创建一个快捷方式
var jq = jQuery.noConflict();
console.log(jq("div"));

选择器

la6l8con.png

//基本选择器
$("#id")            //ID选择器
$("div")            //元素选择器
$(".classname")     //类选择器
$(".classname,.classname1,#id1")     //组合选择器

//层次选择器
 $("#id>.classname ")    //子元素选择器
$("#id .classname ")    //后代元素选择器
$("#id + .classname ")    //紧邻下一个元素选择器
$("#id ~ .classname ")    //兄弟元素选择器

//过滤选择器(重点)
$("li:first")    //第一个li
$("li:last")     //最后一个li
$("li:even")     //挑选下标为偶数的li
$("li:odd")      //挑选下标为奇数的li
$("li:eq(4)")    //下标等于 4 的li(第五个 li 元素)
$("li:gt(2)")    //下标大于 2 的li
$("li:lt(2)")    //下标小于 2 的li
$("li:not(#runoob)") //挑选除 id="runoob" 以外的所有li

//内容过滤选择器
$("div:contains('Runob')")    // 包含 Runob文本的元素
$("td:empty")                 //不包含子元素或者文本的空元素
$("div:has(selector)")        //含有选择器所匹配的元素
$("td:parent")                //含有子元素或者文本的元素

//可见性过滤选择器
$("li:hidden")       //匹配所有不可见元素,或type为hidden的元素
$("li:visible")      //匹配所有可见元素

//属性过滤选择器
$("div[id]")        //所有含有 id 属性的 div 元素
$("div[id='123']")        // id属性值为123的div 元素
$("div[id!='123']")        // id属性值不等于123的div 元素
$("div[id^='qq']")        // id属性值以qq开头的div 元素
$("div[id$='zz']")        // id属性值以zz结尾的div 元素
$("div[id*='bb']")        // id属性值包含bb的div 元素
$("input[id][name$='man']") //多属性选过滤,同时满足两个属性的条件的元素

//状态过滤选择器
$("input:enabled")    // 匹配可用的 input
$("input:disabled")   // 匹配不可用的 input
$("input:checked")    // 匹配选中的 input
$("option:selected")  // 匹配选中的 option

//表单选择器
$(":input")      //匹配所有 input, textarea, select 和 button 元素
$(":text")       //所有的单行文本框,$(":text") 等价于$("[type=text]"),推荐使用$("input:text")效率更高,下同
$(":password")   //所有密码框
$(":radio")      //所有单选按钮
$(":checkbox")   //所有复选框
$(":submit")     //所有提交按钮
$(":reset")      //所有重置按钮
$(":button")     //所有button按钮
$(":file")       //所有文件域
1

评论 (2)

取消
  1. 头像
    耀世 作者
    Windows 10 · Google Chrome

    画图

    回复
  2. 头像
    小宝
    Windows 10 · Google Chrome

    画图

    回复