欢迎访问 生活随笔!

生活随笔

当前位置: 首页 > 前端技术 > HTML >内容正文

HTML

jQuery设置和获取HTML、文本和值

发布时间:2025/6/15 HTML 63 豆豆
生活随笔 收集整理的这篇文章主要介绍了 jQuery设置和获取HTML、文本和值 小编觉得挺不错的,现在分享给大家,帮大家做个参考.
<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> <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> <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> <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> <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$(":checkbox[value=check2]").attr("checked",true);//设置属性checked$("[value=check3]:checkbox").attr("checked",true);//设置属性checked$("[value=radio2]:radio").attr("checked",true);//设置属性checked }); });//]]></script>

:checkbox 表示属性为checkbox

总结

以上是生活随笔为你收集整理的jQuery设置和获取HTML、文本和值的全部内容,希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错,欢迎将生活随笔推荐给好友。