jQuert核心(二)

妙趣生花

已于 2022-05-17 22:57:46 修改

阅读量179

点赞数

文章标签： java 开发语言

于 2022-05-17 22:52:46 首次发布

本文链接：https://blog.csdn.net/nanyangnongye/article/details/124830674

版权

本文介绍了jQuery的选择器及DOM操作，通过示例展示了如何选取特定元素、改变样式、隐藏表单元素以及处理XML文档中的元素。示例包括选取div下的p元素、设置背景色、隐藏表单元素和查找XML中的div元素。

摘要由CSDN通过智能技术生成

CSDN话题挑战赛第1期
活动详情地址：https://marketing.csdn.net/p/bb5081d88a77db8d6ef45bb7b6ef3d7f
参赛话题：Java学习记录

一、函数认识

jQuery([selector,[context]])

selector:用来查找的字符串

context:作为待查找的 DOM 元素集、文档或 jQuery 对象。

概述

怎么理解这两个参数简单来说就是选择器选择不同的对象实现不同的功能或背景颜色或其他功能

准备HTML代码

<body>
    <div>
        <p>111</p>
        <span>222</span>
        <div>333</div>
    </div>
</body>

示例

<script>
       $(function () {
           //找到所有 p 元素，并且这些元素都必须是 div 元素的子元素。
           var div = $("div > p");
           console.log(div)
       })
</script>

输出结果

1、console信息显示在div标签下的p元素只有一个

2、下面的方法都是可以搭配css()方法的

1) 找到所有 p 元素，并且这些元素都必须是 div 元素的子元素。

举例一个css() add()

$("div > p").css("backgroundColor","red");

$("div > p").add("span").css("backgroundColor","green")

2) 设置页面背景色。

//设置页面背景色。
$(document.body).css( "background", "brown" );

3) 隐藏一个表单中所有元素。

$(myForm.elements).hide()//隐藏一个表单中所有元素。

【javascript】 
 $("#butt_test").click(function (){
     $(myForm.elements ).hide(); //myForm.elements是myForm下所有子元素的集合
   });


--------------------------------
【HTML】
    <form id="myForm">
        用户名<input type="text"><br>
        密码<input type="text"><br>
        <input type="button" id="butt_test" value="点击">
    </form>

4) 在文档的第一个表单中，查找所有的单选按钮(即: type 值为 radio 的 input 元素)。

【javaScript】

  $(function () {
           在文档的第一个表单中，查找所有的单选按钮(即: type 值为 radio 的 input 元素)。
           alert($("input:radio", document.forms[0]).val());
       })
-----------------------------------------------------------

【HTML】

 <form id="myForm">
        男<input type="radio" value="女"><br>
        女<input type="radio" value="男"><br>
        <input type="button" id="butt_test" value="点击">
</form>

5) 在一个由 AJAX 返回的 XML 文档中，查找所有的 div 元素。

字面意思就是需要AJAX 需要JavaEE框架创建Servlet才可以进行测试

2022年5月17日22:51:30 睡觉困困

//在一个由 AJAX 返回的 XML 文档中，查找所有的 div 元素。
$("div", xml.responseXML);

妙趣生花

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuert核心(二)

CSDN话题挑战赛第1期活动详情地址：https://marketing.csdn.net/p/bb5081d88a77db8d6ef45bb7b6ef3d7f参赛话题：Java学习记录一、函数认识jQuery([selector,[context]])selector:用来查找的字符串context:作为待查找的 DOM 元素集、文档或 jQuery 对象。概述怎么理解这两个参数简单来说就是选择器选择不同的对象实现不同的功能或背景颜色或其他功能准备HTM.
复制链接

扫一扫