03jq学习笔记

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

$(function(){})相当于dom 的onload=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() 删除元素