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

随机推荐

Qt使用一个事件队列对所有发出的事件进行维护（QObject的event()函数相当于dispatch函数），用EventLabel 继承QLabel作为例子（简单明了） good
事件(event)是由系统或者 Qt 本身在不同的时刻发出的.当用户按下鼠标.敲下键盘,或者是窗口需要重新绘制的时候,都会发出一个相应的事件.一些事件在对用户操作做出响应时发出,如键盘事件等:另一些事 ...
报javax.servlet.ServletException: Servlet.init() for servlet springmvc threw exception异常的解决方案
后台错误信息如下: javax.servlet.ServletException: Servlet.init() for servlet springmvc threw exception org.a ...
VB的try语句，异常处理
Try语句格式 Try 程式语句 Catch Throw ex Finally 释放一些连接等动作,不管有没有抛异常,都会执行到这里 End try 捕捉异常的语句是很好用的,在程式发生错误时,可以利 ...
Selenium2学习-025-WebUI自动化实战实例-023-页面快照截图应用之一 -- 常规截图（全页面）
通常我们在进行自动化测试的过程中,有时候需要对页面进行截图,以保存此时的页面,用作后续的判断或测试报告.在 Web UI 自动化测试脚本过程中,通常有以下几种截图的要求: 常规截图 - 页面样式(全页 ...
TestNG学习-002-annotaton 注解概述及其执行顺序
此文主要讲述用 TestNG 基础的 annotation (注解)知识,及其执行的顺序,并通过一个 TestNG 简单的实例演示 annotation 的执行顺序. 希望能对初学 TestNG 测试 ...
四个很好用的Sql Server 日期函数：DateDiff、DatePart、DateAdd、DateName
我以前查一段时间范围内的数据都是在程序里计算好日期再掉查询语句,现在我用下面的函数.SQL SERVER没有查一季度数据的函数. DateDiff函数: 描述返回两个日期之间的时间间隔. 语法 Da ...
LeetCode Perfect Squares
原题链接在这里:https://leetcode.com/problems/perfect-squares/ 题目: Given a positive integer n, find the leas ...
Vue 模板
界面: html: @using Abp.Web.Mvc.Extensions @{ ViewBag.CurrentPage = "BasicDatas"; } @section ...
【未解决】CImage::Save / Load 导致“线程 0xc224 已退出，返回值为 1 (0x1)”
不知道这个返回值意味着什么,反正只要用到Save/Load就会出现这个情况. 这个链接:http://forums.codeguru.com/showthread.php?354017-The-thr ...
RPC、SQL、NFS属于OSI的哪一层
第一层:物理层第二层:数据链路层 802.2.802.3ATM.HDLC.FRAME RELAY 第三层:网络层 IP.IPX.ARP.APPLETALK.ICMP 第四层:传输层 TCP.UDP. ...

Jquery文档接口遍历

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

随机推荐

热门专题