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

随机推荐

MongoDB创建用户
1.在创建用户之前,我们首先应该启动mongodb的用户验证功能,否则建立用户是没有意义的! 2.使用 //这个123用户拥有test1数据库的数据库管理员权限,拥有test2数据库的读取权限 db. ...
Swift 学习难点笔记
定义一个字典 let interestingNumber = [ ,,,,,], ,,,,,], ,,,,] ] var array = interestingNumber["Prime&q ...
java用spring实现文件下载
今天是我第一博客文章,希望写出来的东西能让大家看明白,欢迎大家给我留言. html页面: <a href="#" onclick="downLoad()" ...
登录不到phpmyadmin
或许出现以下错误情况:phpmyadmin:#1045 无法登录 MySQL 服务器.Access denied for user ‘root’@’localhost’ (using password ...
关于 Block的使用
一.类2[类中某个值,需要反向传值到类1中,采用block方式,实现] [1.声明block属性] @property (copy, nonatomic) void(^activityPageView ...
取消table中tr td的边距
<table border="0" cellspacing="0" cellpadding="0">
Class.getResourceAsStream() VS. ClassLoader.getResourceAsStream()
For Class.getResourceAsStream(String name), if the name parameter doesn't start with a "/" ...
基础-训练营-day1~day5
基础大纲变量: 声明.初始化.使用.命名数据类型: int.long.double.boolean.char.String 运算符: 赋值.算术.关系.逻辑 ...
python笔记 - day7
python笔记 - day7 参考: http://www.cnblogs.com/wupeiqi/articles/5501365.html 面向对象,初级篇: http://www.cnblog ...
人脸识别的ppt
http://wenku.baidu.com/link?url=GWiNRy_9mzqBZ9_2DDZbHRZbBbaBofhs1Y0pBS7aiE5oab8TY78r_z6aAlqo_L9AZzD4 ...

Jquery文档接口遍历

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

随机推荐

热门专题