03jq学习笔记

<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>

$(function(){})相当于dom 的οnlοad=function(){}事件

一、选择器总结：

选择器	CSS 模式	jQuery 模式	描述
元素名	div{}	$('div')	获取所有div元素的 DOM 对象
ID	#box {}	$('#box')	获取一个 ID 为 box 元素的 DOM 对象
类(class)	.box{}	$('.box')	获取所有class为box的所有DOM对象

选择器	CSS 模式	jQuery 模式	描述
群组选择器	span,.con,.box{}	$('span,em,.box')	获取多个选择器的 DOM 对象
后代选择器	ul li a{}	$('ul li a')	获取追溯到的多个 DOM 对象
通配选择器	*{}	$('*')	获取所有元素标签的 DOM 对象

$('#box p, ul li *').css('color', 'red');//组合了多种选择器

:first	$('li:first')	选取第一个元素	单个
:last	$('li:last')	选取最后一个元素	单个
:not(selector)	$('li:not(.red)')	选取class不是red的li元素	集合
:even	$('li:even')	选择索引(以下几个都是从0开始)是偶数的所有元素	集合
:odd	$('li:odd')	选择索引是奇数的所有元素	集合

$("div:first").css("background-color",
       "#ff0");

//val()是jQuery用来获取表单元素文本内容的一个方法
$('input').val(); //元素名定位，默认获取第一个
$('input').eq(1).val(); //同上，获取第二个
$('input[type=password]').val();//选择type为password的字段
$('input[name=user]').val(); //选择 name 为 user 的字段

二、属性：

1、遍历数组

数组.each(function(){});

$.each(遍历数组,function(){});

2、使用attr()设置或者取到元素的某个属性。

$("#div1").attr("class","cls1");

$("#div1").attr({  //使用attr一次性设置多个属性
"class" : "cls1",
"name"  : "name1",
"style" : "color:red;"
});
console.log($(".p").attr("id"));

删除元素属性
$("#div1").removeAttr("class");

                        给元素添加class属性，与attr添加class的不同是，使用addClass添加的新类名，将会保留原来已有的class名。 
$("p").addClass("selected1 selected2");
删除掉元素指定的class
$("p").removeClass("selected1");

                        取到或设置元素里面的html，相当于innerHTML
console.log($("#div1").html());
$("#div1").html("<h1>新的h1</h1>");


取到或设置元素里面的文字内容，相当于innerText
console.log($("#div1").text());
$("#div1").text("<h1>新的h1</h1>");


获取或设置 元素的Value值 
console.log($("input[type='text']").val());
$("input[type='text']").val("帅！");


给元素设置CSS样式属性  属于style行级样式表权限
$("#div1").css({
"color":"red",
"user-select":"none",
"text-stroke":"0.5px blue"
});

3、文档操作:

内部插入

a.append(c):将c插入到a的内部(标签体)后面

a.prepend(c):将c插入到a的内部的前面

appendTo

prependTo

外部插入

a.after(c):将c放到a的后面

a.before(c):将c放到a的前面

a.insertAfter(c)

a.insertBefore(c)

删除

empty() 清空元素

remove() 删除元素