Jquery回顾(1)

2018-06-11

1.循环遍历：

1
2
3

$('obj').each(function(index,ele){
	//函数体
})

有趣的是js中的循环遍历方法比如forEach()的参数为① ele ② index，而jq中循环遍历方法比如each()、filter()、not()的参数为① index ② ele 刚好调换

2.添加css样式

1	$('obj').css({background:green;border:1px solid #000;})

或

1	$('obj').css('color','red')

3.选择元素

(1)$()里面和css选择一样，注意对选择出的一组元素，一起处理，省略循环，这里在js中是不允许的
(2)里面可以写css选择器、$、原生dom、jquery对象、null/undefined、函数function(){}、selector/content等
(3)jquery特有选择规则(选择出来的是jquery对象)
eg:

$('ul>li:first');
$('ul>li:eq(2)');
$('ul>li:odd/even');//odd是奇数，even是偶数
//也可以写成$('ul>li').first()其他相同

(4)filter筛选
eg:

$('li').filter(function(index){
	return index%2 == 0;
	}).css('background',red);

	//筛选下标为偶数的li设置背景颜色为红色

(5)not筛选：语法与filter完全相同，但筛选规则完全相反，即筛选不满足条件的
(6)has筛选:找有某项子级的父元素，不一定是直接子元素，有就行
eg:

1	$('li').has('span').css('color','red'); //这里筛选的是子级有span标签的<li>标签，注意是<li>标签

(7)find筛选：被找到的元素本身
eg:

1	$('li').find('span').css('color','red');

(8)eq筛选：选择具体下标的元素
(9)is筛选：是就返回true，不是返回false
eg:

1	$('li').eq(4).is('.demo');//判断下标是4的li是不是class为demo的

D1:对于selector/content的解释

eg:

1	$('span','div').css('background','red')

目的在于选择span，什么样的span呢？在div这个上下文之内的span都可以

D2:对于函数function的解释

1
2
3

$(function(){
	console.log(666);
	})

上面的代码会立刻执行打印到控制台

D2.Q1：提出一个问题，以下代码的执行顺序是什么，为什么

eg1:

window.onload = function(){
	console.log(777)
}
$(function(){
	console.log(666);
	})

	//答案：先输出777，再输出666，难道是因为777写在上面了？我们继续看

eg2:

$(function(){
	console.log(666);
	})
window.onload = function(){
	console.log(777)
}

//答案：仍然先输出777，再输出666

D2.A1:新版本的jquery将$()中的函数的执行顺序调整到window.onload之后执行了，$(function(){})中调用了jq自己定义的ready方法，以下两种方法没有区别，谁写在上边谁先执行，但都在window.onload之后

$().ready(function(){
	console.log(888)
	})
$(function(){
	console.log(666)
	})
	//先输出888，再输出666，若调换顺序，则先输出666，再输出888

4.jQuery函数写法

当js和jq同时使用时需注意，只有js对象可以调用js方法，只有jq对象可以调用jq方法，交叉调用是不可以的，因此有些时候需要将js对象转变为jq对象，有时候也需要将jq对象转变为js对象

[1]jquery dom元素方法——get()方法：将jq对象转变为js对象，返回dom

1	$(selector).get(index)

[2].取值赋值函数统一性

html();text();css();attr();prop();
以上函数如果传值，即为赋值，若不传值，即为取值
css()取值相当于getComputed,赋值相当于dom.style.xxx，css()赋值赋一组，取值取一个(第一个颜色会在内部转换成rgb)

attr()函数主要依赖的是Element对象中getAttribute()和setAttribute()两个方法。
prop()函数主要依赖的则是js原生对象属性获取和设置方式
jQuery认为：attribute的checked、selected、disabled就是表示该属性初始状态的值，property的checked、selected、disabled才表示该属性实时状态的值(true/false)

[3].dom操作

(1)$(obj).next()下一个兄弟节点
(2)$(obj).prev()上一个兄弟节点
(3)$(obj).index()当前这个节点在兄弟节点中的索引(若之前返回的对象是一组数据则从第一个开始返回)

ps:Jquery之所以可以链式调用，是因为每次执行都返回了相应的对象

未分类