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 ...
随机推荐
- CF1225B1 TV Subscriptions (Easy Version)
CF1225B1 TV Subscriptions (Easy Version) 洛谷评测传送门 题目描述 The only difference between easy and hard vers ...
- MySQL 行溢出数据
MySQL 行溢出数据 MySQL 对一条记录占用的最大储存空间是有限制的,除了 BLOB 和 TEXT 类型之外,其他所有列 (不包括隐藏列和记录头信息) 占用的字节长度不能超过 65535 个字节 ...
- VS2017 Thrift编译出的Release版本的库调用报错LNK2001
在使用thrift的过程中, 当我使用完thrift debug版本编译出来的库调试完成后, 改成release版本的时候, 就出现了如下错误, 莫名其妙啊, 同一套代码, 那只能是编译库的时候设置和 ...
- 物联网架构成长之路(33)-EMQ数据存储到influxDB
一.前言 时隔一年半,技术变化特别快,学习也要跟上才行.以前写过EMQ数据转存问题,当时用了比较笨的方法,通过写插件的方式,把MQTT里面的数据发送到数据库进行存储.当时也是为了学习erlang和em ...
- python在字节流中对int24的转换
python在字节流中对int24的转换 概述 最近在写项目的过程中,需要对从串口中读取的数据进行处理,本来用C写完了,但是却一直拿不到正确的数据包,可能是因为自己太菜了.后来用了python重新写了 ...
- RStudio 不中断下载依赖包
修改下载方式:
- 使用jstack排查多线程死锁、阻塞
问题: 针对线上多线程死锁.阻塞,跑着跑着就卡住了 查看线上线程池的状态 jstack用于生成java虚拟机当前时刻的线程快照. 线程快照是当前java虚拟机内每一条线程正在执行的方法堆栈的集合,生成 ...
- vue-cli安装以及创建一个简单的项目(二)(vuex使用、发行一个简单的app)
1.vuex的使用 vuex是vue的状态管理中心,vuex来保存我们需要管理的状态值,值一旦被修改,所有引用该值的地方就会自动更新,常用于: 1.多个视图依赖同一状态(l例:菜单导航) 2.来自不同 ...
- nginx代理tcp请求
1.概述 ngx_stream_core_module 这个module在nginx1.90后开始支持.开启nginx的tcp代理支持--with-stream=dynamic --with-stre ...
- java架构之路（mysql底层原理）Mysql之Explain使用详解
上篇博客,我们详细的说明了mysql的索引存储结构,也就是我们的B+tree的变种,是一个带有双向链表的B+tree.那么我今天来详细研究一下,怎么使用索引和怎么查看索引的使用情况. 我们先来简单的建 ...