新增选择器
了解
1、document.querySlector()
2、document.querySlectorAll()
jquery
兼容问题已经封装好了。所以对于兼容问题，直接调用即可。
1.x支持低版本
2.x 3.x不支持低版本
jquery加载
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1</title>
<script type="text/javascript" src=" "></script>
<script type="text/javascript" >
window.onload = function(){
}
// <!-- 打印元素里面包含内容 innerHTML-->
$(docoument).ready(function(){
var $div= $('#div');
// <!-- jq里面查找元素可加$ -->
alert('jp'+$div.html())
// 面试题：因为window是页面渲染（文字大小，背景，css等）完在执行。jq把页面所以节点（比如div快，标签）加载完就可以了，不用渲染。所以jq边角快。
}）
// <!-- 简写 -->
$(function(){
// <!-- #div直接写样式 -->
var $div= $('#div');
alert('jp'+$div.html())
// html里面写参数就是写
})
</script>
</head>
<body>
<div id="div">11111</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery选择器</title>
<script type="text/javascript" src=" "></script>
<script type="text/javascript" >
$(function(){
$('#div').css（{color:'pink'}）;
$('.box').css（{fontSize:'31px'}）;
$('.list').css（{background:'green',color:'#fff',fontSize:'20px'}）;
// 因为不是频繁改样式所以使用CSS。频繁变换的还是用Jq
})
</script>
</head>
<body>
<div id="div">这是div元素1</div>
<div class="box">这是div元素2</div>
<ul class="list">
<li>1</li>
<li>2</li>
</ul>
</body>
</html>
('div').prev('p'); //选择div元素前面的第一个p元素('div').next('p'); //选择div元素后面的第一个p元素
('div').closest('form'); //选择离div最近的那个form父元素('div').parent(); //选择div的父元素
$('div').children(); //选择div的所有子元素
('div').siblings(); //选择div的同级元素('div').find('.myClass'); //选择div内的class等于myClass的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器转移</title>
<script type="text/javascript" src=" "></script>
<script type="text/javascript" >
$(function(){
$('#div').next（）.css（{color:'pink'}）;
// div的下一个元素样式改变
$('#div').nextAll（'p'）.css（{color:'pink'}）;
// 修改div后面所有P标签的元素
})
</script>
</head>
<body>
<div id="div">这是div元素1</div>
<div >这是div元素2</div>
<p>这是一个p元素</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器转移</title>
<script type="text/javascript" src=" "></script>
<script type="text/javascript" >
$(function(){
// 设置他父亲的元素的样式
$('span').parent（）.css（{color:'pink'}）;
})
$(function(){
// 设置他父亲的元素的样式
$('span').parent（）.parent（.css（{color:'pink'}）;
// 选择离他最近的父元素div
$('span').closest('div').css（{color:'pink'}）;
// 直接选择li 回不到父集
$('.list li').closest('div').css（{color:'pink'}）;
// 先获取ul
$('.list').children().css（{color:'pink'}）.end().css({
background:'sd'
});
// end()回到.list ul身上
$('.list2 li:eq(2)').css({
background: 'red',
property2: 'value2'
}).siblings().css({
background: 'vye',
property2: 'value2'
});
// siblings('selector')同级的兄弟变色，除了自己。
$('#div2').find('.link2').css({
property1: 'value1',
property2: 'value2'
});
// 查找div2下面的link2的元素。
})
</script>
</head>
<body>
<div>
<a href="#">vvv</a>
<span class="span1">span</span>
</div>
<div>
<a href="#">
<span class="span">span</span>
</a>
</div>
<ul class="list1">
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
<ul class="list2">
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
<div id="div2">11
<p>
<a href="#" class=".link2"></a>
</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JQ样式 </title>
<style type="text/css">
.big{
background-color: red;
}
</style>
<script type="text/javascript" src=" "></script>
<script type="text/javascript" >
$(function(){
// 读样式 不写即读
alert($('div').parent（）.css（'fontSize'）);
// 写入样式
alert($('div').parent（）.css（{background:'red'}）);
// 增加行间样式
alert($('div').addClass('class_name')
// 减少行间样式 删除多个
alert($('div').addClass('div1 big')
})
</script>
</head>
<body>
<div class="div1">
div元素
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JQ样式 </title>
.box{
width:11px;
}
.sty{
width:11px;
}
<script type="text/javascript" src=" "></script>
<script type="text/javascript" >
$(function(){
//
$('#div').click(function() {
/* Act on the event */
// 重复切换删除样式
$('box').toggleClass('sty');
});
})
</script>
</head>
<body>
<input type="button" value='切换' id="btn">
<br><br>
<div class="box"></div>
<!-- <div class="div1">
div元素
</div>
-->
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JQ索引值 </title>
.list li{
width:11px;
}
<script type="text/javascript" src=" "></script>
<script type="text/javascript" >
$(function(){
$('.list li').click(function() {
/* Act on the event */
alert(this.innerHtml)
// 原生对象
// 点谁 对象就打印谁
alert($(this).html())
// jq方法
alert($(this).index())
// 获取索引值 0开始
})
</script>
</head>
<body>
<ul class="list">
<li>1</li>
</ul>
</body>
</html>
JQ选项卡 x
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JQ选项卡 </title>
<!-- .list li{
width:11px;
} -->
<script type="text/javascript" src=" "></script>
<script type="text/javascript" >
$(function(){
$('#btn input').click(function() {
/* Act on the event */
alert($(this).addClass('class_name').siblings('selector').removeClass('cyur')
})
</script>
</head>
<body>
<div class="btns" id="btns">
<input type="button" value="tab01" class="cur">
<input type="button" value="tab02">
<input type="button" value="tab03">
</div>
<div class="contents" id="contents">
<div class="active">tab文字内容一</div>
<div>tab文字内容二</div>
<div>tab文字内容三</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JQ属性 </title>
<!-- .list li{
width:11px;
} -->
<script type="text/javascript" src=" "></script>
<script type="text/javascript" >
$(function(){
$('#btn input').click(function() {
// 读
alert($('.div').html());
// html（）读取标签中内容
// 写
$('.div').html('<<a href="#"></a>')
// 写
$('.div').attr({
title:'ds'，
id:'div01'
})
// 读
alert($('.div').attr('class'))
var $src = $(#img1).attr('src');
// 读属性 判断多选框是否选择上
alert($('.div').prop('checked'))
$(‘#checked’).prop({checked：true}});
// prop是用来返回bool值
// attr返回其他值
// 纯文本
alert（$('.box2').text()）
})
</script>
</head>
<body>
<div class="div" > 这是div</div>
<img src="ss" alt="" id="img1">
</body>
</html>
网友评论