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

随机推荐

在Windows 环境下编译Qt静态库（QT5.32）
参考链接 Qt5.3 Tools and Versions MinGW ICU ActivePerl Qt 安装MinGW工具链环境这里在Win32环境下要安装一个MinGW工具链,这里最好是先安装 ...
MYSQL 中常用日期时间函数使用
MySQL Date 函数下面的表格列出了 MySQL 中最重要的内建日期函数: 函数描述 NOW() 返回当前的日期和时间 CURDATE() 返回当前的日期 CURTIME() 返回当前的时间 ...
Http响应code
Http响应报文 HTTP响应也由三个部分组成,分别是:状态行.消息报头.响应正文. 其中,HTTP-Version表示服务器HTTP协议的版本:Status-Code表示服务器发回的响应状态代码:R ...
angularJS的$watch和$apply
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
1006 最长公共子序列Lcs
1006 最长公共子序列Lcs 基准时间限制:1 秒空间限制:131072 KB 给出两个字符串A B,求A与B的最长公共子序列(子序列不要求是连续的). 比如两个串为: abcicba abdks ...
转：ASP.NET MVC利用TryUpdateModel来做资料更新 (一)
前言有使用 ASP.NET MVC 的朋友们一定多多少少有听过 TryUpdateModel,之前就看了很多有关它的文章,但在专案实务上都未曾实际使用过,而 TryUpdateModel 不仅能利用 ...
【python】RGB图片到灰度图的转换
在做立体匹配求深度图的时候遇到这个问题,用惯了matlab的rgb2gray,倒是不熟悉python的实现,在网上找到了相关方案,记下来已作备用 RGB到灰度图转换公式: Y' = 0.299 R + ...
oracle 变量声明初始化赋值
DECLARE sname VARCHAR2(20); BEGIN sname:='xxx'; sname:=sname||' and tom'; dbms_output.put_line(sname ...
SpringMVC中JSP取不到ModelAndView,ModelMap的数据原因
最近maven了一个web项目无论我用ModelAndView还是ModelMap,在视图层不管是用 ${msg} 还是用JSTL的<c:out value="${msg}" ...
iOS 应用内跳转到appstore里下载
SKStoreProductViewController类是UIViewController的子类, 如果你对view controller比较熟悉的话,那SKStoreProductViewCont ...

Jquery文档接口遍历

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

随机推荐

热门专题