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 ...
随机推荐
- Jsoup获取部分页面数据失败 Unhandled content type. Must be text/*, application/xml, or application/xhtml+xml
用Jsoup在获取一些网站的数据时,起初获取很顺利,但是在访问某浪的数据是Jsoup报错,应该是请求头里面的请求类型(ContextType)不符合要求. 请求代码如下: private static ...
- luoguP3242 [HNOI2015]接水果
题意 考虑整体二分. 考虑路径\((x,y)\)被路径\((u,v)\)包含需要满足什么条件: 设\(dfn_x\)表示\(x\)的\(dfs\)序,\(low_x=dfn_x+size_x-1\), ...
- CF92B-Binary Number-（思维）
https://vjudge.net/problem/CodeForces-92B 题意:给一个长度为106的二进制数,有两种操作,第一种是除以2,第二种是末尾+1,以二进制运算,问这个二进制数最少几 ...
- H5视频、音频不能自动播放,Uncaught (in promise) DOMException: play() failed because the user didn't
错误原因:Chrome的autoplay政策在2018年4月做了更改. 解决办法: 第一步,在chrome浏览器中输入:chrome://flags/#autoplay-policy 第二步,在Aut ...
- springboot+shrio简易登录登出和用户权限认证。
源码:https://github.com/huangshengz/myJavaDemo本例子参考:https://www.cnblogs.com/HowieYuan/p/9259638.html 本 ...
- 「ZJOI2019」浙江省选
在八月来临前补完了zjoi2019 本来是想在八月前做完暑假作业的? 传送门 Description 给\(n\)条斜率为正的直线,询问每条直线是否在某处高度为前\(m\)名,如果是,询问最小排名 S ...
- k8s二进制部署
k8s二进制部署 1.环境准备 主机名 ip地址 角色 k8s-master01 10.0.0.10 master k8s-master02 10.0.0.11 master k8s-node01 1 ...
- LeetCode 557：反转字符串中的单词 III Reverse Words in a String III
公众号:爱写bug(ID:icodebugs) 给定一个字符串,你需要反转字符串中每个单词的字符顺序,同时仍保留空格和单词的初始顺序. Given a string, you need to reve ...
- redis命令之 ----List（列表）
BLPOP BRPOP BRPOPLPUSH LINDEX LINDEX key index 返回列表 key 中,下标为 index 的元素. 下标(index)参数 start 和 stop 都以 ...
- C# 中的浅拷贝与深拷贝
Ø 简介 在 C# 中分为两种数据类型,值类型和引用类型.我们知道,值类型之间赋值是直接将值赋值给另一个变量,两个变量值的改变都互不影响:而引用类型赋值则是将引用赋值给另一个变量,其中一个变量中的成 ...