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. SCUT - 37 - 手速帝CZK - 分块
			
    https://scut.online/p/37 一开始想到要根号分块预处理,但是不太懂具体怎么写.想不到如此暴力. #include<bits/stdc++.h> using names ...
    
			
    2. 
						
  2. IMAP协议学习笔记（一）
			
    IMAP IMAP(Internet Mail Access Protocol,Internet邮件访问协议)以前称作交互邮件访问协议(Interactive Mail Access Protocol ...
    
			
    3. 
						
  3. IO流详解及测试代码
			
    IO流 (1)IO用于在设备间进行数据传输的操作 (2)分类:    A:流向       输入流 读取数据      输出流 写出数据   B:数据类型     字节流         字节输入流  ...
    
			
    4. 
						
  4. 安装运行谷歌开源的TensorFlow Object Detection API视频物体识别系统
			
    Linux安装 参照官方文档:https://github.com/tensorflow/models/blob/master/research/object_detection/g3doc/inst ...
    
			
    5. 
						
  5. linux安装 rsync 客户端和相关权限认证
			
    [root@rsync-client-inotify /]# yum install rsync -y [root@rsync-client-inotify /]# echo "redhat ...
    
			
    6. 
						
  6. Webpack3.X版 学习全文
			
    如果你webpack用的是4.x版本,此文章部分知识有所改动,所以学习时尽量使用3.x的版本. 本文讲解的是Webpack3.0+的知识,努力做到全网最好的webpack3.0教程.文章通过一个半月的 ...
    
			
    7. 
						
  7. .h与.cpp
			
    本质上没什么区别. cpp:c plus plus,就表示为c++原文件. .h文件实现的功能是声明.cpp文件中需要使用的变量.函数及宏定义等. .h文件就像是一个接口,具体的实现可以在.cpp中, ...
    
			
    8. 
						
  8. 网络安全专家教你设置史上最安全的WiFi密码
			
    通过设置强密码可以防止WiFi被蹭网现象的发生,保证WiFi网络安全.那么我们的WiFi密码怎么设置才最安全呢? 提供以下设置建议: 1.WiFi密码设置尽量使用字母.数字和字符组成的密码.这种密码强 ...
    
			
    9. 
						
  9. 考研结束-开启新生活---markdown语法
			
    markdown语法 考研结束,正式开始提高自己的技术储备. 第一步当然是找到自己原先的博客园,记录下自己的足迹 将博客园设置为markdown编辑器 找到一篇关于markdown的语法介绍 原博文链 ...
    
			
    10. 
						
  10. NOIP2015 提高组 Day T3  斗地主
			
    题目描述 牛牛最近迷上了一种叫斗地主的扑克游戏.斗地主是一种使用黑桃.红心.梅花.方片的A到K加上大小王的共5张牌来进行的扑克牌游戏.在斗地主中,牌的大小关 系根据牌的数码表示如下:3<4< ...
    
			
    11.