js和jquery相关应用的变化

错误示范，一条语句中尽量不要jq和js交错使用，

//$("#btn").onclick这种jq和js混合在一条语句中是错误的
$("#btn").onclick = function () {
    alert("nihao");
}
//这里还要加[0],才成功
$("div")[0].innerHTML;

jq中的所有事件，都是不要on的，例如上面的，就要这样用

$("#btn").click(function () {
    alert("nihao");
})
//等于document.getElementByTagName("div")[0].innerHTML =123;
$("div").html(123);

jq的选择器：

$("div,p,a")这是组合选择器，中间加' , '

//这是层级选择器中的后代选择器，div中所以a标签都会选中
//$("#div1 a").css({background:"pink"});
//这是层级选择器中的子选择器，div中子a标签才会选中
$("#div1 >a").css({background:"green"});

$("..").siblings(" ...."),获得谁的同级的其他元素

$("....").find("...."):获得谁的后代元素

$("...").prev("..."):获得谁的上一个元素

$("...").next("....")获得谁的下一个元素:

以上三个函数，siblings()，prev(),next(),括号里可以加#id，.class等，就会根据条件获得

内容选择器：

$("div:contains('text')"):选择div，条件为内容为text的

$("div:has(p)"):选择div，条件是含有p标签的

基本选择器

$("li:first"):选择第一个li标签

$("li:not(#id)"):选择除#id的 其他li标签

$("li:gt(index)"):选择下标大于index的li标签

$("li:lt(index)"):选择下标小鱼index的li标签

$("li:eq(index)"):选择下标等于index的li标签

属性选择器[attribute='value']

$("img[src='a.jpg']"):选择属性src=a.jpg的img标签

$("....").addClass():给...增加class

$("....").removeClass():给...删除class

$("....").attr(“属性名”):获取...的属性值

$("....").attr("属性名","属性值")设置...属性

$('....').css({background:'red',font-size:17px,....})设置css样式

$("div").html():获取div下的html内容

$("div").html("<b>加粗</b>")：设置div下的html内容

$("input").val():这个val()，是直接针对于input控件获取它的值得快捷方法

$("div").append("<p>段落</p>")：在div中的后面插入段落和div是父子关系

$("div").prepend("<p>段落</p>")：在div中的前面插入段落和div是父子关系

$("div").after("<p>段落</p>")：在div外面的后面插入段落，和div是兄弟关系

$("div").before("<p>段落</p>")：在div外面的前面插入段落，和div是兄弟关系

$("div").remove():删除这个div

$("#p").clone().appendTo($("div")):把p标签复制之后加到div里面

$(function(){}):加载事件