1.库和框架

库:小而精 直接操作DOM

css()

jquerry封装js的那些操作: 事件,属性, ajax(交互的技术),DOM,选择器

框架:大而全  事件,DOM,属性操作,ajax,"模板引擎"

2.jquerry 的入口函数:

//等待文加载后使用

$(function{});

$(window).ready(function(){});

3.DOM事件三步走

（1）事件源
主要还是学习选择器
css大部分选择器都可以使用

$('div'); 获取出来的是jquery对象

$('#box');

$('.active');

选择器的方法

（2）事件
js onclick onmouseover onmouseout onmouseenter onmouseleave onscroll onresize onchange onsubmit
jq的事件都不带on

//click()参数是一个回调函数 ，当调用click方法之后，做完了事件操作，jquery内部又返回一个jQuery对象，
所以我们又可以再次调用jquery的方法。
JQ对象.click(function(){})

(3)事件的回调函数 是事件驱动

（4）对样式属性的操作
.css('color')
.css({
color:'red',
width:300
})
- 如果有一个参数，并且该参数的类型是字符串，获取
- 如果有一个参数，并且该参数的类型是{}，设置多个属性值
.css('color'，'red')
.css('width'，300)
- 如果有两个参数，设置单个的属性值

3.js jq 对象相互转换

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Title</title>
  6.  </head>
  7.  <body>
  8.      <ul>
  9.          <li class="item">alex</li>
  10.          <li>wusir</li>
  11.          <li>ritian</li>
  12.      </ul>
  13.      <script src="jquerry.js"></script>
  14.      <script>
  15.          var datas = ["red","green","yellow"];
  16.          //
  17.  
  18.          var item = document.getElementsByClassName("item")[0];
  19.          console.log(item);
  20.          1.将jquerry对象转化为js对象
  21.          console.log($('li')[0])
  22.          2.将js对象转化为jquerry对象
  23.          console.log($(item))
  24.          3.用css对jquerry对象进行属性操作 <1>只写一个css属性表示创建一个类class=item
  25.          <2>写两个字符串表示进行属性修改<3>多个进行打包修改
  26.          console.log($(item).css("color","blue").click(function () {
  27.              alert(11);
  28.          }))
  29.       4.链式编程 : 每一个都是一个对象 jquerry 99%都是方法
  30.          $(item).css("color","green").click(function() {
  31.              alert(11);
  32.          })
  33.  
  34.      </script>
  35.  
  36.  </body>
  37.  </html>

转化

4.jquerry 高级选择器

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Title</title>
  6.  </head>
  7.  <body>
  8.      <div class="box">
  9.          <p id="a">alex</p>
  10.          <p>日</p>
  11.          <p>天</p>
  12.      </div>
  13.      <p>wusir</p>
  14.      <script src="jquerry.js"></script>
  15.      <script>
  16.          $(function () {
  17.              //1.> 子子孙孙
  18.              // $(".box>p").css("color","green");
  19.              //2. 紧邻着的挨着的下一个兄弟元素
  20.              $("#a+p").css("color","green")
  21.          })
  22.  
  23.      </script>
  24.  
  25.  </body>
  26.  </html>

> +

5.基本过滤选择器 需要使用``

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Title</title>
  6.  </head>
  7.  <body>
  8.      <ul>
  9.          <li>alex</li>
  10.          <li>伊宁</li>
  11.          <li>未来</li>
  12.          <li>张菌康</li>
  13.      </ul>
  14.      <script src="jquerry.js"></script>
  15.      <script>
  16.          $(function () {
  17.              //定义一个变量
  18.              var i = 2;
  19.              //eq (index)为第index的索引
  20.              $(`ul li:eq(${i})`).css('color','red');
  21.              $(`ul li:eq(${1})`).css("color","red");
  22.              $('ul li:first').css('color','red');
  23.              $('ul li:last').css('color','red');
  24.  
  25.          })
  26.      </script>
  27.  
  28.  </body>
  29.  </html>

过滤选择要``

6.属性选择器

为了区分某种专有的属性 类名=什么呀之类的 用[]括起来表明

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Document</title>
  6.      <style>
  7.          input[type='text']{
  8.              border: none;
  9.              outline: none;
  10.              border: 1px solid red;
  11.              width: 200px;
  12.              height: 100px;
  13.              font-size: 30px;
  14.  
  15.          }
  16.      </style>
  17.  </head>
  18.  <body>
  19.      <form action="">
  20.  
  21.          <input type="text" name='user' aaa='bbb' >
  22.          <input type="password" name="pwd">
  23.          <input type="submit">
  24.      </form>
  25.      <script src="jquery.js"></script>
  26.      <script>
  27.  
  28.          $(function () {
  29.  
  30.              console.log($('input[type=text]'))
  31.          });
  32.      </script>
  33.  </body>
  34.  </html>

属性选择器

7.筛选选择器

筛选出想要的

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Title</title>
  6.  </head>
  7.  <body>
  8.      <div class="father">55
  9.          <p>alex</p>
  10.          <a href="#">日天</a>
  11.          <span>村长</span>
  12.          <div class="g">55
  13.              <span>一宁</span>
  14.          </div>
  15.      </div>
  16.      <script src="jquerry.js"></script>
  17.      <script>
  18.          $(function () {
  19.              1.查找指定元素.father的所有后代元素g
  20.              console.log($(".father").find(".g"));
  21.              $(".father").find(".g").css("color","green")
  22.              $(".g").click(function () {
  23.                  //this这里已经封装了标记为专门的这个
  24.                  console.log(this);
  25.                  $(this).css("color","red");
  26.              })
  27.              2.find 亲儿子和孙子哦
  28.          $(".father").find("span").css("color","green")
  29.              find 重孙子哦
  30.              $('.father').find('.g>span').click(function () {
  31.                  console.log(this);
  32.              });
  33.              3.children亲儿子 找到的是子带的span 村长
  34.              $(".father").children("span").css("color","green")
  35.           4.parent ()查找父元素
  36.              $(".g span").parent().css("color","red")
  37.  
  38.          })
  39.  
  40.      </script>
  41.  
  42.  </body>
  43.  </html>

筛选 find children parent

8.siblings

找到除了自己的所有兄弟标签

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Title</title>
  6.  </head>
  7.  <body>
  8.      <ul>
  9.          <li>尚宏运</li>
  10.          <li>刘宁谦</li>
  11.          <li>吕星星</li>
  12.          <li>赵挺</li>
  13.      </ul>
  14.      <script src="jquerry.js"></script>
  15.      <script>
  16.          $(function () {
  17.              $("ul li").click(function () {
  18.                  //这里的this是js里的 需要转换为jq对象
  19.                  //这里siblings是筛选除了li标签的所有兄弟,在这里除了自己的所有兄弟li
  20.                  $(this).css("color","red").siblings('li').css("color","blue");
  21.              })
  22.          })
  23.      </script>
  24.  </body>
  25.  </html>

删选器 siblings

9.选项卡

jquerry 版

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Title</title>
  6.      <style>
  7.                  *{
  8.              padding: 0;
  9.              margin: 0;
  10.          }
  11.          ul{
  12.              list-style:none;
  13.          }
  14.          a{
  15.              text-decoration: none;
  16.          }
  17.          .box{
  18.              width: 400px;
  19.              height: 300px;
  20.  
  21.          }
  22.          .box ul {
  23.              width: 100%;
  24.              overflow: hidden;
  25.          }
  26.          .box ul li{
  27.              float: left;
  28.              width: 50px;
  29.              height: 70px;
  30.              margin: 0 10px;
  31.              background-color: red;
  32.              text-align: center;
  33.              line-height: 70px;
  34.          }
  35.          a{
  36.              color: #fff;
  37.          }
  38.          .active{
  39.              width: 100%;
  40.              height: 100px;
  41.              background-color: green;
  42.              display: none;
  43.          }
  44.      </style>
  45.  </head>
  46.  <body>
  47.      <div class="box">
  48.              <ul>
  49.  
  50.              </ul>
  51.              <div class="active">
  52.  
  53.              </div>
  54.      </div>
  55.      <form action="">
  56.          <input type="text" value="123">
  57.      </form>
  58.      <script src="jquerry.js"></script>
  59.      <script>
  60.          $(function () {
  61.              $(".box ul").html( `<li>
  62.                  <a href="javascript:void(0);">张三</a>
  63.              </li>
  64.              <li>
  65.                  <a href="javascript:void(0);">李四</a>
  66.              </li>
  67.              <li>
  68.                  <a href="javascript:void(0);">王五</a>
  69.              </li>
  70.              <li>
  71.                  <a href="javascript:void(0);">赵六</a>
  72.              </li>`);
  73.              //1.单击 a 标签
  74.              $(".box ul li a").click(function () {
  75.                  //2.进行js 的清除空白
  76.                  $(this).css("color","red").parent("li").siblings("li").find("a").css('color',"#fff");
  77.                  //3.进行text操作 text后加()里面可以改变字
  78.                  var textVal = $(this).text();
  79.                  var newVal = `<h2>${textVal}</h2>`;
  80.                  //4.text的封装
  81.                  $(".active").show().text(textVal);
  82.                  // 4.innerHTML的封装
  83.                  $('.active').show().html(newVal);
  84.  
  85.              })
  86.          })
  87.      </script>
  88.  
  89.  </body>
  90.  </html>

选项卡

10.html 的标签属性操作

attr 增加属性

removeattr 移出属性

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Document</title>
  6.      <style>
  7.          .tt{
  8.              color: red
  9.          }
  10.          .active{
  11.              color: green;
  12.          }
  13.      </style>
  14.  </head>
  15.  <body>
  16.      <div class="box">
  17.  
  18.      </div>
  19.  
  20.      <script src="jquery.js"></script>
  21.      <script>
  22.          $(function () {
  23.              //初始化操作
  24.  
  25.              // $('.box').html('<a href="http://www.baidu.com">百度一下</a>');
  26.  
  27.              <!--1.attr 进行html属性的添加 attr() 括号里面添加属性,多个属性用中括号表示-->
  28.              $("div").attr("class","bos");
  29.              console.log(    $("div").attr({name:"haha",color:"red"}));
  30.              //2.removeAttr 进行html属性的移出功能
  31.              $("div").attr({name:"haha",color:"red"});
  32.              $('div').removeAttr("color");
  33.  
  34.              $('.box').html('<a id="anchor"></a>');
  35.              $('#anchor').attr('href','http://www.baidu.com').text('百度一下');
  36.  
  37.              console.log($('#anchor').attr('id'));
  38.              $('#anchor').attr({
  39.                  title:'123',
  40.                  class:'tt'
  41.              });
  42.              $('body').click(function () {
  43.                  // $('#anchor').attr('class','active');
  44.                  $('#anchor').addClass('active');
  45.  
  46.                  // 移除多个类名
  47.                  $('#anchor').removeClass('active tt');
  48.  
  49.                  $('#anchor').removeAttr('title href');
  50.  
  51.              });
  52.  
  53.          })
  54.      </script>
  55.  </body>
  56.  </html>

html属性

11.控制元素显示隐藏

通过addClass removeClass   来增加标签属性

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Document</title>
  6.      <style>
  7.          .box{
  8.              width: 200px;
  9.              height: 200px;
  10.              background-color: red;
  11.          }
  12.          div.hidden{
  13.              display: none;
  14.          }
  15.      </style>
  16.  </head>
  17.  <body>
  18.      <button>隐藏</button>
  19.      <div class="box"></div>
  20.      <script src="jquery.js"></script>
  21.      <script>
  22.          $(function () {
  23.              /*
  24.              var isShow = true;
  25.              $('button').click(function(event) {
  26.                  if (isShow) {
  27.                      $('.box').addClass('hidden');
  28.                      isShow =false;
  29.                  }else{
  30.                      $('.box').removeClass('hidden');
  31.                      isShow = true;
  32.                  }
  33.  
  34.              });
  35.              */
  36.              $('button').click(function(event) {
  37.  
  38.                  $('.box').toggleClass('hidden');
  39.  
  40.              })
  41.          })
  42.      </script>
  43.  </body>
  44.  </html>

11.动画实现

toggle

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title></title>
  6.      <style>
  7.          .box{
  8.              width: 200px;
  9.              height: 200px;
  10.              background-color:red;
  11.          }
  12.      </style>
  13.  </head>
  14.  <body>
  15.  
  16.      <button id="btn">动画</button>
  17.      <div class="box"></div>
  18.      <script src="jquery.js">
  19.  
  20.      </script>
  21.      <script>
  22.  
  23.          $(function () {
  24.              $('#btn').click(function(event) {
  25.                  // $('.box').hide();
  26.  
  27.                  //toggle()
  28.                  $('.box').stop().toggle(1000);
  29.              });
  30.          })
  31.      </script>
  32.  </body>
  33.  </html>

toggle

12.选项卡的嵌套

通过jq 对象的eq 属性来操作

  1.  <!DOCTYPE html>
  2.  <!DOCTYPE html>
  3.  <html lang="en">
  4.  <head>
  5.      <meta charset="UTF-8">
  6.      <title></title>
  7.      <style>
  8.          *{
  9.              padding: 0;
  10.              margin: 0;
  11.          }
  12.          ul{
  13.              list-style:none;
  14.          }
  15.          a{
  16.              text-decoration: none;
  17.          }
  18.          .box{
  19.              width: 400px;
  20.              height: 300px;
  21.  
  22.          }
  23.          .box ul {
  24.              width: 100%;
  25.              overflow: hidden;
  26.          }
  27.          .box ul li{
  28.              float: left;
  29.              width: 50px;
  30.              height: 70px;
  31.              margin: 0 10px;
  32.              background-color: red;
  33.              text-align: center;
  34.              line-height: 70px;
  35.          }
  36.          a{
  37.              color: #fff;
  38.          }
  39.          .active{
  40.              width: 100%;
  41.              height: 100px;
  42.              background-color: green;
  43.              display: none;
  44.          }
  45.          .show{
  46.              display: block;
  47.          }
  48.      </style>
  49.  </head>
  50.  <body>
  51.      <button class="next">下一张</button>
  52.      <div class="box">
  53.          <ul>
  54.              <li>
  55.                  <a href="javascript:void(0);">张三</a>
  56.              </li>
  57.              <li>
  58.                  <a href="javascript:void(0);">李四</a>
  59.              </li>
  60.              <li>
  61.                  <a href="javascript:void(0);">王五</a>
  62.              </li>
  63.              <li>
  64.                  <a href="javascript:void(0);">赵六</a>
  65.              </li>
  66.          </ul>
  67.          <div class="active">
  68.  
  69.          </div>
  70.          <div class="active">
  71.  
  72.          </div>
  73.          <div class="active">
  74.  
  75.          </div>
  76.          <div class="active">
  77.  
  78.          </div>
  79.  
  80.      </div>
  81.  
  82.      <script src="jquery.js"></script>
  83.      <script>
  84.  
  85.          $(function () {
  86.  
  87.              var count = 0;
  88.              //当点击下一个的时候,控制的eq索引变化
  89.  
  90.              $('.next').click(function(event) {
  91.                  count++;
  92.                  //1.ul 下的 li 标签变色
  93.                  $('ul li').eq(count).css('backgroundColor','green').siblings('li').css('backgroundColor','red');
  94.                  //2.div 的active类 变色
  95.                  $('div.active').eq(count).addClass('show').html('abc').siblings('div.active').removeClass('show').html('');
  96.  
  97.              });
  98.  
  99.              //点击a标签的时候执行的操作
  100.              $('.box ul li a').click(function(event) {
  101.                  $(this).css('color','green').parent('li').siblings('li').find('a').css('color','#fff');
  102.  
  103.                  var textVal = $(this).text();
  104.                  var newVal = `<h1>${textVal}</h1>`
  105.                  // $('.active').show().text(textVal);
  106.  
  107.                  // index() 将返回列表中第一个元素相对于其同辈元素的位置
  108.                  console.log($(this).parent().index());
  109.                  var index = $(this).parent().index();
  110.  
  111.                  $('div.active').eq(index).addClass('show').html(newVal).siblings('div.active').removeClass('show').html('');
  112.  
  113.              });
  114.          })
  115.      </script>
  116.  
  117.  </body>
  118.  </html>

选项卡嵌套

jq序 选择器的更多相关文章

  1. JQ基本选择器

    JQ选择器采用CSS和Xpath选择器语法规范,满足用户在DOM中快速匹配元素或元素集合. 1.JQ支持CSS1.CSS2.CSS3.不同版本的所有选择器,而早期的很多浏览器并没有完全支持CSS3版本 ...

  2. js,jq,css选择器

    js获取节点: var chils= s.childNodes; //得到s的全部子节点 var par=s.parentNode; //得到s的父节点 var ns=s.nextSbiling; / ...

  3. JQuery（一）---- JQ的选择器，属性，节点，样式，函数等操作详解

    JQuery的基本概念 JQuery是一个javascript库,JQuery凭借着简洁的语法和跨平台的兼容性,极大的简化了js操作DOM.处理事件.执行动画等操作.JQuery强调的理念是:'wri ...

  4. jQ not()选择器 与 css3 :not( selector )选择器

    1.jQ  not() 2.css3 not  w3c在线演示地址  http://www.w3school.com.cn/tiy/t.asp?f=css_sel_not 总结: 注意两者还是有区别的 ...

  5. jq初始,选择器,事件,内容操作,样式操作

    jq操作页面文档http://jquery.cuishifeng.cn/ jq初始 <!DOCTYPE html> <html> <head> <meta c ...

  6. jq层次选择器

    二. 层次选择器 1. parent > child(直系子元素) $(document).ready(function () { // 选取div下的第一代span元素,将字体颜色设为红色 $ ...

  7. jq入门--选择器

    选择器是JQuery一大特色,所有的DOM操作.事件操作.Ajax操作都离不开选择器.熟练掌握JQuery的选择器,可以节省很多代码,很大程序上简化我们的脚本编程工作. JQuery的选择器很类似于样 ...

  8. 2018-08-27 jq筛选选择器

    筛选选择器:为了辅助选择器更简便.快速的找到元素: 1.过滤 eq(n) -> 第n个元素(从零开始) $('h1').eq(2) // 第三个h1 first() -> 第一个元素 la ...

  9. jq的选择器中带有特殊符号无法获取元素

    因项目需要,将元素id命名为数组(array[i].string) 使用jq去获取该id的元素时,返回的是个undefined.即jq获取不到该元素,因为该元素中的id含有特殊字符"[&qu ...

随机推荐

  1. c# WF 第10节 textbox 控件

    本节内容: 1:textbox 在哪里 2:textbox 的属性 1:textbox 在哪里 2:textbox 的属性 3:实例 实现如下: 步骤1 :7个label  2个textbox 步骤2 ...

  2. NG-ZORRO 使用相关

    Upload上传 import { Component, Input, Output, EventEmitter, Inject } from '@angular/core'; import { Nz ...

  3. ini_set（）

    ini_set ( string $varname , string $newvalue ) : string 设置指定配置选项的值.这个选项会在脚本运行时保持新的值,并在脚本结束时恢复. 参数 va ...

  4. BoW算法及DBoW2库简介

    由于在ORB-SLAM2中扩展图像识别模块,因此总结一下BoW算法,并对DBoW2库做简单介绍. 1. BoW算法 BoW算法即Bag of Words模型,是图像检索领域最常用的方法,也是基于内容的 ...

  5. Paper | One-to-Many Network for Visually Pleasing Compression Artifacts Reduction

    目录 故事 网络设计 网络前端 升采样中的平移-均值化 网络度量 训练 发表于2017年CVPR. 目标:JPEG图像去压缩失真. 主要内容: 同时使用感知损失.对抗损失和JPEG损失(已知量化间隔, ...

  6. vscode配置python环境-运行调试-windows环境

    官方文件介绍 https://code.visualstudio.com/docs/languages/python 准备: vscode下载安装 python3版本下载(安装时可以选择添加环境变量, ...

  7. Unity开发实战探讨-资源的加载释放最佳策略

    注:本文中用到的大部分术语和函数都是Unity中比较基本的概念,所以本文只是直接引用,不再详细解释各种概念的具体内容,若要深入了解,请查阅相关资料. Unity的资源陷阱 游戏资源的加载和释放导致的内 ...

  8. java、JavaScript获取微信用户信息登录优化方案

    1.获取微信用户信息要调用微信的好几个接口,再加上自己系统的接口就会变的很慢,影响用户体验,之前走过的弯路我就不赘述了,直接说新的方案. 2.第一步都是向微信发起获取用户code请求: 请求接口:ht ...

  9. python Lock、RLock

    Lock: 只能acquire一次,下一次acquire必须release后才能,不然会造成死锁 from threading import Lock total = 0 lock = Lock() ...

  10. 一个简单的利用 WebClient 异步下载的示例（四）

    接上一篇,我们继续优化它. 1. DownloadEntry 类 public class DownloadEntry { public string Url { get; set; } public ...