前端-4
2017-12-04 本文已影响4人
CaesarsTesla
jQuery
基本语法:
$(selector).action()
选择器
基本选择器
// $('*').css('color','red') 所有的元素变成红色
// $('div').css('color','red') div标签
// $('.p_class').css('color','red') p_class类
// $('#div1').css('color','red') id为div1
//$('#div1,.p_class').css('color','red') id是div1 和 class是p_class
层级选择器
// $("#div2 p").css("color","red") #div2 下的所有p,' '代表后代
// $("#div2>p").css("color","red") >代表儿子
// $("#div2+p").css("color","red") +毗邻
//$("#div2~p").css("color","red") ~后边的兄弟
属性选择器
//属性选择器
// $('[id="div1"]').css('color','red')
// $('[alex]').css('color','red')
表单选择器
// $('[type="button"]').css('width','300')
// $(":button").css('width','300')这种写法只适用于input标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="div1">div1</div>
<p class="p_class">p</p>
<div id="div2">
<p>hello p2</p>
<div>
<p>
hello p3
</p>
</div>
</div>
<p>hello p4</p>
<p>hello p5</p>
<p>hello p6</p>
<div id="div3">
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
</ul>
</div>
<script src="jquery-3.2.1.js"></script>
<p alex="haha">pp</p>
<p alex="hehe">pp</p>
<input type="text">
<input type="button">
<script>
//基本选择器
// $('*').css('color','red') 所有的元素变成红色
// $('div').css('color','red') div标签
// $('.p_class').css('color','red') p_class类
// $('#div1').css('color','red') id为div1
// $('#div1,.p_class').css('color','red') id是div1 和 class是p_class
//层级选择器
// $("#div2 p").css("color","red") #div2 下的所有p,' '代表后代
// $("#div2>p").css("color","red") >代表儿子
// $("#div2+p").css("color","red") +毗邻
// $("#div2~p").css("color","red") ~后边的兄弟
//筛选器
// $('li:eq(2)').css("color","red") 选择第二个li
// $('li:even').css("color","red") 奇数行
// $('li:gt(1)').css("color","red") 行数大于一
// $('li:last').css("color","red")
//属性选择器
// $('[id="div1"]').css('color','red')
// $('[alex]').css('color','red')
// $('[type="button"]').css('width','300')
// $(":button").css('width','300')这种写法只适用于input标签
console.log($('#div1').html())
</script>
</body>
</html>
筛选器
过滤筛选器
$('li').eq(2).css('color','red')
查找筛选器
function show(self){
$(self).next().remoeClass("hide");
$(self).parent().siblings().children(".com").addClass("hide")
}
