《锋利的jquery》源码整理——jquery技巧下

  接上:http://www.cnblogs.com/akou/p/4461557.html

代码:

  13.获取选中的下拉框

<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="../../scripts/jquery.js" type="text/javascript"></script>

</head>
<body>
<input type="button" id="send1" value="get" onclick="getObj()"/>
<select id="someElement">
	<option>一班</option>
	<option>二班</option>
	<option>三班</option>
</select>

<script>
function getObj(){
	var $obj = $(‘#someElement‘).find(‘option:selected‘);
	alert( $obj.val() );
}
</script>
</body>
</html>

  14.获取选中的下拉框

<!DOCTYPE>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="../../scripts/jquery.js" type="text/javascript"></script>

</head>
<body>
<button  >toggle</button>
<input type="checkbox" value="1" />篮球
<input type="checkbox" value="2" />足球
<input type="checkbox" value="3" />羽毛球

<script>
var tog = false;
$(‘button‘).click(function(){
    $("input[type=checkbox]").attr("checked",!tog);
    tog = !tog;
});
</script>
</body>
</html>

  15.使用siblings()来选择同辈元素

<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="../../scripts/jquery.js" type="text/javascript"></script>
<style>
li.active{
	font-size:20px;
	color:red;
}
</style>
</head>
<body>
<ul id="nav">
	<li>Google</li>
	<li>百 度</li>
	<li>新浪</li>
</ul>
<script>
/* 不这样做
$(‘#nav li‘).click(function(){
    $(‘#nav li‘).removeClass(‘active‘);
    $(this).addClass(‘active‘);
});
*/
//替代做法是
$(‘#nav li‘).click(function(){
    $(this).addClass(‘active‘)
           .siblings().removeClass(‘active‘);
});

</script>
</body>
</html>

  16.从元素中除去HTML

<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="../../scripts/jquery.js" type="text/javascript"></script>
</head>
<body>
<div>
<p>锋利的<a href="#nogo">jQuery</a></p>
</div>
<script>
(function($) {
$.fn.stripHtml = function() {
  var regexp = /<("[^"]*"|‘[^‘]*‘|[^‘">])*>/gi;
  this.each(function() {
    $(this).html( $(this).html().replace(regexp,‘‘) );
  });
  return $(this);
}
})(jQuery);
//用法:
$(‘div‘).stripHtml();
</script>
</body>
</html>

  这些只是一部分,全部的代码(上)面有链接。

时间: 2024-10-14 07:02:47

《锋利的jquery》源码整理——jquery技巧下的相关文章

jQuery源码分析-jQuery中的循环技巧

Js代码   作者:nuysoft/JS攻城师/高云 QQ:47214707 EMail:[email protected] 声明:本文为原创文章,如需转载,请注明来源并保留原文链接. 前记:本文收集了jQuery中出现的各种遍历技巧和场景 Js代码   // 简单的for-in(事件) for ( type in events ) { } Js代码   // 缓存length属性,避免每次都去查找length属性,稍微提升遍历速度 // 但是如果遍历HTMLCollection时,性能提升非常

《锋利的jquery》源码整理——jquery技巧上

        在看<锋利的jquery>这本书的时候,书末尾总结了jquery的一些用法技巧,感觉很实用,先收藏着以后用到,可以借鉴看看.   一,资源(在w3cfuns资源中可以找到第一版和第二版)          <锋利的jquery>: http://pan.baidu.com/share/link?shareid=1725756399&uk=4245516461(PDF)                                        http:/

JQuery源码解析-JQuery的工具方法(2)

这篇对下面的方法进行讲解: isFunction():是否为函数 isArray():是否为数组 isWindow():是否为window isNumeric()是否为数字 type():判断数据类型 isPlainObject():是否为对象自变量 isEmptyObject():是否为空的对象 isFunction方法: 这个方法很简单,判断对象是否为函数,返回bool类型,看一下源码: // See test/unit/core.js for details concerning isFu

JQuery源码解析-JQuery的工具方法(5)

下面对最后这几个方法进行讲解. guid():唯一表示(内部) proxy():改变this指向 access(): 多功能值操作 now():当前时间 swap():css交换(内部) guid: 这个属性是对事件进行控制的,例如每次对dom元素进行绑定事件的时候,会通过这个属性进行绑定,这个属性每次自增,产生一个唯一的标示,所以对dom元素进行事件解绑等操作的时候,通过这个属性就可以找到. 源码: // A global GUID counter for objects guid: 1, p

JQuery源码解析-JQuery的工具方法(4)

下面对这些方法进行讲解 each():遍历集合 trim():去前后空格 makeArray():类数组转换真数组 inArray():数组版indexOf merge():合并数组 grep():过滤新数组 map():映射新数组 each方法: each是遍历集合用的方法,也是一个加强版的循环操作.例如: var arr = { Name: 'jam', Age: 15 }; $.each(arr, function (key, val) { console.log(key + ":&quo

JQuery源码解析-JQuery的工具方法(3)

这篇文章主要对下面这几个方法进行解释 error();抛出异常 parseHTML():解析节点 parseJSON():解析JSON parseXML:解析XML noop():空函数 globalEval():全局解析JS camelCase():转驼峰 nodeName():是否为指定节点(内部) error:方法: error方法的作用是抛出一个自定义异常,内部直接调用了原生解释的throw new Error error: function( msg ) { throw new Err

{{jQuery源码分析}}jQuery对象初始化的多种传参数形式

jQuery对象初始化的传参方式包括:1.$(DOMElement)2.$('<h1>...</h1>'), $('#id'), $('.class') 传入字符串, 这是最常见的形式, 这种传参数经常也传入第二个参数context指定上下文,其中context参数可以为$(...), DOMElement3.$(function() {}); <===> $(document).ready(function() { });4.$({selector : '.class

js菜鸟进阶-jQuery源码分析(1)-基本架构

导读: 本人JS菜鸟一枚,为加强代码美观和编程思想.所以来研究下jQuery,有需要进阶JS的同学很适合阅读此文!我是边看代码(jquery2.2.1),边翻“javascript高级程序设计”写的,有很多基本知识点我都写了书本对应的章节.有分析得不好的还请各位多多指教,更正! 希望我的分析对大家有所帮助,谢谢! 一.代码构成 (function(global, factory){ if ( typeof module === "object" && typeof mo

jQuery源码解析(jQuery对象的实例属性和方法)

1.记录版本号 以及 修正constructor指向 jquery: core_version, constructor: jQuery, 因为jQuery.prototype={ ... } 这种写法将自动生成的jQuery.prototype.constructor属性覆盖删除,所以需要重新修正(指向其构造函数 jQuery).2.init() 初始化方法: init()方法最终返回的是this -jQuery(其实是jQuery.prototype.init)方法的实例对象. 实例对象继承