JQ选择器 DOM操作 事件处理

ajax技术就是使用JavaScript让动态网页有了无刷新的效果
H5让JavaScript可以在网页上绘制图形 控制多媒体
1、jquery 选择器
(1)标签选择器 $("div")
(2)id选择器$("#div2")
(3)类选择器 class $(".spanclass")
(4)选择器组合 $("#div2,#span2")
(5)通配符选择器 $("*")
(6)层次选择器
后代选择器$(.bgred div)选择类为bgred的元素中所有的div元素
父子选择器$(.mylist>li)选择类为mylist元素中的直接子节点li
相邻选择器 $(#hibiscus+img)选择id为hibiscus元素后面的img对象 同级
平级选择器 $(#somediv~[title])选择id为somediv的对象后面所有带title属性的元素
(7)过滤选择器

:first 匹配找到的第一个元素 $("tr:first")
:last 匹配找到的最后一个元素 $("tr:last")
:not(selector)去除所有与给定选择器匹配的元素 $("input:not(:checked)")
:has(selector)匹配含有选择器所匹配元素的元素
查找所有未选中的input元素
:animated 匹配所有正在执行动画效果的元素  
:contains(text) 匹配包含给定文本的元素 
:empty 匹配所有不包含子元素或者文本的空元素
:hidden 匹配所有的不可见元素
:visible 匹配所有的可见元素

属性过滤选择器
查找所有含有id属性的元素$("div[id]")
查找所有name属性是newsletter的input元素$(input[name='newsletter'])
查找所有的属性不是newsletter的元素$(input[name!='newsletter')
匹配给定的属性是不包含某个特定值的元素$("input[name!='news']")
匹配给定的属性是以某些值结尾的元素$("input[name$='letter']")
复合属性选择器
找到所有含id属性 并且它的name属性是以man结尾$("input[id][name$='man']")

子元素过滤器
:nth-child(index/even/odd/equation) :first-child :last-child
表单选择器
$(":input") $(:text) $(":password") $(":radio") $(":checkbox")
submit image reset button file…
2、操纵DOM
在使用JavaScript编写网页代码的过程中 多数时间都在操纵DOM 比如Ajax返回json数据 动态的向DOM添加显示节点或者是动态的更改页面上的元素的css属性等 DOM的全称是Document Object Model即文档对象模型 是一种与浏览器 平台和语言无关的接口 它可以让用户代码访问任何浏览器中呈现的元素 可以将DOM看作是网页呈现的一种标准
(1)获取和设置属性使用attr方法 而移除属性使用removeAttr方法
获取HTML元素的属性值

$(document).ready(function(){
    $("#btn_getattr").click(function(){
        var str=$("#info1").attr("href");
        str+=$("#info2").attr("value");
        str+=$("#info3").attr("id");
        $("#attr_info").append(str);
        //在div中显示属性值
    })
})

设置属性值$(selector).attr(attribute,value)
也可以同时设置多个属性值

$("btn_setattr").click(function(){
    $("#info1").attr("href","http://www.microsoft.com");
    $("#info2").attr("id","btn_info2)");
})
$("info1").attr({
    "href":"http://www.microsoft.com",
    "title":"欢迎进入",
})

(2)修改元素的内容
$(selector).text()获取段落的文本内容
$(selector).html()获取段落的html内容

$(document).ready(function(){
    var textstr=$("p").text();
    $("textvalue").text(textstr);
    //在textarea中显示文本的内容
})

(3)动态创建内容
append()在被选元素的开头插入内容
prepend()在被选元素的开头插入内容
after()在被选元素之后插入内容
before()在被选元素之前插入内容
append()和appendTo()作用相同写法相反
$(A).appendTo(B)把A追加到B
$(A).append(B)把B追加到A
(4)动态删除节点
remove()方法会将元素从DOM对象中移除
empty()方法只会清除元素的内容

$("#btnremove").click(function(){
    var id1=$("#idtip").remove();
    $("body").append(idl);
})
$("#btnempty").click(function(){
    function(){
        var id1=$("#idsenc").empty;
        id1.append("新添加的内容")；
    }
})

remove按钮内部调用了remove方法 尽管这个元素已经从DOM中删除了 但是jQuery仍然引用着这个对象 因此又可以将其添加到body中
3、jQuery的事件处理
(1)页面初始化事件$(document).ready(function(){}) == $().ready(function(){}) == $(function(){})
多次关联的window.onload事件只有最后一个会被执行
(2)绑定事件$(selector).bind(event,data,function)
event参数可以是所有JavaScript事件对象 有如下事件处理类型：blur focus focusin focusout load resize scroll unload cl;ick dblclick mousedown mouseup mouseover mouseout mouseenter mouseleave change select submit keydown keyup error可以作为event参数传入
data可选 作为event.data属性值传递给事件对象的额外数据对象
function用来绑定的处理函数 一般事件处理的函数就写在这个函数体内

$("#btn1").bind("click",function(){
    $("#content").show(3000);
})

$("#btn2").bind("click",function(){
    if($("#content").is(":visible")){
        $("#content").hide(1000,showcolor);
    }else{
        $("#content").show(3000,showcolor);
        $("#content").css("background","green");
        //设置点击时背景颜色为黄色显示完成时背景颜色用回调函数设置为绿色
    }
})
function showcolor(){
    $("#contnet").css("background-color","green");
}

(3)移除事件绑定$(selector).unbind(event,function)

$("#btn3").click(function(){
    $("#btn1").unbind("click");
})

(4)切换事件
hover 这个方法实际上是mouseenter和mouseleave事件的合并 用来模仿鼠标悬停的效果
toggle 可以依次调用多个指定的函数 直到最后一个函数 接下来重复的对这些函数进行轮流调用

//hover
$(document).ready(function(){
    $("h2").hover(function(){
        $("#content").show("fast");
        //鼠标移动到h2里面时调用show方法
    },function(){
        $("#content").hide("fast");
        //鼠标移出到h2元素时 调用hide方法
    })
})

//toggle 循环效果
$(document).ready(function(){
    $("#div1").toggle(
    function(){
        $("#div1").css("background-color","green");
        //第一次点击的时候背景为绿色
    },
    function(){
        $("#div1").css("background-color","red");
        //第二次点击的时候背景为红色
    }
    )
})
//toggle显示隐藏
$(document).ready(function(){
    $("button").click(function(){
        $("p").toggle();
    })
})
//html
<button>点击</button>
<p>显示隐藏</p>