Jquery文档接口遍历

//

children():获取所有子元素

<%@ page language="java" contentType="text/html; charset=utf-8"

    pageEncoding="utf-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.8.3.min.js"></script>

<script type="text/javascript" src="<%=request.getContextPath()%>/js/jqr.js"></script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>jquery</title>

</head>

<body>

    <p title="选择你最喜欢的水果." >你最喜欢的水果是?</p>

    <ul>

      <li title='苹果'>苹果</li>

      <li title='橘子'>橘子</li>

      <li title='菠萝'>菠萝</li>

    </ul>

</body>

</html>

$(function() {

    $body = $("body").children();

    $p = $("p").children();

    $ul = $("ul").children();

    alert($body.length+"---"+$p.length+"---"+$ul.length);

    for(var i=0;i<$ul.length;i++){

        alert($ul[i].innerHTML);

    }

})

next();获取匹配元素后面xianglin的同辈元素

$(function() {

    $ul = $("p").next();

    alert($ul.length);

    for(var i=0;i<$ul.length;i++){

        alert($ul[i].innerHTML);

    }

})

prev();获取匹配元素前面xianglin的同辈元素

$(function() {

    $p = $("ul").prev();

    alert($p.html());

})

siblings():获取前后面所有同辈元素,不再演示

closest()用来匹配最近的匹配元素,首先检查当前元素是否匹配,是返回,不是向上查找父元素--个人实验后,是选择距离鼠标指针最近的元素

  $(function(){

    $(document).bind("click", function (e) {

        $(e.target).closest("li").css("color","red");

    })

  });

  //]]>

  </script>

</head>

<body>

    <p title="选择你最喜欢的水果." >你最喜欢的水果是?</p>

    <ul>

      <li title='苹果'>苹果</li>

      <li title='橘子'>橘子</li>

      <li title='菠萝'>菠萝</li>

    </ul>

</body>

还可以去设置元素高度height(),宽度width();

1.offset();

$(function(){

    //获取<p>元素的color

    $("input:eq(0)").click(function(){

            alert(  $("p").css("color") );

      });

    //设置<p>元素的color

      $("input:eq(1)").click(function(){

             $("p").css("color","red")

      });

    //设置<p>元素的fontSize和backgroundColor

      $("input:eq(2)").click(function(){

             $("p").css({"fontSize":"30px" ,"backgroundColor":"#888888"})

      });

      //获取<p>元素的高度

      $("input:eq(3)").click(function(){

              alert( $("p").height() );

      });

      //获取<p>元素的宽度

      $("input:eq(4)").click(function(){

              alert( $("p").width() );

      });

        //获取<p>元素的高度

      $("input:eq(5)").click(function(){

              $("p").height("100px");

      });

      //获取<p>元素的宽度

      $("input:eq(6)").click(function(){

              $("p").width("400px");

      });

      //获取<p>元素的的左边距和上边距

      $("input:eq(7)").click(function(){

              var offset = $("p").offset();

              var left = offset.left;

              var top =  offset.top;

              alert("left:"+left+";top:"+top);

      });

})

<%@ page language="java" contentType="text/html; charset=utf-8"

    pageEncoding="utf-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.8.3.min.js"></script>

<script type="text/javascript" src="<%=request.getContextPath()%>/js/jqr.js"></script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>jquery</title>

</head>

<body>

    <input type="button" value="获取<p>元素的color"/>

    <input type="button" value="设置<p>元素的color"/>

    <input type="button" value="设置<p>元素的fontSize和backgroundColor"/>

    <input type="button" value="获取<p>元素的高度"/>

    <input type="button" value="获取<p>元素的宽度"/>

    <input type="button" value="设置<p>元素的高度"/>

    <input type="button" value="设置<p>元素的宽度"/>

    <input type="button" value="获取<p>元素的的左边距和上边距"/>

    <p title="选择你最喜欢的水果."><strong>你最喜欢的水果是?</strong></p>

    <ul>

      <li title='苹果'>苹果</li>

      <li title='橘子'>橘子</li>

      <li title='菠萝'>菠萝</li>

    </ul>

</body>

</html>

2.position

$("input:eq(8)").click(function(){

              var position = $("p").position();

              var left = position.left;

              var top = position.top;

                  alert("left:"+left+";top:"+top);

      });

3.scrollTop();获取滚动条距顶端距离

scrollLeft();获取滚动条距左侧距离

     var scrollTop = $("textarea").scrollTop();

     var scrollLeft = $("textarea").scrollLeft();

     $("textarea").scrollTop(300);

     $("textarea").scrollLeft(300);

4.案例自带提示

<%@ page language="java" contentType="text/html; charset=utf-8"

    pageEncoding="utf-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.8.3.min.js"></script>

<script type="text/javascript" src="<%=request.getContextPath()%>/js/jqr.js"></script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>jquery</title>

<style type="text/css">

body{

    margin:0;

    padding:40px;

    background:#fff;

    font:80% Arial, Helvetica, sans-serif;

    color:#555;

    line-height:180%;

}

p{

    clear:both;

    margin:0;

    padding:.5em 0;

}

/* tooltip */

#tooltip{

    position:absolute;

    border:1px solid #333;

    background:#f7f5d1;

    padding:1px;

    color:#333;

    display:none;

}

</style>

</head>

<body>

<p><a href="#" class="tooltip" title="这是我的超链接提示1.">提示1.</a></p>

<p><a href="#" class="tooltip" title="这是我的超链接提示2.">提示2.</a></p>

<p><a href="#" title="这是自带提示1.">自带提示1.</a></p>

<p><a href="#" title="这是自带提示2.">自带提示2.</a></p>

</body>

</html>

$(function(){

    $("a.tooltip").mouseover(function(e){

        var x=10;

        var y=20;

        this.myTitle=this.title;

        this.title="";

        var tooltip = "<div id='tooltip'>"+this.myTitle+"</div>";

        $("body").append(tooltip);

        $("#tooltip").css({

            "top":(e.pageY+y)+"px",

            "left":(e.pageX+x)+"px"

        }).show("fast");

    }).mouseout(function(){

        $("#tooltip").remove();

        this.title=this.myTitle;

        $("#tooltip").remove();

    });

})

Jquery文档接口遍历的更多相关文章

jQuery文档操作
jQuery文档操作 1.jq文档结构 var $sup = $('.sup'); $sup.children(); // sup所有的子级们 $sup.parent(); // sup的父级(一个, ...
jQuery 核心 - noConflict() 方法,jQuery 文档操作 - detach() 方法
原文地址:http://www.w3school.com.cn/jquery/manipulation_detach.asp 实例使用 noConflict() 方法为 jQuery 变量规定新 ...
jQuery文档加载完毕的几种写法
js中文档加载完毕.一般在body加一个onload事件或者window.onload = function () {} jQuery中有好多写法,平时也不注意,别人一问,还真觉得头大. 下面是我整理 ...
jQuery 文档操作方法
jQuery 文档操作方法这些方法对于 XML 文档和 HTML 文档均是适用的,除了:html(). 方法描述 addClass() 向匹配的元素添加指定的类名. after() 在匹配的元素之 ...
jQuery文档操作方法对比和src写法
jQuery文档操作方法对比 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
jQuery文档就绪事件
[jQuery文档就绪事件] 为了防止文档在完全加载(就绪)之前运行 jQuery 代码.如果在文档没有完全加载之前就运行函数,操作可能失败. $(document).ready(function() ...
jQuery 效果函数，jquery文档操作，jQuery属性操作方法，jQuerycss操作函数，jQuery参考手册-事件，jQuery选择器
jQuery 效果函数方法描述 animate() 对被选元素应用“自定义”的动画 clearQueue() 对被选元素移除所有排队的函数(仍未运行的) delay() 对被选元素的所有排队函数( ...
jquery文档加载几种写法，图片加载写法
jquery文档加载写法: $(function(){ }) ; //个人最常使用方式 $(document).ready(function(){ }); //调用文档对象下的ready方法传入一个函 ...
jQuery 文档操作 - prependTo() ，appendTo()方法
其他jquery文档操作方法:http://www.w3school.com.cn/jquery/jquery_ref_manipulation.asp jQuery 参考手册 - 文档操作 appe ...

随机推荐

ThreadPoolExecutor 分析
一.从用法入手 Creates a thread pool that creates new threads as needed, but will reuse previously construc ...
创建第一个ArcGIS API for Silverlight应用
原文:创建第一个ArcGIS API for Silverlight应用在完成前面的开发环境搭建以后,接下来实现我们的第一个ArcGIS API forSilverlight应用程序. 接下来我们一 ...
Intervals---poj1201（差分约束系统）
题目链接:http://poj.org/problem?id=1201 题目说[ai, bi]区间内和点集Z至少有ci个共同元素,那也就是说如果我用Si表示区间[0,i]区间内至少有多少个元素的话,那 ...
imx6 kernel clock
前段时间查看了uboot的时钟,kernel的也稍微了解了下,记录于此,以后再来补充完善. board-mx6q_sabresd.c MACHINE_START(MX6Q_SABRESD, " ...
ubuntu 12.04安装jdk1.8
转自http://blog.chinaunix.net/uid-26404477-id-3471246.html 在安装之前,系统没有任何jdk软件,也就是说在终端执行 java -version 将 ...
nginx端口被占用解决方案
killall -9 nginx或service nginx restart(重新启动)
ApacheBench（ab）使用详解
ab命令原理 Apache的ab命令模拟多线程并发请求,测试服务器负载压力,也可以测试nginx.lighthttp.IIS等其它Web服务器的压力. ab命令对发出负载的计算机要求很低,既不会占 ...
SourceTree工具进行提交合并代码步骤
1.先安装SourceTree工具. beyong compare工具 2.在 SourceTree工具加载beyong compare插件 1.工具.选项.比较 2.就是修改.gitconfig文件 ...
Android 使用PullToRefreshExpandableListView不能setAdapter的问题
private PullToRefreshExpandableListView lv; lv = (PullToRefreshExpandableListView) findViewById(R.id ...
idea 的问题
IDEA的maven项目中,默认源代码目录下的xml等资源文件并不会在编译的时候一块打包进classes文件夹,而是直接舍弃掉. 如果使用的是Eclipse,Eclipse的src目录下的xml等资源 ...

Jquery文档接口遍历

Jquery文档接口遍历的更多相关文章

随机推荐

热门专题