Jquery

最新推荐文章于 2023-07-07 14:28:52 发布
最新推荐文章于 2023-07-07 14:28:52 发布
阅读量616 收藏
点赞数
分类专栏： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Henry_YQH/article/details/8483052
版权

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js"></script>       google

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery
/jquery-1.4.min.js"></script>   microSoft

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
      $('ul li').removeClass(function() {
      return 'listitem_' + $(this).index();
    });
  });
});
</script>
<style type="text/css">
.listitem_1, .listitem_3
{
color:red;
}
.listitem_0, .listitem_2
{
color:blue;
}
</style>
</head>

<body>
<h1 id="h1">This is a heading</h1>
<ul>
<li class="listitem_0">Apple</li>
<li class="listitem_1">IBM</li>
<li class="listitem_2">Microsoft</li>
<li class="listitem_3">Google</li>
</ul>
<button>删除列表项中的类</button>
</body>
</html>                    //removeClass() 方法从被选元素移除一个或多个类。  注意index的用法。

 

 

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p:first").removeClass("intro").addClass('main');
  });
});
</script>
<style type="text/css">
.intro
{
font-size:120%;
color:red;
}
.main
{
font-size:90%;
color:blue;
}
</style>
</head>

<body>
<h1>This is a heading</h1>
<p class="intro">This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>改变第一个段落的类</button>
</body>
</html>              //使用函数来删除被选元素中的类。

 

 

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").text(function(n){
    return "这个 p 元素的 index 是：" + n;
    });
  });
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button class="btn1">改变所有 p 元素的文本内容</button>
</body>
</html>             //注意index的用法。

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").toggleClass("main");
  });
});
</script>
<style type="text/css">
.main
{
font-size:120%;
color:red;
}
</style>
</head>

<body>
<h1 id="h1">This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button class="btn1">切换段落的 "main" 类</button>
</body>
</html>

toggleClass() 对设置或移除被选元素的一个或多个类进行切换。

该方法检查每个元素中指定的类。如果不存在则添加类，如果已设置则删除之。这就是所谓的切换效果。

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $('ul li').toggleClass(function(){
      return 'listitem_' + $(this).index();
    });
  });
});
</script>
<style type="text/css">
.listitem_1, .listitem_3
{
color:red;
}
.listitem_0, .listitem_2
{
color:blue;
}
</style>
</head>

<body>
<h1 id="h1">This is a heading</h1>
<ul>
<li>Apple</li>
<li>IBM</li>
<li>Microsoft</li>
<li>Google</li>
</ul>
<button class="btn1">添加或移除列表项的类</button>
</body>
</html>

 


 

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").unwrap();
  });
});
</script>
<style type="text/css">
div{background-color:yellow;}
article{background-color:pink;}
</style>
</head>
<body>

<div>
<p>这是 div 元素中的段落。</p>
</div>

<article>
<p>这是 article 元素中的段落。</p>
</article>

<button>删除每个 p 元素的父元素</button>

</body>
</html>         //unwrap() 方法删除被选元素的父元素。

 

 

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("input:text").val(function(n,c){
      return c + " Gates";
    });
  });
});
</script>
</head>

<body>
<p>Name: <input type="text" name="user" value="Bill" /></p>
<button>设置文本域的值</button>
</body>
</html>              //每次文本框中添加"gates"

 

 

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".btn1").click(function(){
    $("p").wrapInner(document.createElement("b"));
  });
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button class="btn1">加粗段落中的所有内容</button>
</body>
</html>         //创建一个新的 DOM 元素来包裹每个被选元素。



 

 

 

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").toggle(function(){
    $("p").wrap("<div></div>");
    }, function(){
    $("p").unwrap();
  });
});

</script>
<style type="text/css">
div{background-color:yellow;padding:10px;}
</style>
</head>
<body>

<p>This is a paragraph.</p>
<button>包裹或解开 p 元素</button>

</body>
</html>


<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("img").attr("width",function(n,v){
      return v-50;
    });
  });
});
</script>
</head>
<body>
<img src="/i/eg_smile.gif" width="128" height="128" />
<br />
<button>减少图像的宽度 50 像素</button>
</body>
</html>

 

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $('ul li').toggleClass(function(){
      return 'listitem_' + $(this).index();
    });
  });
});
</script>
<style type="text/css">
.listitem_1, .listitem_3
{
color:red;
}
.listitem_0, .listitem_2
{
color:blue;
}
</style>
</head>


<body>
<h1 id="h1">This is a heading</h1>
<ul>
<li>Apple</li>
<li>IBM</li>
<li>Microsoft</li>
<li>Google</li>
</ul>
<button class="btn1">添加或移除列表项的类</button>
</body>
</html>



<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("input:text").val(function(n,c){
      return c + " Gates";
    });
  });
});
</script>
</head>
<body>
<p>Name: <input type="text" name="user" value="Bill" /></p>
<button>设置文本域的值</button>
</body>      

</html>                

  • index - 可选。接受选择器的 index 位置。
  • oldvalue - 可选。接受选择器的当前 Value 属性。 

           


<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    x=$("li").toArray()
      for (i=0;i<x.length;i++)
      {
      alert(x[i].innerHTML);
      }
  });
});
</script>
</head>
<body>
<button>输出每个列表项的值</button>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Soda</li>
</ul>
</body>
</html>


<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
  $("p").hide(1000,function(){
    alert("The paragraph is now hidden");
    });
  });
});
</script>
</head>
<body>
<button type="button">Hide</button>
<p>This is a paragraph with little content.</p>
</body>
</html>
 

margin

margin:10px 5px 15px 20px;
  • 上外边距是 10px
  • 右外边距是 5px
  • 下外边距是 15px
  • 左外边距是 20px 
padding:10px 5px 15px;
  • 上内边距是 10px
  • 右内边距和左内边距是 5px
  • 下内边距是 15px

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<style>
  body { font-size:16px; font-weight:bolder; }
  p { margin:5px 0; }
</style>
</head>
<body>
  <div>
    <span>Hello</span>
    <p class="selected">Hello Again</p>
    <div class="selected">And Again</div>

    <p>And One Last Time</p>
  </div>
<script>$("div").children(".selected").css("color", "blue");</script>
</body>
</html>    遍历

 

<!DOCTYPE html>
<html>
<head>
  <style>
  b, span, p, html body {
    padding: .5em;
    border: 1px solid;
  }
  b { color:blue; }
  strong { color:red; }
  </style>
  <script type="text/javascript" src="/jquery/jquery.js"></script>
</head>

<body>
  <div>
    <p>
      <span>
        <b>我的父元素是：</b>
      </span>
    </p>
  </div>

<script>
var parentEls = $("b").parents()
            .map(function () {
                  return this.tagName;
                })
            .get().join(", ");
$("b").append("<strong>" + parentEls + "</strong>");
</script>

</body>
</html>

 

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="/jquery/jquery.js"></script>
</head>

<body>
<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
  <li>list item 6</li>
</ul>

<script>
$('li').filter(':even').css('background-color', 'red');
</script>

</body>                   even偶数     odd奇数
</html>

 

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("li").each(function(){
      alert($(this).text())
    });
  });
});
</script>
</head>
<body>
<button>输出每个列表项的值</button>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Soda</li>
</ul>
</body>
</html>                    each

 

<!DOCTYPE html>
<html>
<head>
  <style>p { color:red; }</style>
  <script type="text/javascript" src="/jquery/jquery.js"></script>
</head>

<body>
  <p><b>Values: </b></p>
  <form>
    <input type="text" name="name" value="John"/>
    <input type="text" name="password" value="password"/>
    <input type="text" name="url" value=">
  </form>

<script>
    $("p").append( $("input").map(function(){
      return $(this).val();
    }).get().join(", ") );
</script>

</body>
</html>         map() 把每个元素通过函数传递到当前匹配集合中，生成包含返回值的新的 jQuery 对象。

 

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="/jquery/jquery.js"></script>
</head>

<body>
<ul>
   <li>list item 1</li>
   <li>list item 2</li>
   <li class="third-item">list item 3</li>
   <li>list item 4</li>
   <li>list item 5</li>
</ul>

<script>
$('li.third-item').next().css('background-color', 'red');
</script>

</body>
</html>

如果给定一个表示 DOM 元素集合的 jQuery 对象，.next() 方法允许我们搜索 DOM 树中的元素紧跟的同胞元素，并用匹配元素构造新的 jQuery 对象。

 

<!DOCTYPE html>
<html>
<head>
  <style>
  div { width: 80px; height: 80px; background: #abc;
        border: 2px solid black; margin: 10px; float: left; }
  div.after { border-color: red; }
  </style>
  <script type="text/javascript" src="/jquery/jquery.js"></script>
</head>

<body>

  <div>first</div>
  <div>sibling<div>child</div></div>
  <div>sibling</div>
  <div>sibling</div>

<script>
$("div:first").nextAll().addClass("after");
</script>

</body>
</html>

 

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="/jquery/jquery.js"></script>
</head>

<body>

<p>This is a paragragh.</p>
<p>This is a paragragh.</p>
<p>This is a paragragh.</p>
<p id="selected">This is a paragragh.</p>
<p>This is a paragragh.</p>
<p>This is a paragragh.</p>

<script>
$("p").not("#selected").css('background-color', 'red');
</script>

</body>
</html>

 

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="/jquery/jquery.js"></script>
</head>

<body>

<ul class="level-1">
  <li class="item-i">I</li>
  <li class="item-ii" style="position: relative;">II
    <ul class="level-2">
      <li class="item-a">A</li>
      <li class="item-b">B
        <ul class="level-3">
          <li class="item-1">1</li>
          <li class="item-2">2</li>
          <li class="item-3">3</li>
        </ul>
      </li>
      <li class="item-c">C</li>
    </ul>
  </li>
  <li class="item-iii">III</li>
</ul>

<script>
$('li.item-a').offsetParent().css('background-color', 'red');
</script>

</body>
</html>

如果给定一个表示 DOM 元素集合的 jQuery 对象，.offsetParent() 方法允许我们搜索 DOM 树中元素的祖先，并构造一个由最近的定位祖先元素包围的 jQuery 对象。定位元素指的是，元素的 CSS position 属性设置为 relative、absolute 或 fixed。在为表演动画计算偏移或在页面上放置对象时，该信息会很有用处。

 

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="/jquery/jquery.js"></script>
</head>

<body>
<ul>
   <li>list item 1</li>
   <li>list item 2</li>
   <li class="third-item">list item 3</li>
   <li>list item 4</li>
   <li>list item 5</li>
</ul>

<script>
$('li.third-item').siblings().css('background-color', 'red');
</script>

</body>
</html>            siblings

 


      


 

 

 

 

拎干的毛巾
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery选择器
m0_57774967的博客
06-16 4552
jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素（注意：jQuery选择器返回的是jQuery对象）jQuery选择器有很多，基本兼容了CSS1到CSS3所有的选择器，并且jQuery还添加了很多更加复杂的选择器jQuery选择器虽然很多，但是选择器之间可以互相替代，就是说获取一个元素，会有很多种方法获取到，所以平时真正能用到的只是少数的最常用的选择器...
jquery1.8.3
09-26
jquery1.8.3官方包，包含jquery-1.8.3.min.js和jquery-1.8.3.js两个文件。
jQuery
CJW的博客
07-28 9517
jQuery jQuery是一个JavaScript函数库，是一个轻量级的"写的少，做的多"的JavaScript库。 jQuery库包含以下功能： HTML 元素 选取 HTML 元素 操作 CSS 操作 HTML 事件函数 JavaScript 特效 动画 HTML DOM 遍历和修改 AJAX 除此之外，JQuery还提供了大量的插件。目前兼容于所有主流浏览器。 jQuery 语法 通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行"操作"（actions）。jQu
JQuery的引用
zwjl1017的博客
04-01 3954
最近在做的项目是用JQuery开发的，但是在JQuery这项技术上，资质尚浅，特意学习一下，做一些笔记，有不对之处希望大佬们多多指教！ JQuery的下载和引入 在JQuery官网上 （Download jQuery | jQuery）jQuery: The Write Less, Do More, JavaScript Libraryhttps://jquery.com/download/ 标记的是开发环境下的版本，按个人需要去使用版本，点开以后直接全选复制，在项目中创建一个js文件（例：JQue
jQuery基础
luckyboy!的博客
11-16 3314
jQuery由美国人John Resig于2006年创建。jQuery是目前最流行的JavaScript程序，它是对JavaScript对象和函数的封装。它的设计思想是write less,do more。
jQuery 遍历对象
m0_67458498的博客
03-28 4147
遍历对象 $.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 3623
<!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 4976
直接引如下的即可 <scripttype="text/javascript"src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
jQuery的下载及安装
weixin_64812436的博客
10-17 4902
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 5008
jQuery-3.4.1下载 链接：https://pan.baidu.com/s/1Z1mjG00jzSzXEmXNtvFT8g 提取码：0430
jQuery引入方式
m0_67388537的博客
07-07 2754
jQuery的两种引入方式
jquery 3.5.1
10-27
jquery-3.5.1包含 jquery-3.5.1.js、 jquery-3.5.1.min.js两个文件
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-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-...
jquery版本2.2.4
03-04
1、原生js使用太繁琐，使用jquery。 2、免费下载，希望大家爱上学习。 3、后面会出一个简单的使用方法。
led-Opt.Bak
最新发布
05-21
毕设&课设&项目&实训- 【项目资源】： 包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。 包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、python、web、C#、EDA、proteus、RTOS等项目的源码。 【项目质量】： 所有源码都经过严格测试，可以直接运行。 功能在确认正常工作后才上传。 【适用人群】： 适用于希望学习不同技术领域的小白或进阶学习者。 可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】： 项目具有较高的学习借鉴价值，也可直接拿来修改复刻。 对于有一定基础或热衷于研究的人来说，可以在这些基础代码上进行修改和扩展，实现其他功能。 【沟通交流】： 有任何使用上的问题，欢迎随时与博主沟通，博主会及时解答。 鼓励下载和使用，并欢迎大家互相学习，共同进步。
【图像加密解密】基于matlab菲涅尔域双随机相位编码图像加密解密【含Matlab源码 4548期】.mp4
05-21
Matlab研究室上传的视频均有对应的完整代码，皆可运行，亲测可用，适合小白； 1、代码压缩包内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描视频QQ名片； 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作
人工智能项目+OpenCV+实例分割+Cpp实现+模型部署+qt界面+完全可用版+C++
05-21
【内容概要】 本C++项目，集成OpenCV库与实例分割模型，实现了对图像中不同对象的精确分割。项目采用先进的实例分割算法，并以C++为核心开发语言，搭配Qt框架构建用户友好型图形界面。完成模型训练后，实现了模型的高效部署，用户可直接通过QT界面上传图片，以及选择模型地址，就可获取分割后的结果。 【适用人群】 适合C++开发者、CV工程师、机器学习研究者及对AI技术有浓厚兴趣的学生群体。 【使用场景】 广泛适用于工业检测、医学影像分析、农林业病虫害识别、智能监控系统及AR增强现实等领域。无论是学术研究中的数据预处理，还是企业级产品中的图像分析功能开发，该项目都能提供坚实的技术支撑。 【目标】 项目旨在通过实战演练，帮助开发者掌握从理论到实践的全过程：包括模型选择与优化、C++接口的OpenCV操作、Qt界面设计与交互逻辑实现，直至模型的高效部署与应用。最终目标是打造一个即拿即用的实例分割工具，促进AI技术在多领域的落地应用，同时提升开发者在复杂项目。
netty-resolver-4.1.22.Final.jar
05-21
javaEE javaweb常用jar包 ， 亲测可用，下载后导入到java工程中使用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值