JQuery学习笔记

引入

  Src标签

Dom对象与JQuery包装对象

  只有JQ对象能使用JQ方法,$(xx) 把Dom对象包起来

基础选择器

  ID选择器    #ID       $(“#Id”)           选择Id为指定值的元素对象(多个返回数组)

  类选择器     .Class       $(“.Class”)          选class为指定值的元素对象

  元素选择器   标签名/元素名    $(“标签/元素”) .       所有指定标签.

  通用选择器   *         $(“*”)            页面中所有元素对象

  组合选择器   选择器1,选择器2,... $(“选择器1,选择器2”)     指定选择器中的元素对象

层次选择器

  后代选择器

    格式 父元素 指定元素  (空格隔开)

    实例 $(“父元素 指定元素”)

    选择 父元素的所有指定元素(包含第一代、第二代等)

  子代选择器

    格式 父元素>指定元素 (大于号隔开)

    实例 $(“父元素>指定元素”)

    选择 父元素的所有第一代指定元素

  相邻选择器

    格式 元素+指定元素

    实例 $(“元素+指定元素”)

    选择 元素的下一个指定元素(只找下一个,不存在则获取不到)

  同辈选择器

    格式 元素~指定元素

    实例 $(“元素+指定元素”)

    选择 元素的下一个指定元素(找到有为止)

表单选择器

  表单选择器       :input   查找所有的Input元素:$(“:input”)   会匹配所有的input textarea select button

  文本框选择器   :text    ...              ...

  密码框选择器   :password  ...

  单选钮选择器   :radio  ...

  多选钮选择器   :checkbox

  提交钮选择器   :sunmit

  图像钮选择器   :image

  重置钮选择器   :reset

  文件域选择器   :file

  按钮选择器    :button

操作元素的属性

  属性的分类

    固有属性:元素本身就有的属性(id name class style value...)

    返回值是boolean的属性:checked selected disabled

    自定义属性:用户自己定义的属性

  Attr()和prop()的区别

    1.如果是固有属性,attr()和prop()都能操作

    2.自定义属性,attr()可操作,prop()不能操作

    3.返回boolean的属性

      若设置了属性,attr()返回具体的值,prop()返回true

      若未设置属性,attr()返回undefined,prop()返回false

  内容

    1.获取属性 attr(“属性名”) prop(“属性名”)

    2.设置属性 attr(“属性名” , ”属性值”) prop(“属性名” , ”属性值”)

    3.移除属性 removeAttr(“属性名”);

  总结

    如果属性的类型是boolean,则使用prop()方法,否则使用attr()方法

操作元素的样式

    attr(“class”)       获取元素的样式名

    attr(“class”,”样式名”)   设置元素的样式 (设置的话原本的会被覆盖)

    addClass(“样式名”)     添加样式(在原来的基础上添加,原有的保留,重复的以最后一次为准)

    css(“class”)       添加具体的样式(行内样式)

                css(“具体样式名”,’’样式值”);              设置单个样式

                css({“具体样式名”:’’样式值”,“具体样式名”,’’样式值”});   设置多个样式

    removeClass(“样式名”) 移除样式

操作元素的内容

  操作元素的内容

    html()         获取元素的内容,包含html标签(非表单元素)

    html(“内容”)     设置元素的内容,包含html标签(非表单元素)

    text()        获取元素的纯文本内容,不识别html元素(非表单元素)

    text(“内容”)      设置元素的纯文本内容,不识别html元素(非表单元素)

    val()         获取元素的值(表单元素)

    val(“值”)        设置元素的值(表单元素)

  表单元素

    文本框text 密码框password 单选框radio 复选框checkbox 隐藏域hidden 文本域textarea下拉框select

  非表单元素

    div、 span、 h1~h6、 table、 tr、 td、 li、 p等

创建元素和添加元素

  创建元素

    $(“内容”)

  添加元素

    1.前追加子元素

    2.后追加子元素

    3.前追加同级元素

    4.后追加同级元素

    注:

      在添加元素时,如果元素本身不存在(新建的元素),此时会将元素追加到指定位置

      如果元素本身存在(已有元素),会将原来元素直接剪切设置到指定位置

删除和遍历元素

  删除元素

    remove();

      删除元素及对应的子元素,标签和内容一起删除

      指定元素.remove();

    empty();

      清空元素内容,保留标签

      指定元素empty();

  遍历元素

    each()

      $(selector).each(function(index,element){

        Index.   element. sth(element) //do anying you want })

      参数function为遍历时的回调函数

      index为遍历元素的序列号,从0开始

      element是当前的元素,此时是dom元素

ready加载事件

  ready加载事件

    预加载事件

    当页面的dom结构加载完毕后执行

    类似于js中的load事件

    ready事件可以写多个

    语法:

$().ready(function(){

    //这样就会等元素加载完再执行,避免因为js先加载报错

})

 

    简写

$(function(){

})

 

绑定事件

  bind绑定事件

    为被选元素添加一个或多个事件处理程序,并规定事件发生时的运行函数

    语法:

$(selector).bind(
    eventType[,eventData],
    handler(eventObject) 
 );    

 

      eventType:是一个字符串类型的事件类型,就是你需要绑定的事件

      [,eventData]:传递的参数,格式:(名:值,名2:值2)

      handler(eventObject)该事件触发执行的函数

    绑定单个事件

      bind绑定

        $(“元素”).bind(“onclick”,function(){ });

      直接绑定

        $(“元素”).事件名(function(){ });

    绑定多个事件

      bind绑定

        1.多事件同一个函数

          指定元素.bind(“事件 事件2 事件3”,function(){ })

        2多事件并设置对应函数

          指定元素.bind(“事件”,function(){ }).bind(“事件2”,function(){ });

        3.多事件并设置对应函数

指定元素.bind({

  "事件":function(){ },

  "事件2":function(){ }

})

 

      直接绑定

        指定元素.事件名(function(){ }).事件名(function(){ });

后续缺

    Ajax(在Ajax中统一整理)

    JsAjax

    JQAjax

上一篇:go语言beego web框架学习


下一篇:ics-06