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 ...

随机推荐

窗口类型（Widget, Window, Dialog, Desktop, SubWindow等等）
http://doc.qt.io/qt-5/qwidget.html#windowFlags-prop http://doc.qt.io/qt-5/qtwidgets-widgets-windowfl ...
php--sphinx的使用
sphinx安装,配置,使用,分页 Sphinx简介 SQL 结构化查询语言(是一种标准,所有的关系型数据库Mysql,sqlserver,oracle) sphinx的使用两种方式: 第一种: ...
ArcGIS API for Silverlight地图加载众多点时，使用Clusterer解决重叠问题
原文:ArcGIS API for Silverlight地图加载众多点时,使用Clusterer解决重叠问题问题:如果在地图上加载成百上千工程点时,会密密麻麻,外观不是很好看,怎么破? 解决方法: ...
hdu1045 Fire Net
在一张地图上建立碉堡(X),要求每行没列不能放两个,除非中间有强挡着.求最多能放多少个碉堡 #include<iostream> #include<cstdio> #inclu ...
http请求及模拟浏览器发送http请求
/** *测试新增图片 * @throws IOException * @throws HttpException * @throws SAXException * @th ...
C#中override和overload的区别
重载应该叫overload,重写叫override:重载某个方法是在同一个类中发生的!重写是在子类中重写父类中的方法. 1.override: 父类:public virtual string T ...
iOS UIWebView清除缓存
UIWebView清除Cookie: //清除cookies NSHTTPCookie *cookie; NSHTTPCookieStorage *storage = [NSHTTPCookieSto ...
mac电脑忘记账户名密码解决方法
1,重启电脑 ,开机按command+R 2,等苹果开机完成后会进入单用户模式.然后从单用户模式进入终端. 3,在终端里面输入resetpassword. 4,选择系统(root)账户重新输入密码,存 ...
SQLdiag-配置文件-ProfilerCollector
上一篇,我们讲述了配置文件中与性能计数器相关的PerfmonCollector元素:这一篇我们将讲述与跟踪数据相关的ProfilerCollector元素.在上一篇中使用SD_Detailed.XML ...
set方法内存分析
// // main.m // 04-set方法的内存管理分析 // // Created by apple on 14-3-17. // // #import <Foundation/F ...

Jquery文档接口遍历

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

随机推荐

热门专题