jQuery基础--jQuery特殊属性操作

1、index()

会返回当前元素在所有兄弟元素里面的索引。

<!DOCTYPE html>

<html lang="zh-CN">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

</head>

<body>

<ul>

  <li><a href="#">我是链接</a></li>

  <li><a href="#">我是链接</a></li>

  <li><a href="#">我是链接</a></li>

  <li><a href="#">我是链接</a></li>

  <li><a href="#">我是链接</a></li>

  <li><a href="#">我是链接</a></li>

  <li><a href="#">我是链接</a></li>

  <li><a href="#">我是链接</a></li>

  <li><a href="#">我是链接</a></li>

</ul>

<script src="jquery-1.12.4.js"></script>

<script>

  $(function () {

    //index()会返回当前元素在所有兄弟元素里面的索引。

    $("li").click(function () {

      console.log($(this).index());

    });

  });

</script>

</body>

</html>

　2、

1.1. val方法

val方法用于设置和获取表单元素的值，例如input、textarea的值

//设置值

$("#name").val(“张三”);

//获取值

$("#name").val();

<!DOCTYPE html>

<html lang="zh-CN">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

</head>

<body>

<input type="button" value="呵呵" id="btn">

<input type="text" value="洋酒" id="txt">

<script src="jquery-1.12.4.js"></script>

<script>

  $(function () {

    //console.log($("#btn").val());

    //$("#btn").val("哈哈");

    //console.log($("#btn").attr("value"));

    //$("#txt").val("123");

    $("#txt").focus(function () {

      //如果是默认值，清空内容

      if($(this).val() === "洋酒"){

        $(this).val("");

      }

    });

    $("#txt").blur(function () {

      if($(this).val() === ""){

        $(this).val("洋酒");

      }

    });

  });

</script>

</body>

</html>

1.2. html方法与text方法

html方法相当于innerHTML text方法相当于innerText

//设置内容

$(“div”).html(“<span>这是一段内容</span>”);

//获取内容

$(“div”).html()

//设置内容

$(“div”).text(“<span>这是一段内容</span>”);

//获取内容

$(“div”).text()

区别：html方法会识别html标签，text方法会那内容直接当成字符串，并不会识别html标签。

<!DOCTYPE html>

<html lang="zh-CN">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

</head>

<body>

<div><h3>我是标题</h3></div>

<script src="jquery-1.12.4.js"></script>

<script>

  $(function () {

    //html:innerHTML  text:innerText

    //console.log($("div").html());//<h3>我是标题</h3>

    //console.log($("div").text());//我是标题

    //$("div").html("<p>我是文本</p>");

    $("div").text("<p>我是文本</p>");

  });

</script>

</body>

</html>

1.3. width方法与height方法

设置或者获取高度

//带参数表示设置高度

$(“img”).height(200);

//不带参数获取高度

$(“img”).height();

获取网页的可视区宽高

//获取可视区宽度

$(window).width();

//获取可视区高度

$(window).height();

<!DOCTYPE html>

<html lang="zh-CN">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

  <style>

    div {

      width: 200px;

      height: 200px;

      background-color: red;

      padding: 10px;

      border: 10px solid #000;

      margin: 10px;

    }

  </style>

</head>

<body>

<div></div>

<script src="jquery-1.12.4.js"></script>

<script>

  $(function () {

    //获取div的宽度

    //console.log($("div").css("width"));

    //$("div").css("width", "400px");

    //直接获取到的是数字

    //就是获取的width的值

    console.log($("div").width());//width

    //console.log($("div").innerWidth());//padding+width

    //console.log($("div").outerWidth());//padding+width+border

    //console.log($("div").outerWidth(true));//padding+width+border+margin

    //$("div").width(400);

    //需要获取页面可视区的宽度和高度

//    $(window).resize(function () {

//      console.log($(window).width());

//      console.log($(window).height());

//    });

  });

</script>

</body>

</html>

1.4. scrollTop与scrollLeft

设置或者获取垂直滚动条的位置

//获取页面被卷曲的高度

$(window).scrollTop();

//获取页面被卷曲的宽度

$(window).scrollLeft();

【案例：仿腾讯固定菜单栏案例】【案例：小火箭返航案例】

<!DOCTYPE html>

<html lang="zh-CN">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

  <style>

    body {

      height: 4000px;

      width: 4000px;

    }

  </style>

</head>

<body>

<script src="jquery-1.12.4.js"></script>

<script>

  $(function () {

    $(window).scroll(function () {

      console.log($(window).scrollTop());

      console.log($(window).scrollLeft());

    });

  });

</script>

</body>

</html>

<!DOCTYPE html>

<html>

<head lang="en">

  <meta charset="UTF-8">

  <title></title>

  <style>

    * {

      margin: 0;

      padding: 0

    }

    img {

      vertical-align: top;

    }

    .main {

      margin: 10px auto 0;

      width: 1000px;

    }

    .fixed {

      position: fixed;

      top: 0;

      left: 0;

    }

  </style>

  <script src="../jquery-1.12.4.js"></script>

  <script>

    $(function () {

      $(window).scroll(function () {

        //判断卷去的高度超过topPart的高度

        //1. 让navBar有固定定位

        //2. 让mainPart有一个marginTop

        if($(window).scrollTop() >= $(".top").height() ){

          $(".nav").addClass("fixed");

          $(".main").css("marginTop", $(".nav").height() + 10);

        }else {

          $(".nav").removeClass("fixed");

          $(".main").css("marginTop", 10);

        }

      });

    });

  </script>

</head>

<body>

<div class="top" id="topPart">

  <img src="data:images/top.png" alt=""/>

</div>

<div class="nav" id="navBar">

  <img src="data:images/nav.png" alt=""/>

</div>

<div class="main" id="mainPart">

  <img src="data:images/main.png" alt=""/>

</div>

</body>

</html>

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

  <style>

    body {

      height: 8000px;

    }

    a {

      color: #FFF;

    }

    .actGotop {

      position: fixed;

      bottom: 50px;

      right: 50px;

      width: 150px;

      height: 195px;

      display: none;

      z-index: 100;

    }

    .actGotop a, .actGotop a:link {

      width: 150px;

      height: 195px;

      display: inline-block;

      background: url(images/gotop.png) no-repeat;

      outline: none;

    }

    .actGotop a:hover {

      width: 150px;

      height: 195px;

      background: url(images/gotop.gif) no-repeat;

      outline: none;

    }

  </style>

</head>

<body>

<!-- 返回顶部小火箭 -->

<div class="actGotop"><a href="javascript:;" title="Top"></a></div>

<script src="jquery-1.12.4.js"></script>

<script>

  $(function () {

    //当页面超出去1000px的时候，让小火箭显示出来,如果小于1000，就让小火箭隐藏

    $(window).scroll(function () {

      if($(window).scrollTop() >= 1000 ){

        $(".actGotop").stop().fadeIn(1000);

      }else {

        $(".actGotop").stop().fadeOut(1000);

      }

    });

    function getScroll(){

      return {

        left:window.pageYOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0,

        top:window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0

      }

    }

    //在外面注册

    $(".actGotop").click(function () {

      //$("html,body").stop().animate({scrollTop:0},3000);

      //scrollTop为0

      //$(window).scrollTop(0);

    })

  });

</script>

</body>

</html>

1.5. offset方法与position方法

offset方法获取元素距离document的位置，position方法获取的是元素距离有定位的父元素的位置。

//获取元素距离document的位置,返回值为对象：{left:100, top:100}

$(selector).offset();

//获取相对于其最近的有定位的父元素的位置。

$(selector).position();

<!DOCTYPE html>

<html lang="zh-CN">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

  <style>

    * {

      margin: 0;

      padding: 0;

    }

    .father {

      width: 400px;

      height: 400px;

      background-color: pink;

      position: relative;

      margin: 100px;

    }

    .son {

      width: 200px;

      height: 200px;

      background-color: red;

      position: absolute;

      top: 100px;

      left: 100px;

    }

  </style>

</head>

<body>

<div class="father">

  <div class="son"></div>

</div>

<script src="jquery-1.12.4.js"></script>

<script>

  $(function () {

    //获取元素的相对于document的位置

    console.log($(".son").offset());

    //获取元素相对于有定位的父元素的位置

    console.log($(".son").position());

  });

</script>

</body>

</html>

　empty()

触发事件click()

trigger()

<!DOCTYPE html>

<html lang="zh-CN">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

</head>

<body>

<input type="button" value="触发" id="btn">

<p>我是一个p元素</p>

<script src="jquery-1.12.4.js"></script>

<script>

  $(function () {

    $("p").on("click", function () {

      alert("呵呵");

    })

    //toggle：切换  trigger：触发

    $("#btn").on("click",function () {

      //触发p元素的点击事件

      //$("p").click();

      //$("p").trigger("click");

    });

  });

</script>

</body>

</html>

delay(2000)

<!DOCTYPE html>

<html lang="zh-CN">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

  <style>

    div {

      width: 400px;

      height: 60px;

      background-color: pink;

      text-align: center;

      line-height: 60px;

      font-size: 30px;

      margin: 100px auto;

      display: none;

    }

  </style>

</head>

<body>

<div>这个一个提示消息</div>

<script src="jquery-1.12.4.js"></script>

<script>

  $(function () {

    $("div").fadeIn(1000).delay(2000).fadeOut(1000);

  });

</script>

</body>

</html>

链式编程

//设置性操作：可以链式编程

    //获取性操作，不能链式，因为获取性操作，数值，字符串，

    //返回值是不是一个jq对象。

    console.log($("div").width(200).height(200).css("backgroundColor", "pink").width());

　　案例

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>五角星评分案例</title>

  <style>

    * {

      padding: 0;

      margin: 0;

    }

    .comment {

      font-size: 40px;

      color: #ff16cf;

    }

    .comment li {

      float: left;

    }

    ul {

      list-style: none;

    }

  </style>

  <script src="jquery-1.12.4.js"></script>

  <script>

    $(function () {

      //1. 给li注册鼠标经过事件，让自己和前面所有的兄弟都变成实心

      var wjx_k = "☆";

      var wjx_s = "★";

      $(".comment>li").on("mouseenter", function () {

        $(this).text(wjx_s).prevAll().text(wjx_s);

        $(this).nextAll().text(wjx_k);

      });

      //2. 给ul注册鼠标离开时间，让所有的li都变成空心

      $(".comment").on("mouseleave", function () {

        $(this).children().text(wjx_k);

        //再做一件事件，找到current，让current和current前面的变成实心就行。

        $("li.current").text(wjx_s).prevAll().text(wjx_s);

      });

      //3. 给li注册点击事件

      $(".comment>li").on("click", function () {

        $(this).addClass("current").siblings().removeClass("current");

      });

    });

  </script>

</head>

<body>

<ul class="comment">

  <li>☆</li>

  <li>☆</li>

  <li>☆</li>

  <li>☆</li>

  <li>☆</li>

</ul>

</body>

</html>

　　each（）用法

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>复制</title>

  <style>

    ul {

      list-style: none;

    }

    li {

      float: left;

      width: 200px;

      height: 200px;

      background: pink;

      text-align: center;

      line-height: 200px;

      margin: 0 20px 20px 0;

    }

  </style>

  <script src="jquery-1.12.4.js"></script>

  <script>

    $(function () {

//      for(var i = 0; i < $("li").length; i++) {

//        $("li").eq(i).css("opacity", (i+1)/10);

//      }

      //each方法

      $("li").each(function (index, element) {

        $(element).css("opacity", (index+1)/10);

      })

    });

  </script>

</head>

<body>

<ul id="ulList">

  <li>什么都看不见</li>

  <li>什么都看不见</li>

  <li>什么都看不见</li>

  <li>什么都看不见</li>

  <li>什么都看不见</li>

  <li>什么都看不见</li>

  <li>什么都看不见</li>

  <li>什么都看不见</li>

  <li>什么都看不见</li>

  <li>什么都看不见</li>

</ul>

</body>

</html>

$冲突解决

<!DOCTYPE html>

<html lang="zh-CN">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

  <script src="itcast.js"></script>

  <script src="jquery-1.12.4.js"></script>

  <script>

    console.log($);

    //jQuery释放$的控制权

    var mm = $.noConflict();

    jQuery(function () {

    });

  </script>

</head>

<body>

</body>

</html>

jQuery基础--jQuery特殊属性操作的更多相关文章

jQuery基础-选择器，样式操作
入口函数:ready() 当 DOM(文档对象模型) 已经加载,并且页面(包括图像)已经完全呈现时,会发生 ready 事件. 由于该事件在文档就绪后发生,因此把所有其他的 jQuery 事件和函数置 ...
JQuery处理DOM元素-属性操作
JQuery处理DOM元素-属性操作 //操作元素的属性: $('*').each(function(n){ this.id = this.tagName + n; }) //获取属性值: $('') ...
jQuery基础DOM和CSS操作
$('#box').html();//获取 html 内容$('#box').text();//获取文本内容,会自动清理 html 标签$('#box').html('<em>www.li ...
jQuery基础知识点（DOM操作）
1.样式属性操作 1)设置样式属性操作 ①设置单个样式: // 第一个参数表示:样式属性名称 // 第二个参数表示:样式属性值 $(selector).css(“color”, ...
jQuery基础之二（操作标签）
一:样式操作 addClass();// 添加指定的CSS类名. removeClass();// 移除指定的CSS类名. hasClass();// 判断样式存不存在 toggleClass();/ ...
Jquery选择器大全、属性操作、css操作、文档、事件等
一.简介定义 jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库. jQuery对象 jQuery产 ...
jQuery(基础dom及css操作)
设置元素内容元素属性操作 ---------- 元素样式操作 ---------------- 对象数组的遍历测试代码: $(function () { var v=$('div').css([' ...
jQuery - 02. 样式表属性操作/类操作、动画、显示隐藏、滑入、淡入、停止动画、节点操作、添加对象、清空节点
样式表属性操作.css $("div").css({'width':100,'height':100,'background':'red'}); $("div" ...
jQuery样式及html属性操作
样式及html属性操作1,行内样式 css(); a:获取样式元素.css(样式名称); b:设置单个样式元素.css("样式名称":"样式值"); c:设 ...
前端基础：CSS属性操作
CSS属性操作 1.文本文本颜色:color,颜色属性被用来设置文字的颜色,颜色是通过CSS经常指定的,其格式有: 1.十六进制:#FF0000: 2.RGB值:RGB(255,0,0): 3.颜色 ...

随机推荐

python学习第五十天shutil模块的用法
什么shutil模块,就是对高级的文件,文件夹,压缩包进行处理的模块,下面简单讲述其用法. 文件和文件夹的操作拷贝文件内容 import shutil shutil.copyfileobj(open ...
Eclipse打包可执行jar包操作步骤
1.右键点击工程,选择Export…,进入页面 2.弹出对话框,选择Java->Runnable JAR file ,点击Next>,页面显示jar包的输出路径,配置为jmeter的/li ...
C#中的==和Equals的区别
一,值类型中的比较,对于值类型,如果对象的值相等,则相等运算符 (==) 返回 true,否则返回 false. ; ; bool bi1 = ai.Equals(bi); //true bool b ...
简述vue中v-if和v-show的区别
vue中的 v-if 和 v-show 二者都可以动态的控制元素的隐藏和显示,但是他们控制的原理是不同的 v-if v-if 控制元素显示或隐藏是把dom元素整个的渲染或者删除,如果删除,也就是页面中 ...
Kintex 7五兄弟
基KC705E 增强版基于FMC接口的Xilinx Kintex-7 FPGA K7 XC7K325T PCIeX8 接口卡(136) 本板卡是Xilinx公司芯片V5系列芯片设计信号处理板卡.由一 ...
utf8 中文
#include <iostream> #include <codecvt> #include <fstream> #include <string> ...
ELK windows下部署测试
操作系统 win7 (当时想在linux下部署,虚拟内存过小,转而在windows下) 版本说明 elasticsearch-6.6.2 (elasticsearch-head-master插件) ...
mysql 5.5和5.6版本关于timestamp not null类型字段关于null的处理
Server version: 5.5.33-31.1-log Percona Server (GPL), Release rel31.1, Revision 566 mysql> CREATE ...
查看ubuntu系统信息
root@k8s001:~/go/src/k8s.io/kubernetes# cat /etc/*release DISTRIB_ID=Ubuntu DISTRIB_RELEASE=16.04 DI ...
ht-5 treemap特性
(1)TreeMap类通过使用红黑树实现Map接口 (2)TreeMap提供按排序顺序存储键值对的有效手段,同时允许快速检索 (3)不同于散列映射,树映射保证它的元素按键的自然顺序升序排列 (4)Tr ...

jQuery基础--jQuery特殊属性操作

1.1. val方法

1.2. html方法与text方法

1.3. width方法与height方法

1.4. scrollTop与scrollLeft

1.5. offset方法与position方法

jQuery基础--jQuery特殊属性操作的更多相关文章

随机推荐

热门专题