1、基础知识
js入口函数指的是:window.onload = function() {};
区别一:书写个数不同
Js入口函数只能出现一次,出现多次会存在事件覆盖的问题。
jQuery的入口函数,可以出现任意多次,并不会存在事件覆盖问题。
区别二:执行时机不同
Js入口函数是在所有的文件资源加载完成后,才执行。这些文件资源包括:页面文档、外部的js文件、外部的css文件、图片等。
jQuery的入口函数,是在文档加载完成后,就执行。文档加载完成指的是:DOM树加载完成后,就可以操作DOM了,不用等到所有的外部资源都加载完成。
文档加载的顺序:从上往下,边解析边执行。
2、选择器
基本选择器(重点)
符号(名称) | 说明 | 用法 |
# | Id选择器 | $(“#btnShow”).css(“color”, “red”); 选择id为btnShow的一个元素(返回值为jQuery对象,下同) |
. | 类选择器 | $(“.liItem”).css(“color”, “red”); 选择含有类liItem的所有元素 |
element | 标签选择器 | $(“li”).css(“color”,“red”); 选择标签名为li的所有元素 |
<body>
<divid="div1"class="box">div</div>
<script>
//document.getElementById('div1');
//document.getElementsByTagName('div');
//getByClass(document,'box');
//$('#div1').css('background','red');
//$('div').css('background','red');
$('.box').css('background','red');
</script>
</body>
1.7.2 层级选择器(重点)、基本过滤选择器
符号(名称) | 说明 | 用法 | |
层级选择器 | |||
空格 | 后代选择器 | $(“#j_wrap li”).css(“color”, “red”); 选择id为j_wrap的元素的所有后代元素li | |
> | 子代选择器 | $(“#j_wrap > ul > li”).css(“color”, “red”); 选择id为j_wrap的元素的所有子元素ul的所有子元素li | |
基本过滤选择器 | |||
:eq(index) | 选择匹配到的元素中索引号为index的一个元素,index从0开始 | $(“li:eq(2)”).css(“color”, ”red”); 选择li元素中索引号为2的一个元素 | |
:odd | 选择匹配到的元素中索引号为奇数的所有元素,index从0开始 | $(“li:odd”).css(“color”,“red”); 选择li元素中索引号为奇数的所有元素 | |
:even | 选择匹配到的元素中索引号为偶数的所有元素,index从0开始 | $(“li:odd”).css(“color”,“red”); 选择li元素中索引号为偶数的所有元素 |
1.7.3 筛选选择器(方法)(重点)
符号(名称) | 说明 | 用法 |
find(selector) | 查找指定元素的所有后代元素(子子孙孙) | $(“#j_wrap”).find(“li”).css(“color”, “red”); 选择id为j_wrap的所有后代元素li |
children() | 查找指定元素的直接子元素(亲儿子元素) | $(“#j_wrap”).children(“ul”).css(“color”, “red”); 选择id为j_wrap的所有子代元素ul |
siblings() | 查找所有兄弟元素(不包括自己) | $(“#j_liItem”).siblings().css(“color”, “red”); 选择id为j_liItem的所有兄弟元素 |
parent() | 查找父元素(亲的) | $(“#j_liItem”).parent(“ul”).css(“color”, “red”); 选择id为j_liItem的父元素 |
eq(index) | 查找指定元素的第index个元素,index是索引号,从0开始 | $(“li”).eq(2).css(“color”, “red”); 选择所有li元素中的第二个 |
3、jq的设计思想
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/>
<title>无标题文档</title>
<scripttype="text/javascript"src="jquery-1.10.1.min.js"></script>
<script>
//方法函数化:
/*window.onload = function(){};
$(function(){});
function $(){}
innerHTML = 123;
html(123)
function html(){}
onclick = function(){};
click(function(){})
function click(){}*/
/*window.onload = function(){
var oDiv = document.getElementById('div1');
oDiv.onclick = function(){
alert( this.innerHTML );
};
};*/
$(function(){
//var oDiv = $('#div1');
$('#div1').click(function(){
alert( $(this).html());
});
});
$('ul').children().css('background','red');
</script>
</head>
<body>
<divid="div1">div</div>
</body>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/>
<title>无标题文档</title>
<scripttype="text/javascript"src="jquery-1.10.1.min.js"></script>
<script>
//方法函数化:
/*window.onload = function(){};
$(function(){});
function $(){}
innerHTML = 123;
html(123)
function html(){}
onclick = function(){};
click(function(){})
function click(){}*/
/*window.onload = function(){
var oDiv = document.getElementById('div1');
oDiv.onclick = function(){
alert( this.innerHTML );
};
};*/
$(function(){
//var oDiv = $('#div1');
$('#div1').click(function(){
alert( $(this).html());
});
});
$('ul').children().css('background','red');
</script>
</head>
<body>
<divid="div1">div</div>
</body>
<script>
$(function(){
$('#div1').click(function(){
//alert( $(this).html() ); //jq的写法
//alert( this.innerHTML ); //js的写法
alert( $(this).innerHTML );//错误的
alert(this.html());//错误的
});
});
</script>
<script>
$(function(){
/*var oDiv = $('#div1');
oDiv.html('hello');
oDiv.css('background','red');
oDiv.click(function(){
alert(123);
});*/
$('#div1').html('hello').css('background','red').click(function(){
alert(123);
});
});
</script>
<script>
$(function(){
//oDiv.innerHTML = 'hello'; //赋值
//alert( oDiv.innerHTML ); //取值
//$('#div1').html('hello'); //赋值
//alert( $('#div1').html() ); //取值
css('width','200px')
css('width')
});
</script>
<script>
$(function(){
//alert( $('li').html() ); //当一组元素的时候,取值是一组中的第一个
$('li').html('hello');//当一组元素的时候,赋值是一组中的所有元素
});
</script>
4、jq常用的方法
<script>
$(function(){
//alert($('div').attr('title'));
$('div').attr('title','456');
$('div').attr('class','box');
});
</script>
</head>
<body>
<divtitle="123">div</div>
</body>
<script>
//filter : 过滤
//not : filter的反义词
$(function(){
//$('div').filter('.box').css('background','red');
$('div').not('.box').css('background','red');
});
</script>
</head>
<body>
<divclass="box">div1</div>
<div>div2</div>
</body>
<script>
//has : 包含
$(function(){
//$('div').has('span').css('background','red');
//$('div').has('.box').css('background','red');
$('div').filter('.box').css('background','red');
});
</script>
</head>
<body>
<div>div1<spanclass="box">span</span></div>
<divclass="box">div2</div>
</body>
<scripttype="text/javascript"src="jquery-1.10.1.min.js"></script>
<script>
$(function(){
$('div').next().css('background','red');
});
</script>
</head>
<body>
<div>div</div>
<span>span</span>
<p>p</p>
</body>
<script>
$(function(){
//$('div').find('h2').css('background','red');
$('div').find('h2').eq(1).css('background','red');
});
</script>
</head>
<body>
<div>
<h3>h3</h3>
<h2>h2</h2>
<h3>h3</h3>
<h3>h3</h3>
<h2>h2</h2>
<h2>h2</h2>
</div>
<h2>h2</h2>
</body>
<script>
$(function(){
alert( $('#h').index());//索引就是当前元素在所有兄弟节点中的位置
});
</script>
</head>
<body>
<div>
<h3>h3</h3>
<h2>h2</h2>
<h3>h3</h3>
<h3id="h">h3</h3>
<h2>h2</h2>
<h2>h2</h2>
</div>
<h2>h2</h2>
</body>
<scripttype="text/javascript"src="jquery-1.10.1.min.js"></script>
<script>
/*window.onload = function(){
var oDiv = document.getElementById('div1');
var aInput = oDiv.getElementsByTagName('input');
var aCon = oDiv.getElementsByTagName('div');
for(var i=0;i<aInput.length;i++){
aInput[i].index = i;
aInput[i].onclick = function(){
for(var i=0;i<aInput.length;i++){
aInput[i].className = '';
aCon[i].style.display = 'none';
}
this.className = 'active';
aCon[this.index].style.display = 'block';
};
}
};*/
$(function(){
$('#div1').find('input').click(function(){
$('#div1').find('input').attr('class','');
$('#div1').find('div').css('display','none');
$(this).attr('class','active');
$('#div1').find('div').eq( $(this).index()).css('display','block');
});
});
</script>
</head>
<body>
<divid="div1">
<inputclass="active"type="button"value="1"/>
<inputtype="button"value="2"/>
<inputtype="button"value="3"/>
<divstyle="display:block">111111</div>
<div>222222</div>
<div>333333</div>
</div>
</body>
选择器分类:
- 基本选择器
- 层次选择器
- 过滤选择器
- 简单过滤选择器
- 内容过滤选择器
- 可见性过滤选择器
- 属性过滤选择器
- 子元素过滤选择器
- 表单对象属性过滤选择器
- 表单选择器
$("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素
$("div") 选择所有的div标签元素,返回div元素数组
$(".myClass") 选择使用myClass类的css的所有元素
$("*") 选择文档中的所有的元素,可以运用多种的选择方式进行联合选择:例如$("#myELement,div,.myclass")
$('div,span,p')
$("form input") 选择所有的form元素中的input元素
$("#main > *") 选择id值为main的所有的子元素
$("label + input") 选择所有的label元素的下一个input元素节点,经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素
$("#prev ~ div") 同胞选择器,该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签
基本过滤选择器:
$("tr:first") 选择所有tr元素的第一个
$("tr:last") 选择所有tr元素的最后一个
$("input:not(:checked) + span")
过滤掉:checked的选择器的所有的input元素
$("tr:even") 选择所有的tr元素的第0,2,4... ...个元素(注意:因为所选择的多个元素时为数组,所以序号是从0开始)
$("tr:odd") 选择所有的tr元素的第1,3,5... ...个元素
$("td:eq(2)") 选择所有的td元素中序号为2的那个td元素
$("td:gt(4)") 选择td元素中序号大于4的所有td元素
$("td:lt(4)") 选择td元素中序号小于4的所有的td元素
$(":header") 选择h1、h2、h3之类的
$("div:animated") 选择正在执行动画效果的元素
内容过滤选择器:
$("div:contains('John')") 选择所有div中含有John文本的元素
$("td:empty") 选择所有的为空(也不包括文本节点)的td元素的数组
$("div:has(p)") 选择所有含有p标签的div元素
$("td:parent") 选择所有的以td为父节点的元素数组
可视化过滤选择器:
$("div:hidden") 选择所有的被hidden的div元素
$("div:visible") 选择所有的可视化的div元素
属性过滤选择器:
$("div[id]") 选择所有含有id属性的div元素
$("input[name='newsletter']") 选择所有的name属性等于'newsletter'的input元素
$("input[name!='newsletter']") 选择所有的name属性不等于'newsletter'的input元素
$("input[name^='news']") 选择所有的name属性以'news'开头的input元素
$("input[name$='news']") 选择所有的name属性以'news'结尾的input元素
$("input[name*='man']") 选择所有的name属性包含'news'的input元素 masn smanas
$("input[id][name$='man']") 可以使用多个属性进行联合选择,该选择器是得到所有的含有id属性并且那么属性以man结尾的元素
子元素过滤选择器:
$("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n + 1)")
$("div span:first-child") 返回所有的div元素的第一个子节点的数组
$("div span:last-child") 返回所有的div元素的最后一个节点的数组
$("div button:only-child") 返回所有的div中只有唯一一个子节点的所有子节点的数组
表单元素过滤选择器:
$(":enabled") 选择所有的可操作的表单元素
$(":disabled") 选择所有的不可操作的表单元素
$(":checked") 选择所有的被checked的表单元素
$("select option:selected") 选择所有的select 的子元素中被selected的元素
$(":input") 选择所有的表单输入元素,包括input, textarea, select 和 button
$(":text") 选择所有的text input元素
$(":password") 选择所有的password input元素
$(":radio") 选择所有的radio input元素
$(":checkbox") 选择所有的checkbox input元素
$(":submit") 选择所有的submit input元素
$(":image") 选择所有的image input元素
$(":reset") 选择所有的reset input元素
$(":button") 选择所有的button input元素
$(":file") 选择所有的file input元素
$(":hidden") 选择所有类型为hidden的input元素或表单的隐藏域
1、基本选择器和部分过滤选择器的使用类似与我们在css和css3中的一些用法,比如#id .class :first ;
2、层次选择器类似与hbuilder的快速打代码的功能,但是有几个特殊的比如 + ~ 是和hbuilder不同的 ;
3、过滤选择器中的大部分在某种程度上类似 div.class的css写法 ,都是双重条件;
4、表单选择器是省略了 input 的过滤选择器。