`

JQ 设置和获取HTML和文本和值

 
阅读更多

demo.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
.test {
	font-weight: bold;
	color : red;
}
.add {
	font-style: italic;
}
</style>
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
$(function(){
	//获取<p>元素的HTML代码
	$("input:eq(0)").click(function(){
		alert(  $("p").html() );
	});
	//获取<p>元素的文本
	$("input:eq(1)").click(function(){
		alert(  $("p").text() );
	});
	//设置<p>元素的HTML代码
	$("input:eq(2)").click(function(){
		$("p").html("<strong>??你最喜欢的水果是?</strong>");
	});    
	//设置<p>元素的文本
	$("input:eq(3)").click(function(){
		$("p").text("你最喜欢的水果是?");
	});  
	//设置<p>元素的文本
	$("input:eq(4)").click(function(){
		$("p").text("<strong>你最喜欢的水果是?</strong>");
	});  
	//获取按钮的value值
	$("input:eq(5)").click(function(){
		alert( $(this).val() );
	});   
	//设置按钮的value值
	$("input:eq(6)").click(function(){
		$(this).val("我被点击了!");
	});  
});
//]]>
</script>
</head>
<body>
<input type="button" value="获取<p>元素的HTML代码"/>
<input type="button" value="获取<p>元素的文本"/>
<input type="button" value="设置<p>元素的HTML代码"/>
<input type="button" value="设置<p>元素的文本"/>
<input type="button" value="设置<p>元素的文本(带HTML)"/>
<input type="button" value="获取按钮的value值"/>
<input type="button" value="设置按钮的value值"/>
<p title="选择你最喜欢的水果." ><strong>你最喜欢的水果是?</strong></p>
<ul>
    <li title='苹果'>苹果</li>
    <li title='橘子'>橘子</li>
    <li title='菠萝'>菠萝</li>
</ul>
</body>
</html>

效果图：

 

demo2.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
$(function(){
	$("#address").focus(function(){ // 地址框获得鼠标焦点
		var txt_value =  $(this).val(); // 得到当前文本框的值
		if(txt_value=="请输入邮箱地址"){  
			$(this).val(""); // 如果符合条件，则清空文本框内容
		} 
	});
	$("#address").blur(function(){ // 地址框失去鼠标焦点
		var txt_value =  $(this).val(); // 得到当前文本框的值
		if(txt_value==""){
			$(this).val("请输入邮箱地址"); // 如果符合条件，则设置内容
		} 
	});
	$("#password").focus(function(){
		var txt_value =  $(this).val();
		if(txt_value=="请输入邮箱密码"){
			$(this).val("");
		} 
	});
	$("#password").blur(function(){
		var txt_value =  $(this).val();
		if(txt_value==""){
			$(this).val("请输入邮箱密码");
		} 
	});
});
//]]>
</script>
</head>
<body>
<input type="text" id="address" value="请输入邮箱地址"/>
<br/>
<br/>
<input type="text" id="password" value="请输入邮箱密码"/>
<br/>
<br/>
<input type="button" value="登陆"/>
</body>
</html>

 效果图：

 

demo3.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
$(function(){
	$("#address").focus(function(){ // 地址框获得鼠标焦点
		var txt_value =  $(this).val(); // 得到当前文本框的值
		if(txt_value==this.defaultValue){  
		$(this).val(""); // 如果符合条件，则清空文本框内容
		} 
	});
	$("#address").blur(function(){ // 地址框失去鼠标焦点
		var txt_value =  $(this).val(); // 得到当前文本框的值
		if(txt_value==""){
			$(this).val(this.defaultValue); // 如果符合条件，则设置内容
		} 
	});
	$("#password").focus(function(){
		var txt_value =  $(this).val();
		if(txt_value==this.defaultValue){
			$(this).val("");
		} 
	});
	$("#password").blur(function(){
		var txt_value =  $(this).val();
		if(txt_value==""){
			$(this).val(this.defaultValue);
		} 
	})
});
//]]>
</script>
</head>
<body>
<input type="text" id="address" value="请输入邮箱地址"/>
<br/>
<br/>
<input type="text" id="password" value="请输入邮箱密码"/>
<br/>
<br/>
<input type="button" value="登陆"/>
</body>
</html>

效果图：

 

demo4.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
.test {
	font-weight: bold;
	color : red;
}
.add {
	font-style: italic;
}
</style>
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
$(function(){
	//设置单选下拉框选中
	$("input:eq(0)").click(function(){
		$("#single").val("选择2号");
	});
	//设置多选下拉框选中
	$("input:eq(1)").click(function(){
		$("#multiple").val(["选择2号", "选择3号"]);
	});
	//设置单选框和多选框选中
	$("input:eq(2)").click(function(){
		$(":checkbox").val(["check2","check3"]);
		$(":radio").val(["radio2"]);
	});    
});
//]]>
</script>
</head>
<body>
<input type="button" value="设置单选下拉框选中"/>
<input type="button" value="设置多选下拉框选中"/>
<input type="button" value="设置单选框和多选框选中"/>
<br/>
<br/>
<select id="single">
    <option>选择1号</option>
    <option>选择2号</option>
    <option>选择3号</option>
</select>
<select id="multiple" multiple="multiple" style="height:120px;">
    <option selected="selected">选择1号</option>
    <option>选择2号</option>
    <option>选择3号</option>
    <option>选择4号</option>
    <option selected="selected">选择5号</option>
</select>
<br/>
<br/>
<input type="checkbox" value="check1"/>
多选1
<input type="checkbox" value="check2"/>
多选2
<input type="checkbox" value="check3"/>
多选3
<input type="checkbox" value="check4"/>
多选4 <br/>
<input type="radio" value="radio1"/>
单选1
<input type="radio" value="radio2"/>
单选2
<input type="radio" value="radio3"/>
单选3
</body>
</html>

效果图：

 

demo5.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
.test {
	font-weight: bold;
	color : red;
}
.add {
	font-style: italic;
}
</style>
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
$(function(){
	//设置单选下拉框选中
	$("input:eq(0)").click(function(){
		$("#single option").removeAttr("selected");  //移除属性selected
		$("#single option:eq(1)").attr("selected",true); //设置属性selected
	});
	//设置多选下拉框选中
	$("input:eq(1)").click(function(){
		$("#multiple option").removeAttr("selected");  //移除属性selected
		$("#multiple option:eq(2)").attr("selected",true);//设置属性selected
		$("#multiple option:eq(3)").attr("selected",true);//设置属性selected
	});
	//设置单选框和多选框选中
	$("input:eq(2)").click(function(){
		$(":checkbox").removeAttr("checked"); //移除属性checked
		$(":radio").removeAttr("checked"); //移除属性checked
		$("[value=check2]:checkbox").attr("checked",true);//设置属性checked
		$("[value=check3]:checkbox").attr("checked",true);//设置属性checked
		$("[value=radio2]:radio").attr("checked",true);//设置属性checked
	});   
});
//]]>
</script>
</head>
<body>
<input type="button" value="设置单选下拉框选中"/>
<input type="button" value="设置多选下拉框选中"/>
<input type="button" value="设置单选框和多选框选中"/>
<br/>
<br/>
<select id="single">
    <option>选择1号</option>
    <option>选择2号</option>
    <option>选择3号</option>
</select>
<select id="multiple" multiple="multiple" style="height:120px;">
    <option selected="selected">选择1号</option>
    <option>选择2号</option>
    <option>选择3号</option>
    <option>选择4号</option>
    <option selected="selected">选择5号</option>
</select>
<br/>
<br/>
<input type="checkbox" value="check1"/>
多选1
<input type="checkbox" value="check2"/>
多选2
<input type="checkbox" value="check3"/>
多选3
<input type="checkbox" value="check4"/>
多选4 <br/>
<input type="radio" value="radio1" name="a"/>
单选1
<input type="radio" value="radio2" name="a"/>
单选2
<input type="radio" value="radio3" name="a"/>
单选3
</body>
</html>

效果图：

 

 

 

 

  • 大小: 44.1 KB
  • 大小: 33.7 KB
  • 大小: 33.6 KB
  • 大小: 42.1 KB
  • 大小: 42.2 KB
分享到：
| mysql 时间截取年月日和按冒号截取前面的字 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JQ 获取和设置内容 text() html() val()

    在JavaScript的世界里，jQuery（简称JQ...它们分别处理纯文本、HTML内容以及表单元素的值，极大地简化了网页内容的获取和设置。在日常开发中，熟练运用这些方法能够提升工作效率，构建出更加动态和用户友好的Web应用。

    JQ 获取内容和属性

    在阅读博文《JQ 获取内容和属性》（链接：https://onestopweb.iteye.com/blog/2337789）时，可以配合实践，通过创建简单的HTML页面和使用jQuery代码，加深对这些知识点的理解。 以上就是关于jQuery获取内容和属性的...

    api jdk jq js html

    标题中的"api jdk jq js html"涉及到的是四个主要的编程和前端开发相关的知识点：API（应用程序接口）、JDK（Java Development Kit）、jQuery（简称jq）以及JavaScript（简称js）和HTML（超文本标记语言）。...

    JQ JS javascript layui UI框架 富文本 编辑器

    在富文本编辑器中，JQuery通常用于DOM操作，如获取或设置元素内容，监听用户交互，以及触发动画效果。 JavaScript，简称JS，是Web开发的核心语言，用于增加网页的动态功能。在富文本编辑器中，JavaScript负责实现...

    jq二维码，使用jq_code直接前端生成二维码

    它允许开发者在不依赖后端服务的情况下，通过简单的API调用，将任意文本（如链接、文本信息等）转化为二维码图像，提高了用户体验和开发效率。在标题提到的场景中，后端只需提供一个链接，前端就能利用`jq_code`生成...

    jq获取焦点插入内容

    `val()`方法用于获取或设置元素的值，如果与事件结合使用，可以在特定条件下改变元素的内容。 例如，如果我们希望当`myInput`获得焦点时自动填充一段默认文本，我们可以这样做： ```javascript $("#myInput").on(...

    HTML前端wangEditor富文本编辑器demo（jQuery）

    HTML前端开发中，富文本编辑器是不可或缺的一部分，它们允许用户在网页上创建、编辑和格式化内容，就像在常见的文字处理软件中一样。wangEditor就是这样一个强大的富文本编辑器，它专为JavaScript和jQuery设计，同时...

    Jquery获取Select标签的值

    在前端开发中，使用 jQuery 框架能够极大地简化 DOM 操作，使得获取或设置 HTML 元素的属性变得更加容易。本篇文章将详细介绍如何利用 jQuery 来获取 Select 标签的值以及相关的表单元素操作。 #### 一、获取 ...

    jQuery富文本编辑器Notebook

    "jQuery富文本编辑器Notebook"是一个专为创建...用户可以通过阅读`README.md`文件获取如何设置和使用编辑器的详细步骤。为了实际体验和使用Notebook编辑器，你需要将这个压缩包解压并按照`README.md`中的指示进行操作。

    JQ 创建节点

    - `$.fn.attr()`：用于设置或获取元素的属性值。例如，`$('img').attr('src', 'new-image.jpg')`。 6. **事件绑定** - `$.fn.on()`: 创建的节点同样可以绑定事件监听器。例如，`$('.new-item').on('click', ...

    jQuery取得设置清空select选择的文本与值

    `$("#select_id option").remove()`删除文本值为4的选项。 最后，清空整个`&lt;select&gt;`： ```javascript $("#ddlregtype").empty(); ``` 这将移除`&lt;select&gt;`内的所有`&lt;option&gt;`。 在实际应用中，可能需要处理用户...

    jQuery获取table下某一行某一列的值实现代码

    6. 显示弹窗结果：使用alert()函数显示获取到的文本值，以便验证代码执行的结果。 7. 获取元素标签名：使用$.prop("tagName")方法可以获取到DOM对象的标签类型，例如在文中获取了表格和单元格的标签名。 8. 显示...

    JQuery获取input控件值.docx

    下面将详细解释如何使用jQuery来获取和设置text、textarea、radio、checkbox以及select等不同类型的input控件的值。 1. **获取text和textarea值**： - 对于`&lt;input type="text"&gt;`和`&lt;textarea&gt;`，可以使用`.attr()...

    JQ 子元素过滤选择器

    在阅读给定的博文链接（https://onestopweb.iteye.com/blog/2290078）时，可以获取更多关于jQuery选择器的实践案例和详细解释，进一步巩固和扩展这方面的知识。 此外，对于标签“源码”和“工具”，可能涉及到的是...

    jQuery长文本分页特效.zip

    2. **分页处理**：使用jQuery选择器获取长文本，然后根据设定的每页长度进行分割，将每部分放入单独的`&lt;div&gt;`或`&lt;p&gt;`元素中。这些元素可以通过CSS隐藏或显示，以实现分页效果。 3. **动态图片切换**：为图片定义一...

    jq 隐藏table中的tr或td

    在JavaScript的世界里，jQuery（简称jq）是一个非常流行的库，它极大地简化了DOM操作、事件处理和动画制作等任务。本篇文章将详细讲解如何在不预先知道table ID的情况下，使用jQuery来隐藏table中的tr或td元素，以及...

    jq前端实现生成二维码

    `jq`通常指的是jQuery，一个广泛使用的JavaScript库，而本示例是利用jQuery与`QRcode.js`插件来实现二维码的生成。`QRcode.js`是一个轻量级的JavaScript库，能够帮助开发者在网页上创建出包含各种数据的二维码，包括...

    html5 + jq 写的播放器

    HTML5是超文本标记语言的最新版本，带来了许多增强功能，如音频和视频内嵌、离线存储、画布绘图、地理定位等，使得网页交互性更强。jQuery则是一个轻量级的JavaScript库，简化了JavaScript的DOM操作、事件处理、动画...

    jquery文本转语音播放

    3. **自定义设置**：除了基础的文本转换，我们还可以调整合成语音的参数，如语速（`rate`）、音量（`volume`）和语调（`pitch`）。例如，`utterance.rate = 1.2`会使得语音播放速度加快20%。 4. **多语言支持**：`...

Magicbox
Global site tag (gtag.js) - Google Analytics