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序 选择器的更多相关文章

  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. 【Eureka篇三】Eureka集群配置(5)

    1. 新建子模块microservicecloud-eureka-7002(后面简称7002) 和 microservicecloud-eureka-7003(后面简称为7003),packaging ...

  2. 《CarbonData》

      深度访谈:华为开源数据格式 CarbonData 项目,实现大数据即席查询秒级响应   Tina 阅读数:145842016 年 7 月 13 日 19:00   华为宣布开源了 CarbonDa ...

  3. Matlab各种拟合

    作者:Z-HE链接:https://zhuanlan.zhihu.com/p/36103034来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 1) polyfit 代码 ...

  4. LG1393 动态逆序对

    问题描述 LG1393 题解 本题可以使用\(\mathrm{CDQ}\)分治完成. 二维偏序 根据偏序的定义,逆序对是一个二维偏序,但这个二维偏序比较特殊: \(i>j,a_i<a_j\ ...

  5. Codeforces Round #596 (Div. 2, based on Technocup 2020 Elimination Round 2) F. Tree Factory 构造题

    F. Tree Factory Bytelandian Tree Factory produces trees for all kinds of industrial applications. Yo ...

  6. Sharding-JDBC:查询量大如何优化?

    主人公小王入职了一家刚起步的创业公司,公司正在研发一款App.为了快速开发出能够投入市场进行宣传的版本,小王可是天天加班到很晚,忙了一段时间后终于把第一个版本赶出来了. 初期功能不多,表也不多,用的M ...

  7. 1+X证书Web前端开发HTML专项练习

    1 . HTML5 之前的 HTML 版本是? A.HTML 4.01 B.HTML 4 C.HTML 4.1 D.HTML 4.9 2 . HTML5 的正确 doctype 是? A.<!D ...

  8. Kubernetes容器集群管理环境 - 完整部署(下篇)

    在前一篇文章中详细介绍了Kubernetes容器集群管理环境 - 完整部署(中篇),这里继续记录下Kubernetes集群插件等部署过程: 十一.Kubernetes集群插件 插件是Kubernete ...

  9. 三、Spring注解之@Import

    spring注解之@Import [1]@Import ​ 参数value接收一个Class数组,将你传入的类以全类名作为id加入IOC容器中 ​ 比较简单,此处不做详细解释 [2]ImportSel ...

  10. 一位IT民工的十年风雨历程

    距离2020年只有30天了,转眼毕业快10年. 回首自己,已三十有三,中年危机. 古人云三十而立,我却还在测试途中摸爬滚打. 创业,自由职业永远是一个梦,白日梦. 焦虑.迷茫.看不到希望. 这两天一场 ...