jquery

最新推荐文章于 2024-09-22 11:17:00 发布
最新推荐文章于 2024-09-22 11:17:00 发布
阅读量44 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/mushuiyishan/p/10782274.html
版权

三元运算：

var a = if 条件？真值：假值

 

 

全选，反选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src='jquery-3.4.0.js'></script>
</head>
<body>
    <table border="1px" width="200px">
        <thead>
        <tr id="i1">
            <th><input type="button" value="全选" οnclick="f1()"/></th>
            <th><input type="button" value="取消" οnclick="f2()"/></th>
            <th><input type="button" value="反选" οnclick="f3()"/></th>
        </tr>
        </thead>
        <tbody >
        <tr >
            <td><input type="checkbox" /></td>
            <td>id</td>
            <td>port</td>
        </tr>
        <tr>
            <td><input type="checkbox" /></td>
            <td>123</td>
            <td>456</td>
        </tr>
        <tr>
            <td><input type="checkbox" /></td>
            <td>123</td>
            <td>456</td>
        </tr>
        <tr>
            <td><input type="checkbox" /></td>
            <td>123</td>
            <td>456</td>
        </tr>
        </tbody>
    </table>
    <script>
        console.log($(':button:first'));
        function f1() {
            $('tbody :checkbox').prop('checked',true)
        }
        function f2 () {
            $('tbody :checkbox').prop('checked',false)
        }
        function f3(){
            $(':checkbox').each(function () {
                if (this.checked){
                    this.checked = false
                }
                else{
                    this.checked = true
                }
            })}
    </script>

</body>
</html>
View Code

 

左侧菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color: blue;
            width: 200px;
        }
        .hide{
            display: none;
        }
    </style>
    <script src="jquery-3.4.0.js"></script>
</head>
<body>
    <div class="c1" >
        菜单1
    </div>
    <div class="hide">
        <div>内容一</div>
        <div>内容一</div>
        <div>内容一</div>
    </div>
    <div class="c1" >
        菜单2
    </div>
    <div class="hide">
        <div>内容一</div>
        <div>内容一</div>
        <div>内容一</div>
    </div>
    <div class="c1" >
        菜单3
    </div>
    <div class="hide">
        <div>内容一</div>
        <div>内容一</div>
        <div>内容一</div>
    </div>
<script>
    console.log($('.c1'));
    $('.c1').click(function () {
        $('.c1').next().addClass('hide');
        $(this).next().removeClass('hide')
    })
</script>
</body>
</html>
View Code

 

 

 

模态对话框：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .page{}
        .edit{}
        .hide{
            display: none;
        }
        .shadow{
            position: fixed;
            right: 0px;
            left: 0px;
            top: 0px;
            bottom: 0px;
            background-color: grey;
            opacity: 0.5;
            z-index: 5;
            }
        .windows{
            position: fixed;
            width: 500px;
            height: 300px;
            left: 50%;
            top: 50%;
            margin-top: -150px;
            margin-left: -250px;
            background-color: white;
            z-index: 6;
        }
    </style>
</head>
<body>
    <div class="shadow hide">

    </div>

    <div class="windows hide">
        <p><input type="text"></p>
        <p><input type="password"></p>
        <p><input type="button" value="ok"></p>
        <p><input type="button" value="cancel"></p>
    </div>

    <div class="page">
    <input type="button" value="add" >
    <table border="1px" >
        <thead>
        <tr>
            <th>No.</th>
            <th>ip</th>
            <th>port</th>
            <th>edit</th>
        </tr>
        </thead>
        <tbody>
        <tr >
            <td>1</td>
            <td>192.163.0.0</td>
            <td>8888</td>
            <td class="edit">edit</td>
        </tr>
        <tr>
            <td>2</td>
            <td>192.163.0.1</td>
            <td>8000</td>
            <td class="edit">edit</td>
        </tr>
        <tr>
            <td>2</td>
            <td>192.163.0.2</td>
            <td>8008</td>
            <td class="edit">edit</td>
        </tr>
        </tbody>
    </table>
</div>

    <script src="jquery-3.4.0.js"></script>
    <script>
        $('.page :button').click(function () {
            $('.shadow, .windows').removeClass('hide')
        });
        $('.edit').click(function () {
            $('.shadow, .windows').removeClass('hide');
            var idd = $(this).prev().prev().text()
            $('.windows :text').val(idd)
            var idd = $(this).prev().text()
            $('.windows :password').val(idd)
        })
    </script>
</body>
</html>
View Code

 

转载于:https://www.cnblogs.com/mushuiyishan/p/10782274.html

weixin_33709590
关注
jQuery选择器
m0_57774967的博客
06-16 4704
jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素（注意：jQuery选择器返回的是jQuery对象）jQuery选择器有很多，基本兼容了CSS1到CSS3所有的选择器，并且jQuery还添加了很多更加复杂的选择器jQuery选择器虽然很多，但是选择器之间可以互相替代，就是说获取一个元素，会有很多种方法获取到，所以平时真正能用到的只是少数的最常用的选择器...
jquery-3.7.0.min.js（jQuery下载）
06-25
jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）...
jQuery
CJW的博客
07-28 9687
jQuery jQuery是一个JavaScript函数库，是一个轻量级的"写的少，做的多"的JavaScript库。 jQuery库包含以下功能： HTML 元素 选取 HTML 元素 操作 CSS 操作 HTML 事件函数 JavaScript 特效 动画 HTML DOM 遍历和修改 AJAX 除此之外，JQuery还提供了大量的插件。目前兼容于所有主流浏览器。 jQuery 语法 通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行"操作"（actions）。jQu
JQuery的引用
zwjl1017的博客
04-01 4075
最近在做的项目是用JQuery开发的，但是在JQuery这项技术上，资质尚浅，特意学习一下，做一些笔记，有不对之处希望大佬们多多指教！ JQuery的下载和引入 在JQuery官网上 （Download jQuery | jQuery）jQuery: The Write Less, Do More, JavaScript Libraryhttps://jquery.com/download/ 标记的是开发环境下的版本，按个人需要去使用版本，点开以后直接全选复制，在项目中创建一个js文件（例：JQue
jQuery基础
luckyboy!的博客
11-16 3466
jQuery由美国人John Resig于2006年创建。jQuery是目前最流行的JavaScript程序，它是对JavaScript对象和函数的封装。它的设计思想是write less,do more。
jQuery 遍历对象
m0_67458498的博客
03-28 4264
遍历对象 $.each(对象，function(k 对象属性变量，v对象属性值变量） var cat={ name:'kitty'; age:5 climb:function(){ console.log('在爬树') } $.each (cat,function(k,v){ console.log(k+':'+v); }) 遍历数组 $.each(数组，function(k元素下标变量，v元素值变量{});) var color=['red','blu
jquery移除标签
qq_35086941的博客
04-28 3738
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function
jquery在线引用
jiufu_的博客
07-15 5094
直接引如下的即可 <scripttype="text/javascript"src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
jQuery的下载及安装
weixin_64812436的博客
10-17 5347
1、下载地址：https://jquery.com/，点击Download jQuery下载 2、继续点击如下图所示 3、点击后会出现如图所示清况，先Ctrl+A全选，再Ctrl+C复制 4、在 vs code 新建js文件，名字自己取，我取的是jquery.js 5、使用时，用script标签导入jquery.js文件，即可正常调用jquery里面的方法
jQuery-3.4.1下载
cheng1a的博客
02-11 5491
jQuery-3.4.1下载 链接：https://pan.baidu.com/s/1Z1mjG00jzSzXEmXNtvFT8g 提取码：0430
jQuery引入方式
m0_67388537的博客
07-07 3263
jQuery的两种引入方式
jQuery源码 jQuery源码 jQuery源码
04-19
jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码...
jquery-migrate
03-05
jQuery 迁移插件， Migrate 有两个版本。jquery-migrate-1.4.1版本将帮助您将 1.9 之前的 jQuery 代码更新到 jQuery 1.9 到 3.0。 jquery-migrate-3.4.0版本将帮助您更新代码以在 jQuery 3.0 或更高版本上运行。 ...
jquery-3.3.1.js和jquery-3.3.1.min.js
03-22
jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-...
Java Web Jquery表单验证
07-26
编写基于Jquery的表单验证插件 Java Web Jquery表单验证 jQuery是一个流行的JavaScript库，可用于在网页上进行各种操作，包括表单验证。 1、将基于Jquery的表单验证的调查问卷分为四个部分：FrontPage.html、write....
计算机毕业设计之：基于微信小程序的诗词智能学习系统（源码+文档+解答）
最新发布
程序员阿龙的博客
09-22 4186
博主介绍： ✌我是阿龙，一名专注于Java技术领域的程序员，全网拥有10W+粉丝。作为CSDN特邀作者、博客专家、新星计划导师，我在计算机毕业设计开发方面积累了丰富的经验。同时，我也是掘金、华为云、阿里云、InfoQ等平台的优质作者。通过长期分享和实战指导，我致力于帮助更多学生完成毕业项目和技术提升。 技术范围： 我熟悉的技术领域涵盖SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app、大数据、物联网、机器学习等方
运行VUE项目运行时候的报错汇总
W3306698294的博客
09-21 295
上面的问题解决问题：【在npm install 后面加 --legacy-peer-deps，就可以解决了】
Babel
小秀的博客
09-20 707
它的主要作用是为了确保在不同浏览器和环境中运行 JavaScript 代码时保持一致的行为，尤其是提供对较新 ECMAScript 特性（如 Promise、Symbol、Object.assign 等）的支持。随着 JavaScript 标准不断更新，新的特性和功能被添加，但并不是所有的浏览器都能及时支持这些新特性。core-js 通常与 Babel 一起使用。core-js 是模块化的，这意味着开发者可以按需引入自己需要的 polyfill，而不是全部引入，这不仅能减少代码体积，还有助于提高性能。
jQuery国内大厂CDN加速链接
TANKING，开源开发者！
09-21 333
jQuery的CDN有很多，但都很不稳定，例如国内的bootcdn经常抽风，还有其他的常见的例如jQuery官方的jsDeliverstaticfile，这些都是经常抽风的。导致使用了线上的CDN的页面打开受到影响，那么就没有国内好用的CDN吗？下面是我汇总的一些大厂的！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值