JQuery魔力之$("tagName")与selector

JQuery魔力(一）$("tagName")

DOM 中的 getElementsByTagName()方法在JQuery中的表现就是$("tagName")这么简单！

匿名函数来解决 window.onload 事件

对页面上的所有"div"标记下手，定义统一的外观

对"body"标记定义外观

动态添加一个"span"标记将其放置在"body"里

代码如下:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JQuery 测试</title>
<script src="js/jquery-1.7.1.min.js" type="text/javascript">
</script>
<script type='text/javascript'>
$(function () {
$("div").width(100)
.css("color", "red")
.css("margin", "20px")
.css("border", "dotted 1px green");
$(document.body).css("background-color", "#cccccc");
$("<span>Four</span>").appendTo("body");
});
</script>
<script type="text/javascript">
$(function () {
var v = $("div");
alert(v.length);
for (var i = 0; i < v.length; i++) {
alert(v[i].innerHTML);
}
});
</script>
</head>
<body>
<div>
第一个div</div>
<div>
第二个div</div>
<div>
第三个div</div>
</body>
</html>

JQuery魔力（二） selector
tag标签（可以是：p、div、button …）标签本身具有ID、Class等属性


代码如下:

$("tag") //取得页面中的某种标签的集合 同 document.getElementsByTagName("tag")
$("#id") //据id取得页面中的元素 同 document.getElementById("id")
$("tag#id") //据id取得标签为tag元素集合
$(".class") //据class取得元素集合 同 document.getElementsByClassName("class")
$("tag.class") //据class取得标签为tag的元素集合
$("tag1 tag2") //取得tag1内的tag2类型元素 同
$("tag1 > tag2")
$("tag1:has(tag2)") //取得包含tag2的tag1类型的元素集合

上面的selector充分体现了JQuery存在的价值,就是语法简洁且语义容易理解。

赞 (0)

相关推荐

  • jquery 获取select数组与name数组长度的实现代码

    jquery 获取select数组与name数组长度的实现代码 可以用size() 或者options.length $("#name")[0].options.length;或document.getelementbyid("#name").options.length; $("#name option").size() name: $("select[name=name]").size(); option: $("

  • JQuery魔力之$("tagName")与selector

    JQuery魔力(一)$("tagName") DOM 中的 getElementsByTagName()方法在JQuery中的表现就是$("tagName")这么简单! 匿名函数来解决 window.onload 事件 对页面上的所有"div"标记下手,定义统一的外观 对"body"标记定义外观 动态添加一个"span"标记将其放置在"body"里 复制代码 代码如下: <htm

  • jquery 获取标签名(tagName)示例代码

    jquery 获取标签名(tagName)示例代码

    如果是为了取到tagName后再进行判断,那直接用下面的代码会更方便: $(element).is('input') 如果是要取到标签用作到别的地方,可以使用一下代码: $(element)[0].tagName 或: $(element).get(0).tagName 下面是补充: jQuery 的 get(index) 方法允许选择一个实际的 DOM 元素并且对其直接操作,而不是通过 jQuery 函数,尔后可以直接访问 DOM 元素的 tagName 属性.$(this).get(0) 与

  • jquery tagname 取得方法

    如果你查找Jquery的API,会发现这个好象是Jquery的一个盲点,找来找去也没有明确说明用什么办法可以取到HTML标签的名字,如果直接用 $("H1").tagName 这样的方式也无法取到"H1"这样的值,好象只会得到"undifined". 后来发现Jquery居然将tagName也视为属性之一了,有趣. 所以用 $("H1").attr("tagName") jquery tagname fun

  • jQuery 选择器详解

    jQuery 选择器详解

    $()函数在很多JavaScript类库中都被作为一个选择器函数来使用,在jQuery中就是. $("#id")通过id来获取元素,用来代替document.getElementById()函数. $("tagName")通过标签名来获取元素,用来代替document.getElementsByTagName()函数. jQuery的基本语法是:$(selector).action(), selector即选择器. jQuery选择器的分类 jQuery的选择器基本

  • jQuery源码分析之sizzle选择器详解

    前言 Sizzle 原本是 jQuery 中用来当作 DOM 选择器的,后来被 John Resig 单独分离出去,成为一个单独的项目,可以直接导入到项目中使用. 点击这里下:jquery/sizzle. 本来我们使用 jQuery 当作选择器,选定一些 #id 或 .class,使用 document.getElementById 或 document.getElemensByClassName 就可以很快锁定 DOM 所在的位置,然后返回给 jQuery 当作对象.但有时候会碰到一些比较复杂

  • jQuery滚动加载图片实现原理

    jQuery滚动加载图片实现原理

    本文主要通过以下几方面来说明懒加载技术的原理,个人前端小菜,有错误请多多指出 一.什么是图片滚动加载? 通俗的讲就是:当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径(这样就只需请求一次),只有当图片出现在浏览器的可视区域内时,才设置图片正真的路径,让图片显示出来.这就是图片懒加载. 二.为什要使用这个技术? 比如一个页面中有很多图片,如淘宝.京东首页等等,如果一上来就发送这么多请求,页面加载就会很漫长,如果js文件都放在了文档的底部,恰巧页面的

  • jQuery.prototype.init选择器构造函数源码思路分析

    一.源码思路分析总结 概要: jQuery的核心思想可以简单概括为"查询和操作dom",今天主要是分析一下jQuery.prototype.init选择器构造函数,处理选择器函数中的参数: 这个函数的参数就是jQuery()===$()执行函数中的参数,可以先看我之前写的浅析jQuery基础框架一文,了解基础框架后,再看此文. 思路分析: 以下是几种jQuery的使用情况(用于查询dom),每种情况都返回一个选择器实例(习惯称jQuery对象(一个nodeList对象),该对象包含查询

  • jQuery的运行机制和设计理念分析

    其短小精悍,使用简单方便,性能高效,能极大地提高开发效率,是开发Web应用的最佳的辅助工具之一.因此大部分开发者在抛弃Prototype而选择jQuery来进行Web开发. 一些开发人员在使用jQuery时,由于仅仅只知道jQuery文档中的使用方法,不明白jQuery的运行原理,时常会碰到许多的问题.这些问题大部分是使用不当而产生,极少数是jQuery的Bug.如果不明白其运行机理和核心源码,我们也很难写出基于jQuery类库的高性能的程序出来. 在调试基于jQuery的程序时,我们大部分时间

  • jQuery使用技巧简单汇总

    1.使用最新的jquery版本 觉得这个建议有待商榷,虽然越新的jquery版本性能上更加优秀,但是有些方法的变迁还是会导致一些bug,比如从1.4.2到1.5时很多朋友就抱怨ajax上出现问题了.建议是旧的页面的jquery升级需谨慎,新项目可以大胆的使用jquery新版本. 还有个建议是使用google的cdn上的jquery文件,加载速度更快.猛击Google Libraries API 进入查看. 复制代码 代码如下: <!-- Include a specific version of

  • Jquery 1.9.1源码分析系列（十二）之筛选操作

    废话不多说了直接奔入主题了. jQuery.fn.find( selector ) find接受一个参数表达式selector:选择器(字符串).DOM元素(Element).jQuery对象.分两种情况处理: 第一种,如果传入的参数是非字符串,则先通过jQuery选择器将selector查找出来,然后过滤出包含于当前jQuery对象所匹配的元素的节点. if ( typeof selector !== "string" ) { self = this; return this.pus

随机推荐