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特殊属性操作的更多相关文章
	

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

	


随机推荐
	

    
									
  1. 微信jssdk配置的问题，使用MVC制作的demo
			
    一,view代码 <script src="~/Scripts/jquery-3.3.1.js"></script> <script src=&quo ...
    
			
    2. 
						
  2. vue项目报错，解决Module build failed: Error: Cannot find module 'node-sass' 问题
			
    1.报错问题 1 E:\WebStormFile\treehole-manage>npm run dev > xc-ui-pc-sysmanage@1.0.0 dev E:\WebStor ...
    
			
    3. 
						
  3. indexDB的用法
			
    本文转自http://www.ruanyifeng.com/blog/2018/07/indexeddb.html,为了方便个人整理学习笔记所用 一.概述 随着浏览器的功能不断增强,越来越多的网站开始 ...
    
			
    4. 
						
  4. 联想ideapad 310s如何进BIOS，换固态硬盘SSD，配置U盘启动，重装Win10系统
			
    1. 如何进BIOS 关机情况下,捅一下Novo键,即可进入BIOS 2. 安装固态硬盘 Ideadpad 310S 本身自带的硬盘是5400转的机械硬盘,容量小速度慢.换的新的固态硬盘是SATA接口 ...
    
			
    5. 
						
  5. javaweb各种框架组合案例(九)：springboot+tk.mybatis+通用service
			
    一.项目结构 二.pom.xml <?xml version="1.0" encoding="UTF-8"?> <project xmlns= ...
    
			
    6. 
						
  6. python3-返回函数
			
    函数作为返回值 高阶函数除了可以接受函数作为参数外,还可以把函数作为结果值返回. 我们来实现一个可变参数的求和.通常情况下,求和的函数是这样定义的: def calc_sum(*args): ax = ...
    
			
    7. 
						
  7. sysbench github & manual
			
    sysbench github https://github.com/akopytov/sysbench sysbench-manual.pdf https://github.com/mrivandu ...
    
			
    8. 
						
  8. Windows中的Work线程和GUI线程
			
    Windows线程分为两种:Worker线程.GUI线程 worker线程:是指完全不牵扯到图形用户界面(GUI),纯粹做运算的线程. GUI线程:负责建造窗口以及处理消息循环(拥有消息队列).任何一 ...
    
			
    9. 
						
  9. bzoj5015 [Snoi2017]礼物   矩阵快速幂+二项式展开
			
    题目传送门 https://lydsy.com/JudgeOnline/problem.php?id=5015 题解 设 \(f_i\) 表示第 \(i\) 个朋友的礼物,\(s_i\) 表示从 \( ...
    
			
    10. 
						
  10. Flsak中的socket是基于werkzeug实现的。
			
    from werkzeug.serving import run_simple from werkzeug.wrappers import Request,Respinse @Request.appl ...
    
			
    11.