HTML JQuery 技巧总结

元素之间的操作

$(".level1").children() 　　　获取到所有相邻的子元素
$(".level1").children("a") 　　获取到所有相邻并且满足条件的子元素

$("#li2").find("a")　　　　获取到匹配元素的子元素节点
Children 只能获取到相邻的子元素，不能获取到隔代子元素

$("#li1").next()　　获取到相邻的下一个同辈元素　　如果选择器命中多个目标则会返回所有命中目标的下一个同辈元素
$("#li2").prev() 　　获取到相邻的上一个同辈元素　　如果选择器命中多个目标则会返回所有命中目标的上一个同辈元素
$("#li2").siblings() 获取到匹配元素前后的所有同辈元素如果选择器命中多个目标则会返回所有命中目标的前后同辈元素

$("#li2").parent() 获取到匹配元素的父元素节点　　　　　　如果选择器命中多个目标则返回所有命中目标的父级节点
$("#2").parents() 获取到匹配元素的所有父元素节点　　　　#2是li中的a标签，会返回li ul .. Body html所有的父级节点
$("#2").parents("li") 获取到匹配元素的所有父元素节点　　如果有多个li嵌套，返回所有的li
$("#2").closest("li") 获取到匹配元素最近的父元素节点　　如果有多个li嵌套，返回最近的li

移除文本左右的空格

function trim(str) { //删除左右两端的空格
　　return str.replace(/(^\s*)|(\s*$)/g, "");
}

判断字符串中的字符中文算两个字符

    function chkstrlen(str) {var strlen = 0;for (var i = 0; i < str.length; i++) {if (str.charCodeAt(i) > 255) //如果是汉字，则字符串长度加2strlen += 2;elsestrlen++;}return strlen;}

移除掉多余的字符串

    function DeleteStr(str, lens) {var strlen = 0;var str1 = "";for (var i = 0; i < str.length; i++) {if (strlen <= lens) {if (str.charCodeAt(i) > 255) { //如果是汉字，则字符串长度加2strlen += 2;str1 += str[i];} else {strlen++;str1 += str[i];}}}return str1;}

多选按钮

点击按钮获取所有选中的按钮的值

$("input[name='nameType']:checkbox") 根据name获取到所有的多选按钮

$("input[name='nameType']:checkbox").each(function () {if ($(this).is(":checked")) {str += $(this).val() + ","}
})

判断多选按钮是否选中

$(obj).is(":checked") 如果没有选中返回false ，如果选中返回true

多选按钮全选

    $("#select").click(function() {  if ($(this).attr("checked")) {  $("input[name=items]").each(function() {  $(this).attr("checked", true);  });  } else {  $("input[name=items]").each(function() {  $(this).attr("checked", false);  });  }  });

上面这个我在使用的时候遇到过一个问题就是 IE 360都好使，谷歌和火狐第一次全选的时候没有问题，第二次的时候就不能用了

这个也是全选

　　　　 $('#checkAll').click(function () {//checkAll 是 全选按钮的Id$('input[name="namecheckbox"]').prop('checked', this.checked);});var $subBox = $("input[name='namecheckbox']");$subBox.click(function () {$("#checkAll").prop('checked', $subBox.length == $("input[name='namecheckbox']:checked").length ? true : false);});

下拉框

$("#FromProJect").find("option[value='" + appid + "']").attr("selected", true);　　

单选按钮

radio 点选按钮太小，使用label把他包起来这样点击文字也可以选中单选按钮

<label>
　　<input type="radio" name="nameType" />审核不通过
</label>

默认选中单选按钮

$("#radio1").attr("checked", true)

通过 name 和 value 找到 radio 并将其选中男
$("input[name=nameType][value='2']").attr("checked",true);

通过 name 来获取radio的value值
$("input[name='nameType']:checked").val();

鼠标获取到焦点是给一个弹出层提示

    $("li a").mouseover(function (e) {$("#popmenu").html(this.text)$("#popmenu").css({"top": (e.pageY + 10) + "px","left": (e.pageX + 20) + "px","display": "block"})}).mouseout(function () {$("#popmenu").hide();})

字符串相关

    //替换所有要替换的文字String.prototype.replaceAll = function (str1, str2) {var str = this;var result = str.replace(eval("/" + str1 + "/gi"), str2);return result;}

持续更新中

转载于:https://www.cnblogs.com/ansheng/p/5584605.html

HTML JQuery 技巧总结相关推荐

人人须知的 jQuery 技巧
本文讲的是人人须知的 jQuery 技巧, 这里收集了一些简单的窍门,助你玩转 jQuery. 检查 jQuery 是否加载返回顶部按钮预加载图片判断图片是否加载完成自动修复失效图片鼠标悬停 ...
了解jQuery技巧来提高你的代码
jQuery之所以如此流行并被从大公司到个人博客的几乎每个人都广泛使用,是因为它上手和使用相当简单,而且为我们提供了一些人都不知道的相当棒的特性.我认为jQuery的大多数用户更趋向于使用jQuery ...
jquery技巧总结-转载
jquery技巧总结一.简介 1.1.概述随着WEB2.0及ajax思想在互联网上的快速发展传播,陆续出现了一些优秀的Js框架,其中比较著名的有Prototype.YUI.jQuery.moot ...
风云流水 jQuery技巧总结（转）
jQuery技巧总结 (转) 一.简介 1.1.概述随着WEB2.0及ajax思想在互联网上的快速发展传播,陆续出现了一些优秀的Js框架,其中比较著名的有Prototype.YUI.jQuery.m ...
jquery技巧总结
一.简介 1.1.概述随着WEB2.0及ajax思想在互联网上的快速发展传播,陆续出现了一些优秀的Js框架,其中比较著名的有Prototype.YUI.jQuery.mootools.Bindows ...
一些实用的 jQuery 技巧
jQuery如今已经成为Web开发中最流行的JavaScript库,通过jQuery和大量的插件,你可以轻松实现各种绚丽的效果. 本文将为你介绍一些实用的技巧,希望可以帮助你更加高效地使用jQuery ...
15个相当不错的jQuery技巧
1.使用最新的jquery版本明河觉得这个建议有待商榷,虽然越新的jquery版本性能上更加优秀,但是有些方法的变迁还是会导致一些bug,比如从1.4.2到1.5时很多朋友就抱怨ajax上出现问题了 ...
16个超实用的jQuery技巧攻略
本文我们将为jQuery用户分享8个超实用的技巧攻略.jQuery是JavaScript最好的库之一,主要用于制作动画.事件处理,支持Ajax及HTML 脚本客户端.此外,jQuery还拥有各种插件, ...
(译)你应该知道的jQuery技巧
帮助提高你jQuery应用的简单小技巧. 回到顶部按钮图片预加载判断图片是否加载完自动修补破损图像 Hover切换class类禁用输入停止正在加载的链接 toggle fade/slide ...
JQuery技巧总结【转】
一.简介 1.1.概述随着WEB2.0及ajax思想在互联网上的快速发展传播,陆续出现了一些优秀的Js框架,其中比较著名的有Prototype.YUI.jQuery.mootools.Bindows以 ...

HTML JQuery 技巧总结

HTML JQuery 技巧总结相关推荐

最新文章

热门文章