JQuery学习笔记

本文主要是介绍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

这篇关于JQuery学习笔记的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！