jq序选择器

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 对象相互转换

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

     <ul>

         <li class="item">alex</li>

         <li>wusir</li>

         <li>ritian</li>

     </ul>

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

     <script>

         var datas = ["red","green","yellow"];

         //

         var item = document.getElementsByClassName("item")[0];

         console.log(item);

         1.将jquerry对象转化为js对象

         console.log($('li')[0])

         2.将js对象转化为jquerry对象

         console.log($(item))

         3.用css对jquerry对象进行属性操作 <1>只写一个css属性表示创建一个类class=item

         <2>写两个字符串表示进行属性修改<3>多个进行打包修改

         console.log($(item).css("color","blue").click(function () {

             alert(11);

         }))

      4.链式编程 : 每一个都是一个对象 jquerry 99%都是方法

         $(item).css("color","green").click(function() {

             alert(11);

         })

     </script>

 </body>

 </html>

转化

4.jquerry 高级选择器

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

     <div class="box">

         <p id="a">alex</p>

         <p>日</p>

         <p>天</p>

     </div>

     <p>wusir</p>

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

     <script>

         $(function () {

             //1.> 子子孙孙

             // $(".box>p").css("color","green");

             //2. 紧邻着的挨着的下一个兄弟元素

             $("#a+p").css("color","green")

         })

     </script>

 </body>

 </html>

> +

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

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

     <ul>

         <li>alex</li>

         <li>伊宁</li>

         <li>未来</li>

         <li>张菌康</li>

     </ul>

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

     <script>

         $(function () {

             //定义一个变量

             var i = 2;

             //eq (index)为第index的索引

             $(`ul li:eq(${i})`).css('color','red');

             $(`ul li:eq(${1})`).css("color","red");

             $('ul li:first').css('color','red');

             $('ul li:last').css('color','red');

         })

     </script>

 </body>

 </html>

过滤选择要``

6.属性选择器

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

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style>

         input[type='text']{

             border: none;

             outline: none;

             border: 1px solid red;

             width: 200px;

             height: 100px;

             font-size: 30px;

         }

     </style>

 </head>

 <body>

     <form action="">

         <input type="text" name='user' aaa='bbb' >

         <input type="password" name="pwd">

         <input type="submit">

     </form>

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

     <script>

         $(function () {

             console.log($('input[type=text]'))

         });

     </script>

 </body>

 </html>

属性选择器

7.筛选选择器

筛选出想要的

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

     <div class="father">55

         <p>alex</p>

         <a href="#">日天</a>

         <span>村长</span>

         <div class="g">55

             <span>一宁</span>

         </div>

     </div>

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

     <script>

         $(function () {

             1.查找指定元素.father的所有后代元素g

             console.log($(".father").find(".g"));

             $(".father").find(".g").css("color","green")

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

                 //this这里已经封装了标记为专门的这个

                 console.log(this);

                 $(this).css("color","red");

             })

             2.find 亲儿子和孙子哦

         $(".father").find("span").css("color","green")

             find 重孙子哦

             $('.father').find('.g>span').click(function () {

                 console.log(this);

             });

             3.children亲儿子 找到的是子带的span 村长

             $(".father").children("span").css("color","green")

          4.parent ()查找父元素

             $(".g span").parent().css("color","red")

         })

     </script>

 </body>

 </html>

筛选 find children parent

8.siblings

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

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

     <ul>

         <li>尚宏运</li>

         <li>刘宁谦</li>

         <li>吕星星</li>

         <li>赵挺</li>

     </ul>

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

     <script>

         $(function () {

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

                 //这里的this是js里的 需要转换为jq对象

                 //这里siblings是筛选除了li标签的所有兄弟,在这里除了自己的所有兄弟li

                 $(this).css("color","red").siblings('li').css("color","blue");

             })

         })

     </script>

 </body>

 </html>

删选器 siblings

9.选项卡

jquerry 版

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

                 *{

             padding: 0;

             margin: 0;

         }

         ul{

             list-style:none;

         }

         a{

             text-decoration: none;

         }

         .box{

             width: 400px;

             height: 300px;

         }

         .box ul {

             width: 100%;

             overflow: hidden;

         }

         .box ul li{

             float: left;

             width: 50px;

             height: 70px;

             margin: 0 10px;

             background-color: red;

             text-align: center;

             line-height: 70px;

         }

         a{

             color: #fff;

         }

         .active{

             width: 100%;

             height: 100px;

             background-color: green;

             display: none;

         }

     </style>

 </head>

 <body>

     <div class="box">

             <ul>

             </ul>

             <div class="active">

             </div>

     </div>

     <form action="">

         <input type="text" value="123">

     </form>

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

     <script>

         $(function () {

             $(".box ul").html( `<li>

                 <a href="javascript:void(0);">张三</a>

             </li>

             <li>

                 <a href="javascript:void(0);">李四</a>

             </li>

             <li>

                 <a href="javascript:void(0);">王五</a>

             </li>

             <li>

                 <a href="javascript:void(0);">赵六</a>

             </li>`);

             //1.单击 a 标签

             $(".box ul li a").click(function () {

                 //2.进行js 的清除空白

                 $(this).css("color","red").parent("li").siblings("li").find("a").css('color',"#fff");

                 //3.进行text操作 text后加()里面可以改变字

                 var textVal = $(this).text();

                 var newVal = `<h2>${textVal}</h2>`;

                 //4.text的封装

                 $(".active").show().text(textVal);

                 // 4.innerHTML的封装

                 $('.active').show().html(newVal);

             })

         })

     </script>

 </body>

 </html>

选项卡

10.html 的标签属性操作

attr 增加属性

removeattr 移出属性

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style>

         .tt{

             color: red

         }

         .active{

             color: green;

         }

     </style>

 </head>

 <body>

     <div class="box">

     </div>

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

     <script>

         $(function () {

             //初始化操作

             // $('.box').html('<a href="http://www.baidu.com">百度一下</a>');

             <!--1.attr 进行html属性的添加 attr() 括号里面添加属性,多个属性用中括号表示-->

             $("div").attr("class","bos");

             console.log(    $("div").attr({name:"haha",color:"red"}));

             //2.removeAttr 进行html属性的移出功能

             $("div").attr({name:"haha",color:"red"});

             $('div').removeAttr("color");

             $('.box').html('<a id="anchor"></a>');

             $('#anchor').attr('href','http://www.baidu.com').text('百度一下');

             console.log($('#anchor').attr('id'));

             $('#anchor').attr({

                 title:'123',

                 class:'tt'

             });

             $('body').click(function () {

                 // $('#anchor').attr('class','active');

                 $('#anchor').addClass('active');

                 // 移除多个类名

                 $('#anchor').removeClass('active tt');

                 $('#anchor').removeAttr('title href');

             });

         })

     </script>

 </body>

 </html>

html属性

11.控制元素显示隐藏

通过addClass removeClass 来增加标签属性

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style>

         .box{

             width: 200px;

             height: 200px;

             background-color: red;

         }

         div.hidden{

             display: none;

         }

     </style>

 </head>

 <body>

     <button>隐藏</button>

     <div class="box"></div>

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

     <script>

         $(function () {

             /*

             var isShow = true;

             $('button').click(function(event) {

                 if (isShow) {

                     $('.box').addClass('hidden');

                     isShow =false;

                 }else{

                     $('.box').removeClass('hidden');

                     isShow = true;

                 }

             });

             */

             $('button').click(function(event) {

                 $('.box').toggleClass('hidden');

             })

         })

     </script>

 </body>

 </html>

11.动画实现

toggle

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title></title>

     <style>

         .box{

             width: 200px;

             height: 200px;

             background-color:red;

         }

     </style>

 </head>

 <body>

     <button id="btn">动画</button>

     <div class="box"></div>

     <script src="jquery.js">

     </script>

     <script>

         $(function () {

             $('#btn').click(function(event) {

                 // $('.box').hide();

                 //toggle()

                 $('.box').stop().toggle(1000);

             });

         })

     </script>

 </body>

 </html>

toggle

12.选项卡的嵌套

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

 <!DOCTYPE html>

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title></title>

     <style>

         *{

             padding: 0;

             margin: 0;

         }

         ul{

             list-style:none;

         }

         a{

             text-decoration: none;

         }

         .box{

             width: 400px;

             height: 300px;

         }

         .box ul {

             width: 100%;

             overflow: hidden;

         }

         .box ul li{

             float: left;

             width: 50px;

             height: 70px;

             margin: 0 10px;

             background-color: red;

             text-align: center;

             line-height: 70px;

         }

         a{

             color: #fff;

         }

         .active{

             width: 100%;

             height: 100px;

             background-color: green;

             display: none;

         }

         .show{

             display: block;

         }

     </style>

 </head>

 <body>

     <button class="next">下一张</button>

     <div class="box">

         <ul>

             <li>

                 <a href="javascript:void(0);">张三</a>

             </li>

             <li>

                 <a href="javascript:void(0);">李四</a>

             </li>

             <li>

                 <a href="javascript:void(0);">王五</a>

             </li>

             <li>

                 <a href="javascript:void(0);">赵六</a>

             </li>

         </ul>

         <div class="active">

         </div>

         <div class="active">

         </div>

         <div class="active">

         </div>

         <div class="active">

         </div>

     </div>

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

     <script>

         $(function () {

             var count = 0;

             //当点击下一个的时候,控制的eq索引变化

             $('.next').click(function(event) {

                 count++;

                 //1.ul 下的 li 标签变色

                 $('ul li').eq(count).css('backgroundColor','green').siblings('li').css('backgroundColor','red');

                 //2.div 的active类 变色

                 $('div.active').eq(count).addClass('show').html('abc').siblings('div.active').removeClass('show').html('');

             });

             //点击a标签的时候执行的操作

             $('.box ul li a').click(function(event) {

                 $(this).css('color','green').parent('li').siblings('li').find('a').css('color','#fff');

                 var textVal = $(this).text();

                 var newVal = `<h1>${textVal}</h1>`

                 // $('.active').show().text(textVal);

                 // index() 将返回列表中第一个元素相对于其同辈元素的位置

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

                 var index = $(this).parent().index();

                 $('div.active').eq(index).addClass('show').html(newVal).siblings('div.active').removeClass('show').html('');

             });

         })

     </script>

 </body>

 </html>

选项卡嵌套

jq序 选择器

相关文章