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. 2101 可达性统计（拓扑排序/dfs+状态压缩）
			
    [题目描述] 给定一张N个点M条边的有向无环图,分别统计从每个点出发能够到达的点的数量.N,M≤30000. [题目链接] 2101 可达性统计 [算法] 拓扑排序之后逆序计算(感觉dfs更好写而且应 ...
    
			
    2. 
						
  2. Dubbo一文入门
			
    一.简介 系统的架构,已从最早的单体式架构(一个war包完事)逐渐发展到目前的微服务式架构.微服务,将一个大型的复杂的应用系统,拆分成若干独立的松耦合的小的服务工程,每个服务工程可独立部署,每个服务只 ...
    
			
    3. 
						
  3. JVM 垃圾回收（GC）机制
			
    目录 一.背景 二. 哪些内存需要回收? 1.引用计数算法 2 .可达性分析算法 三. 四种引用状态 1.强引用 2.软引用 3.弱引用 4.虚引用 对象死亡(被回收)前的最后一次挣扎 方法区如何判断 ...
    
			
    4. 
						
  4. 《图解HTTP》阅读总结
			
    前言:<图解HTTP>是一本图文并茂的好书,讲解地很详尽.目前我只完整地读了一遍,很多地方知其然不知其所以然,接下来打算抽空再读一次.这篇博文只是做个粗略记录,第二遍读完会再来编辑细化.  ...
    
			
    5. 
						
  5. Unity 官网无法访问|国外网站访问过慢|国外网站访问加速器
			
    目录 1. 文档地址 2. 按 3. 工具下载地址 1. 文档地址 GitHub博客 https://coco5666.github.io/blog/articles/20190704-01/ 2.  ...
    
			
    6. 
						
  6. nginx多层反代配置变量proxy_set_header
			
    Nginx多层反代配置变量proxy_set_header过程记录 第一层代理: (1)路径: $ vim /data/soft/nginx/conf/vhost/xixi.conf (2)内容:(注 ...
    
			
    7. 
						
  7. HDU-3810 超大容量01背包
			
    题意:有n堆野兽,每堆野兽屠杀完完需要花费ti时间,可以增加金钱gi,敌法师有瞬移技能,可以从某堆野兽移到另一堆野兽,题目有给定从哪堆可以移到哪堆.最后问在满足打的金钱多余m的情况下的最少时间.数据范 ...
    
			
    8. 
						
  8. bzoj5518 & loj3046 「ZJOI2019」语言   线段树合并+树链的并
			
    题目传送门 https://loj.ac/problem/3046 题解 首先问题就是问有多少条路径是给定的几条路径中的一条的一个子段. 先考虑链的做法. 枚举右端点 \(i\),那么求出 \(j\) ...
    
			
    9. 
						
  9. mongodb 用户 权限 设置 详解
			
    原文地址:http://blog.51yip.com/nosql/1575.html 我知道的关系型数据库都是有权限控制的,什么用户能访问什么库,什么表,什么用户可以插入,更新,而有的用户只有读取权限 ...
    
			
    10. 
						
  10. 爬虫技术：从sougou网站访问微信公众号的过程
			
    一:分析过程:fidder + chrome开发者工具 1:输入nba跳转的页面,每页显示10条相关公众号的信息 2:分析网站得到每条标题的详情页链接地址在: 3,请求上图中的url,会返回一段js代 ...
    
			
    11.