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序 选择器的更多相关文章
- JQ基本选择器
JQ选择器采用CSS和Xpath选择器语法规范,满足用户在DOM中快速匹配元素或元素集合. 1.JQ支持CSS1.CSS2.CSS3.不同版本的所有选择器,而早期的很多浏览器并没有完全支持CSS3版本 ...
- js,jq,css选择器
js获取节点: var chils= s.childNodes; //得到s的全部子节点 var par=s.parentNode; //得到s的父节点 var ns=s.nextSbiling; / ...
- JQuery(一)---- JQ的选择器,属性,节点,样式,函数等操作详解
JQuery的基本概念 JQuery是一个javascript库,JQuery凭借着简洁的语法和跨平台的兼容性,极大的简化了js操作DOM.处理事件.执行动画等操作.JQuery强调的理念是:'wri ...
- jQ not()选择器 与 css3 :not( selector )选择器
1.jQ not() 2.css3 not w3c在线演示地址 http://www.w3school.com.cn/tiy/t.asp?f=css_sel_not 总结: 注意两者还是有区别的 ...
- jq初始,选择器,事件,内容操作,样式操作
jq操作页面文档http://jquery.cuishifeng.cn/ jq初始 <!DOCTYPE html> <html> <head> <meta c ...
- jq层次选择器
二. 层次选择器 1. parent > child(直系子元素) $(document).ready(function () { // 选取div下的第一代span元素,将字体颜色设为红色 $ ...
- jq入门--选择器
选择器是JQuery一大特色,所有的DOM操作.事件操作.Ajax操作都离不开选择器.熟练掌握JQuery的选择器,可以节省很多代码,很大程序上简化我们的脚本编程工作. JQuery的选择器很类似于样 ...
- 2018-08-27 jq筛选选择器
筛选选择器:为了辅助选择器更简便.快速的找到元素: 1.过滤 eq(n) -> 第n个元素(从零开始) $('h1').eq(2) // 第三个h1 first() -> 第一个元素 la ...
- jq的选择器中带有特殊符号无法获取元素
因项目需要,将元素id命名为数组(array[i].string) 使用jq去获取该id的元素时,返回的是个undefined.即jq获取不到该元素,因为该元素中的id含有特殊字符"[&qu ...
随机推荐
- 【Eureka篇三】Eureka集群配置(5)
1. 新建子模块microservicecloud-eureka-7002(后面简称7002) 和 microservicecloud-eureka-7003(后面简称为7003),packaging ...
- 《CarbonData》
深度访谈:华为开源数据格式 CarbonData 项目,实现大数据即席查询秒级响应 Tina 阅读数:145842016 年 7 月 13 日 19:00 华为宣布开源了 CarbonDa ...
- Matlab各种拟合
作者:Z-HE链接:https://zhuanlan.zhihu.com/p/36103034来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 1) polyfit 代码 ...
- LG1393 动态逆序对
问题描述 LG1393 题解 本题可以使用\(\mathrm{CDQ}\)分治完成. 二维偏序 根据偏序的定义,逆序对是一个二维偏序,但这个二维偏序比较特殊: \(i>j,a_i<a_j\ ...
- 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 ...
- Sharding-JDBC:查询量大如何优化?
主人公小王入职了一家刚起步的创业公司,公司正在研发一款App.为了快速开发出能够投入市场进行宣传的版本,小王可是天天加班到很晚,忙了一段时间后终于把第一个版本赶出来了. 初期功能不多,表也不多,用的M ...
- 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 ...
- Kubernetes容器集群管理环境 - 完整部署(下篇)
在前一篇文章中详细介绍了Kubernetes容器集群管理环境 - 完整部署(中篇),这里继续记录下Kubernetes集群插件等部署过程: 十一.Kubernetes集群插件 插件是Kubernete ...
- 三、Spring注解之@Import
spring注解之@Import [1]@Import 参数value接收一个Class数组,将你传入的类以全类名作为id加入IOC容器中 比较简单,此处不做详细解释 [2]ImportSel ...
- 一位IT民工的十年风雨历程
距离2020年只有30天了,转眼毕业快10年. 回首自己,已三十有三,中年危机. 古人云三十而立,我却还在测试途中摸爬滚打. 创业,自由职业永远是一个梦,白日梦. 焦虑.迷茫.看不到希望. 这两天一场 ...