jQuery

最新推荐文章于 2024-06-15 20:48:16 发布
最新推荐文章于 2024-06-15 20:48:16 发布
阅读量149 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/pjwbk/p/6013845.html
版权

 

jQuery

 

jQuery 元素选择器

jQuery 使用 CSS 选择器来选取 HTML 元素。

$("p") 选取 <p> 元素。

$("p.intro") 选取所有 class="intro" 的 <p> 元素。

$("p#demo") 选取 id="demo" 的第一个 <p> 元素。

jQuery 属性选择器

jQuery 使用 XPath 表达式来选择带有给定属性的元素。

$("[href]") 选取所有带有 href 属性的元素。

$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。

$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。

$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

jQuery CSS 选择器

jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。

下面的例子把所有 p 元素的背景颜色更改为红色：

<script type="text/javascript" src="../jquery/jquery.js" tppabs="http://www.w3school.com.cn/jquery/jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $("button").click(function(){              》》》》》》》元素选择器

    $("p").css("background-color","yellow");

  });

});

</script>

</head>

<body>

<h2>This is a heading</h2>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

<button type="button">Click me</button>

jQuery AJAX 实例

<script type="text/javascript" src="../jquery/jquery.js" tppabs="http://www.w3school.com.cn/jquery/jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $("#b01").click(function(){   》》》》》》》》》属性选择器

  $('#myDiv').load('../jquery/test1.txt.htm'/*tpa=http://www.w3school.com.cn/jquery/test1.txt*/);

  });

});

</script>

</head>

<body>

 

<div id="myDiv"><h2>Let AJAX change this text</h2></div>

<button id="b01" type="button">Change Content</button>

jQuery - 获得内容和属性

jQuery DOM 操作

获得内容 - text()、html() 以及 val()

三个简单实用的用于 DOM 操作的 jQuery 方法：

  • text() - 设置或返回所选元素的文本内容
  • html() - 设置或返回所选元素的内容（包括 HTML 标记）
  • val() - 设置或返回表单字段的值

 

 

<script src="/jquery/jquery-1.11.1.min.js"></script>

<script>

$(document).ready(function(){

  $("#btn1").click(function(){

    alert("Text: " + $("#test").text());     >>>>>>>text()方法

  });

  $("#btn2").click(function(){

    alert("HTML: " + $("#test").html());    》》》》》》》》html（）方法

  });

});

</script>

</head>

 

<body>

<p id="test">这是段落中的<b>粗体</b>文本。</p>

<button id="btn1">显示文本</button>

<button id="btn2">显示 HTML</button>

</body>

 

 

 

 

 

<script src="/jquery/jquery-1.11.1.min.js"></script>

<script>

$(document).ready(function(){

  $("button").click(function(){

    alert("Value: " + $("#test").val());      >>>>>>>>>val（）方法

  });

});

</script>

</head>

 

<body>

<p>姓名：<input type="text" id="test" value="米老鼠"></p>

<button>显示值</button>

 

获取属性 - attr()

jQuery attr() 方法用于获取属性值。

下面的例子演示如何获得链接中 href 属性的值：

 

 

 

<script src="/jquery/jquery-1.11.1.min.js"></script>

<script>

$(document).ready(function(){

  $("button").click(function(){

    alert($("#w3s").attr("href"));     》》》》》》》attr（）方法

  });

});

</script>

</head>

 

<body>

<p><a href="http://www.w3school.com.cn" id="w3s">W3School.com.cn</a></p>

<button>显示 href 值</button>

jQuery - 设置内容和属性

设置内容 - text()、html() 以及 val()

<script src="/jquery/jquery-1.11.1.min.js"></script>

<script>

$(document).ready(function(){

  $("#btn1").click(function(){

    $("#test1").text("Hello world!");     》》》》》》设置text（）方法

  });

  $("#btn2").click(function(){

    $("#test2").html("<b>Hello world!</b>");    》》》》》设置html（）方法

  });

  $("#btn3").click(function(){

    $("#test3").val("Dolly Duck");    》》》》》设置val（）方法

  });

});

</script>

</head>

<body>

<p id="test1">这是段落。</p>

<p id="test2">这是另一个段落。</p>

<p>Input field: <input type="text" id="test3" value="Mickey Mouse"></p>

<button id="btn1">设置文本</button>

<button id="btn2">设置 HTML</button>

<button id="btn3">设置值</button>

 

 

 

 

 

text()、html() 以及 val() 的回调函数

上面的三个 jQuery 方法：text()、html() 以及 val()，同样拥有回调函数。回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

下面的例子演示带有回调函数的 text() 和 html()：

<script src="/jquery/jquery-1.11.1.min.js"></script>

<script>

$(document).ready(function(){

  $("#btn1").click(function(){

    $("#test1").text(function(i,origText){

      return "Old text: " + origText + " New text: Hello world! (index: " + i + ")";

    });     》》》》》回调函数

  });

  $("#btn2").click(function(){

    $("#test2").html(function(i,origText){

      return "Old html: " + origText + " New html: Hello <b>world!</b> (index: " + i + ")";

    });    》》》》》》回调函数

  });

});

</script>

</head>

<body>

<p id="test1">这是<b>粗体</b>文本。</p>

<p id="test2">这是另一段<b>粗体</b>文本。</p>

<button id="btn1">显示旧/新文本</button>

<button id="btn2">显示旧/新 HTML</button>

</body>

设置属性 - attr()

jQuery attr() 方法也用于设置/改变属性值。

下面的例子演示如何改变（设置）链接中 href 属性的值：

<script src="/jquery/jquery-1.11.1.min.js"></script>

<script>

$(document).ready(function(){

  $("button").click(function(){

    $("#w3s").attr("href","http://www.w3school.com.cn/jquery");

  });

});

</script>

</head>

<body>

<p><a href="http://www.w3school.com.cn" id="w3s">W3School.com.cn</a></p>

<button>改变 href 值</button>

attr() 方法也允许您同时设置多个属性。

下面的例子演示如何同时设置 href 和 title 属性：

$(document).ready(function(){

       $("button").click(function(){

       $("#a1").attr({

           "href":"http://www.w3school.com.cn",

           "title":"W3School jQuery 教程"

       });

       });

});

<p>

      <a href="https://www.baidu.com/?tn=90547864_hao_pg" id="q1">百度</a>

   </p>

   <button id="b1">改变</button>

 

attr() 的回调函数

jQuery 方法 attr()，也提供回调函数。回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

下面的例子演示带有回调函数的 attr() 方法：

$(document).ready(function(){

  $("button").click(function(){

    $("#w3s").attr("href", function(i,origValue){

      return origValue + "/jquery";

    });

  });

});

<p><a href="http://www.w3school.com.cn" id="w3s">w3school.com.cn</a></p>

<button>改变 href 值</button>

jQuery - 添加元素

添加新的 HTML 内容

我们将学习用于添加新内容的四个 jQuery 方法：

  • append() - 在被选元素的结尾插入内容
  • prepend() - 在被选元素的开头插入内容
  • after() - 在被选元素之后插入内容
  • before() - 在被选元素之前插入内容

 

 

 

jQuery append() 方法

jQuery append() 方法在被选元素的结尾插入内容。

$(document).ready(function(){

   $("#b2").click(function(){

      $("p").append("<b>Appended text</b>.");》》append（）方法

   });

   $("#b3").click(function(){

      $("ol").append("<li>Appended text</li>.");

   });

});

<p>asdfsdfads</p>

   <p>asdfsa</p>

   <ol>

   <li>aaaaaaa</li>

   <li>bbbbbbb</li>

   <li>ccccccc</li>

   </ol>

   <button id="b2">追加文本</button>

   <button id="b3">追加列表</button>

通过 append() 和 prepend() 方法添加若干新元素

在上面的例子中，我们只在被选元素的开头/结尾插入文本/HTML。

不过，append() 和 prepend() 方法能够通过参数接收无限数量的新元素。可以通过 jQuery 来生成文本/HTML（就像上面的例子那样），或者通过 JavaScript 代码和 DOM 元素。

function appendText()

{

var txt1="<p>Text.</p>";              // 以 HTML 创建新元素

var txt2=$("<p></p>").text("Text.");  // 以 jQuery 创建新元素

var txt3=document.createElement("p");

txt3.innerHTML="Text.";               // 通过 DOM 来创建文本

$("body").append(txt1,txt2,txt3);        // 追加新元素

}

<body>

 

<p>This is a paragraph.</p>

<button οnclick="appendText()">追加文本</button>

 

</body>

 

 

 

 

 

Query after() 和 before() 方法

jQuery after() 方法在被选元素之后插入内容。

jQuery before() 方法在被选元素之前插入内容。

$(document).ready(function(){

  $("#btn1").click(function(){

    $("img").before("<b>Before</b>");   >>>>>>>>方法

  });

  $("#btn2").click(function(){

    $("img").after("<i>After</i>");

  });

});

</script>

</head>

<body>

<img src="/i/eg_w3school.gif" alt="W3School Logo" />

<br><br>

<button id="btn1">在图片前面添加文本</button>

<button id="btn2">在图片后面添加文本</button>

通过 after() 和 before() 方法添加若干新元素

after() 和 before() 方法能够通过参数接收无限数量的新元素。可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建新元素。

function afterText()

{

var txt1="<b>I </b>";                    // 以 HTML 创建元素

var txt2=$("<i></i>").text("love ");     // 通过 jQuery 创建元素

var txt3=document.createElement("big");  // 通过 DOM 创建元素

txt3.innerHTML="jQuery!";

$("img").after(txt1,txt2,txt3);          // 在 img 之后插入新元素

}

<img src="/i/eg_w3school.gif" alt="W3School Logo" />

<br><br>

<button οnclick="afterText()">在图片后面添加文本</button>

 

jQuery - 删除元素

删除元素/内容

如需删除元素和内容，一般可使用以下两个 jQuery 方法：

  • remove() - 删除被选元素（及其子元素）
  • empty() - 从被选元素中删除子元素

jQuery remove() 方法

jQuery remove() 方法删除被选元素及其子元素。

$(document).ready(function(){

  $("button").click(function(){

    $("#div1").remove();   》》》》可以改为empty（）方法

  });

});

</script>

</head>

<body>

<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">

This is some text in the div.

<p>This is a paragraph in the div.</p>

<p>This is another paragraph in the div.</p>

</div>

<br>

<button>删除 div 元素</button>

过滤被删除的元素

jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。

该参数可以是任何 jQuery 选择器的语法。

下面的例子删除 class="italic" 的所有 <p> 元素：

(document).ready(function(){

  $("button").click(function(){

    $("p").remove(".italic");   》》》》接受一个参数

  });

});

</script>

</head>

 

<body>

 

<p>This is a paragraph in the div.</p>

<p class="italic"><i>This is another paragraph in the div.</i></p>   》》》》设置class来定义参数

<p class="italic"><i>This is another paragraph in the div.</i></p>

<button>删除 class="italic" 的所有 p 元素</button>

 

元素选择器

jQuery 元素选择器基于元素名选取元素。

在页面中选取所有 <p> 元素:

$("p")

$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();  ******
  });
});

 

#id 选择器

jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。

页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。

通过 id 选取元素语法如下：

$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();    *******
  });
});

.class 选择器

jQuery 类选择器可以通过指定的 class 查找元素。

语法如下：

$(document).ready(function(){
  $("button").click(function(){
    $(".test").hide();
  });
});



 

 

 

 

getParameter得到的都是String类型的。或者是用于读取提交的表单中的值，或者是某个表单提交过去的数据；

 

转载于:https://www.cnblogs.com/pjwbk/p/6013845.html

dhy328036183
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Java Web Jquery表单验证
07-26
编写基于Jquery的表单验证插件 Java Web Jquery表单验证 jQuery是一个流行的JavaScript库，可用于在网页上进行各种操作，包括表单验证。 1、将基于Jquery的表单验证的调查问卷分为四个部分：FrontPage.html、write....
JQuery安装与下载教程
热门推荐
Muchen灬
05-25 12万+
jQuery安装与下载 JQuery 是一个javaScript库，是一个轻量级的"写的少，做的多"的JavaScript库。 jQuery 极大地简化javaScript编程 --juery相比js优点： jquery的onload加载事件速度更快，并且多个加载并行 【jq绑定事件都是使用的事件函数，不需要加on】； js的onloa...
jQuery下载和安装详细教程
柯晓楠
01-15 3万+
下载jQuery 我们可以到jQuery的官网下载jQuery文件（PS：其实jQuery就是一个封装了很多函数的js文件，把这个js文件导入到网页中就可以了）。 jQuery官网地址： https://jquery.com/ 打开官网，即可看到jQuery的下载按钮，点击进入下载页面。有两个版本的jQuery可以下载： Production version - 用于实际的网站中，是已经被精简和...
jQuery学习教程，写更少的代码,做更多的事情（二）
最新发布
2401_85124119的博客
06-15 1042
为了帮助大家更好温习重点知识、更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。前端面试题汇总JavaScript性能linux。
jQuery详解
亦翼的博客
07-10 8556
文章目录Bootstrap简介概念为什么使用Bootstrap下载与使用Bootstrap的使用表格丰富的标签好看的类样式情景色类样式响应式表格表单表单布局默认布局内联布局表单控件输入框文本框复选框复选按钮单选框单选按钮按钮图片下拉菜单组件分页组件栅格系统缩略图组件模态框组件两个案例首页轮播大图响应式导航条 Bootstrap简介 概念 Bootstrap 来自 Twitter，是目前最受欢迎的响应式前端框架。 Bootstrap 基于 HTML、CSS、JavaScript，简洁灵活，使得 Web 开发
一个小时学会jQuery<最通俗易懂的讲解>
chetianyao8457的博客
08-07 1557
最近一直在研读 jQuery 源码，初看源码一头雾水毫无头绪，真正静下心来细看写的真是精妙，让你感叹代码之美。 其结构明晰，高内聚、低耦合，兼具优秀的性能与便利的扩展性，在浏览器的兼容性（功能缺陷、渐进增强）优雅的处理能力以及 Ajax 等方面周到而强大的定制功能无不令人惊叹。 另外，阅读...
jQuery简介、引入jQuery、jQuery核心函数、jQuery对象、jQuery对象操作class、addclass补充、jQuery对象复制——jQuery
weixin_70320000的博客
11-29 3308
jQuery简介、引入jQuery、jQuery核心函数、jQuery对象、jQuery对象操作class、addclass补充、jQuery对象复制
jQuery - 3.6.0
05-04
jQuery 是一个快速、小巧且功能丰富的 JavaScript 库。它使HTML文档遍历和操作，事件处理，动画和Ajax等功能变得更加简单，它具有易于使用的API，可跨多种浏览器运行。凭借多功能性和可扩展性的结合，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-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-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看这一篇就够啦，jQuery基础大全，可用于快速回顾知识，面试首选
a2868221132的博客
03-27 5345
jQuery看这一篇就够啦，jQuery基础大全，可用于快速回顾知识，面试首选
前端基础之jQuery
qq_53350943的博客
04-07 3527
jQuery是一个封装JS的框架。 使用jQuery可以更方便的编写JS脚本实现的功能。 jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。 HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScript 特效和动画 HTML DOM 遍历和修改 AJAX（重要
JQuery详解
weixin_45845391的博客
12-22 4073
JQuery能做什么 访问和操作DOM元素 控制页面样式 对页面时间进行处理 扩展新的JQuery插件 与Ajax技术完美结合 JQuery能做到的JavaScript也都能做到，但使用JQuery能大幅度提高开发效率其实，JQuery和JavaScript之间的关系，可以理解为“成语” 和“白话文”之间的关系。成语是对白话文的高度压缩，而JQuery也是对JavaScript的高度压缩库进入JQuery官网：http://jQuery.comjQuery作为一个单独存在的js文件，并不会与其他的js文
一、Jquery入门（超详）
weixin_44009656的博客
05-02 4676
本文将带领大家了解 jQuery 的定义，它有什么作用，我们为什么要学它，以及如何使用它，它的语法是什么，最后对比了 jQuery 对象和 DOM 对象的区别。
jQuery基本介绍
m0_55836496的博客
09-15 2323
jQuery是一个快速的、轻量的、功能丰富的js库。 jQuery的官网 [http://jquery.com/](http://jquery.com/) jQuery就是一个js库，使用jQuery的话，会比使用JavaScript更简单。 js库：把一些常用到的方法写到一个单独的js文件，使用的时候直接去引用这js文件就可以了。（animate.js、common.js+）。 jquey和js的关系 1 就jq底层是计算，就是把js进行了封装。 2 jq能够很方便获取节点，发送ajax。
jQuery简介-01
qq_55624813的博客
11-19 7771
目录 异步请求局部刷新 架构 技术栈 执行过程 jQuery简介 什么是jQuery jQuery的语法 jQuery的优势 jQuery的使用 文档就绪事件 测试 总结 异步请求局部刷新 架构 主流方式： 技术栈 JavaScript 形成交互 jQuery 封装JavaScript，代码更加简洁高效 ajax 异步请求 json 数据传输 Web中间件(tomcat) 处理请求和响应 mysql数据库 存取数据 执行过程 用户页面中触发a
jQuery使用（超详细）
Eliauk_Doubling的博客
08-12 2万+
会把这个dom对象转换成jQuery对象,即 [object HTMLSpanElement] ======> [object Object]* 4.传入参数为[DOM对象]时，将DOM对象包装为jQuery对象返回。* 2.传入参数为[HTML字符串]时，根据这个字符串创建元素节点对象。* 3.传入参数为[选择器字符串]时，根据这个字符串查找元素节点对象。*1. 传入参数为[函数]是，在文档加载完成以后执行这个函数。jQuery对象的本质时dom对象的数组+jQuery提供的一系列的功能函数。
JQuery简介 - 什么是jQuery
柯晓楠
01-15 4万+
概念 官方概念： jQuery是一个快速，小型且功能丰富的JavaScript库。借助易于使用的API（可在多种浏览器中使用），使HTML文档的遍历和操作，事件处理，动画和Ajax等事情变得更加简单。 个人理解： jQuery是JavaScript的一个工具库，工具库就是指封装好的JavaScript函数，可以直接在程序中进行调用，那jQuery就是一款非常流行的JavaScript库。jQ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值