HTML 常见疑惑点

1 span 内容不换行

可通过设置css，如下，即可实现强制不换行：

<span style="white-space:nowrap"></span>

2 使用JQuery在HTML 页面间传参

传递参数页面的JQuery代码：

var wordname = $("#id_wordname").text();
var url = "user-defined.html?wordname=" + wordname;
window.open(encodeURI(url + "?wordname=" + wordname));

接收参数页面：

var urlinfo = window.location.href;//获取url 
wordname = urlinfo.split("?")[1].split("=")[1];//拆分url得到”=”后面的参数 
		
$("#id_wordname").html(decodeURI(wordname));

注意，对数据进行编码与解码。

3 延迟执行函数

下面的函数是实现了，在页面加载完成两秒后进行跳转。

	window.onload = setTimeout(function() {
		window.open("index.html",'_self');
	}, 3000);

4 不打开新标签页，在当前标签页跳转至其他网址

window.open("index.html",'_self');

详情参考:window.open新打开窗口与新开标签页

5 $(this)获取<span>的内容

  <span onclick="onChoosed(this)">ipsum dolor</span>

	/**
	 * 选中词语，变化词语的样式，
	 */
	function onChoosed(obj){
		var word = $(obj).text();
		alert(word);
	}

6 textarea ，用$().val()设置了值后，再将鼠标点入，即让textarea获取焦点，textarea内容会自动清空

可以先设置textarea一个初始值，例如：

  <textarea id="u74_input">...</textarea>

再进行判断赋值：

var wordChoosed= $("#u74_input").val();
	if(wordChoosed == "...")
		wordChoosed = word;
	else
		wordChoosed = wordChoosed + ',' + word;
	$("#u74_input").val(wordChoosed);

这样，点击使textarea的内容获取焦点后，其内容就不会消失了。

获取textarea的值时，也请使用$("").val();

7 自定义属性

自定义属性的名称格式为 data-xxx = "";

例如：

<div style = "width:263px;height:245px;overflow:auto;" id="para_span" data-paraid = ""></div>

设置自定义属性的值：

$("#para_span").attr("data-paraid",msg.paraID);

取出自定义属性的值：

var paraID = $("#para_span").attr("data-paraid");

8 鼠标经过div时，变为小手

<div style="cursor:pointer"></div>

9 获取多选框的所有选中值

1 创建HTML元素

<div class="box">
    <span>请输入用户名，限定字母、数字或下划线的组合：</span>
    <div class="content">
        <span>水果：</span>
        <input type="checkbox" name="fruit" value="梨子"/>梨子
        <input type="checkbox" name="fruit" value="李子"/>李子
        <input type="checkbox" name="fruit" value="栗子"/>栗子
        <input type="checkbox" name="fruit" value="荔枝"/>荔枝
        <span>蔬菜：</span>
        <input type="checkbox" name="vegetable" value="青菜"/>青菜
        <input type="checkbox" name="vegetable" value="萝卜"/>萝卜
        <input type="checkbox" name="vegetable" value="土豆"/>土豆
        <input type="checkbox" name="vegetable" value="茄子"/>茄子
    </div>       
    <input type="button" value="提交">
</div>

2 JQuery 代码

$(function(){
    // 设置属性值
    $("input:button").click(function() {
        var fruit = "";
        var vegetable = "";
        $("input:checkbox[name='fruit']:checked").each(function() {
            fruit += $(this).val() + " ";
        });
        $("input:checkbox[name='vegetable']:checked").each(function() {
            vegetable += $(this).val() + " ";
        });
        alert("已选择水果："+fruit+"，已选择蔬菜："+vegetable);
             
    });
})

参考网址： jquery如何根据多选框name来获得选中的值