jquery编程
- 简单的JQuery
- $(document).ready ( function() { alert(“加载完毕!” ); } );
页面加载完成时执行的代码 可简写为:
$( function(){ alert(“加载完毕!”) } );
- (JQuery)window.ready() & (DOM)window.onload区别: onload只能注册一次而ready()可多次注册/onload是所有DOM元素创建完毕 图片CSS等均加载完成后才触发 而ready()则是DOM元素创建完成后即触发/JQuery中可通过$(window).load()来实现onload事件调用机制
- JQuery的DOM操作
- html()方法读取or设置元素的innerHTML属性: $(“a:first”).html(“hello”)
- text()方法读取or设置元素的innerText属性: $(“a:first”).text(“hello”)
- attr()方法读取or设置元素的属性(对于JQuery没封装的属性使用attr()方法进行操作):
- removeAttr()方法删除属性
- JQuery对象 DOM对象
- JQuery对象就是通过JQuery包装DOM对象后产生的对象: $(“#div1”)
- JQuery对象只能调用通过JQuery封装的方法 不能调用DOM对象的方法/DOM对象也不能调用JQuery对象的属性($(“#div1”).innerHTML //错误)
- JQuery / DOM对象转换: →JQuery:$(DOM对象) / →DOM:JQueryObj[0]或JQueryObj.get(0)
- JQuery对象CSS样式相关函数:
$(“#div1”).css(“background”,”red”) / $(“#div1”).css(background) //两个参数设值 一个参数取值(类似的如.val() .text() .html())
- 事件
- 事件绑定: $(“#btn1”).bind(“click”,function(){})→$(“#btn1”).click(function(){})
- 事件合成:
hover(enterfn,leavefn): 鼠标离开放在元素上时调用enterfn函数 离开时调用leavefn函数
- 事件冒泡规则同JavaScript
- 事件对象: function(e){}; //e表示事件对象(一般写作e) 通过e获取事件相关信息(相当于DOM中window.event)
- 阻止事件冒泡: 调用事件对象的stopPropagation()方法
$(“tr”).click(function(e){alert(“tr被点击”);e.stopPropagation();});
- 阻止事件默认行为(如超链接转向 表单提交): e.preventDefault()
$(“a”).click(function(e){alert(“所有超链接禁用”);e.preventDefault();});
- e.pageX/e.pageY: 鼠标屏幕坐标位置
- e.target: 触发事件的元素
- e.which: 1左键 2中键 3右键(鼠标事件)
- e.altKey/e.shiftKey/e.ctrlKey: bool值/事件发生时alt shift ctrl键是否按下
- e.keyCode/e.charCode: 事件发生时的keyCode/charCode
- 移除事件绑定: bind()方法移除元素上所有事件绑定/bind(“click”)移除click事件绑定
- 一次性事件绑定(只执行一次): one()
- 模拟点击事件: $(“#div1”).click(); //click事件不传参数时表示模拟点击
- JQuery内置函数
- JQuery内置函数主要用于数组处理/字典处理
- $.map(fn): 对数组中每个元素调用fn函数进行处理 fn函数将处理结果返回 最后得到一个新的array/一般用于array(不用于dictionary)/什么参数都不写结合this则为value(推荐)
- $.each(fn):对数组中每个元素调用fn函数进行处理 无返回值/传两个参数一个key一个value(推荐) 传一个参数则为key 什么参数都不写结合value则为value
- 对于array推荐无参+this / 对于dictionary推荐两个参数
- 元素的each()
- JQuery选择器
- JQuery选择器用于查找满足条件的元素
- 选择器: $(“#控件Id”)Id/根据控件Id获取控件的JQuery对象
- 标签选择器: $(“TagName”)/获取所有指定标签名的JQuery对象
- CSS样式选择器: $(“.test”)/同时选择拥有样式的多个元素
- 多条件选择器: $(“p,div,span.wainning”)/同时选择p标签 div标签和拥有wainning样式的span标签
- 全选选择器: $(“body *”) 选择<body>下所有元素
- 层次选择器:
$(“div li”): 获取div下所有li元素(后代 子 子的子…)
$(“div > li”): 获取div下直接li子元素
$(“.warnning + div”): 获取样式名为warnning后的第一个div元素(不常用)
$(“.warnning ~ div”): 获取样式名为warnning后的所有div元素(不常用)
- 相对定位(以第二个参数为基点/默认绝对定位以根元素为基点): $(“ul”,$(this)).css(“background”,”red”) //当前元素下<ul/>背景设为红色
- JQuery节点遍历
- next()方法: 用于获取节点之后的第一个同辈元素/next(“div”)
- nextAll()方法: 用于获取节点之后的所有同辈元素
- siblings()方法: 用于获取所有同辈元素
- JQuery过滤器
- :first选取第一个元素: $(“div :first”)
- :last选取最后一个元素: $(“div :last”)
- :not(选择器)选取不满足”选择器”条件的元素: $(“input :not(.myClass)”)选取样式名不是myClass的<input>
- :even奇数/:odd偶数选择: $(“input :even”)选取索引是奇数的<input>/奇数 偶数的计算是从1开始的 不像索引从0开始
- :eq(索引序号)等于/:gt(索引序号)大于/:lt(索引序号)小于: 选取等于 大于 小于索引序号的元素 如$(“input :lt(1)”)
- $(“:header”): 选取所有的h1…h6元素
- $(“div :animated”): 选取正在执行动画的<div>
- 属性过滤器:
$(“div[id]”): 选取有Id属性的<div>
$(“div[title=test]”): 选取title属性为”test”的<div>
$(“div[title!=test]”): 选取title属性不为”test”的<div>
还可以选择开头or结束or包含等 条件还可以复合(*)
- 其他过滤器:
$(“#form1 :enabled”): 选取Id为form1的表单内所有启用的元素
$(“#form1 :disabled”): 选取Id为form1的表单内所有禁用的元素
$(“input:checked”): 选取所有选中的元素(Radio CheckBox)
$(“select:selected”): 选取所有选中的选项元素(下拉列表)
$(“:input”): 选取所有<input> <textarea> <select> <button>(与$(“input”)不同 将所有要提交服务器的元素都算在内)
$(“:text”): 选取所有多行文本框
$(“:password”): 选取所有密码框(同理还有radio checkbox submit image reset button file hidden)
- DOM节点操作
- JQuery动态创建DOM节点:
$(html字符串)方法: 返回一个JQuery对象
var link = $(“<a href=‘http://www.baidu.com’>百度</a>”);
$(“div:first”).append(link);
//在document.createElement()中 <a/>中的百度会被忽略掉
- JQuery动态添加DOM节点:
append()方法: 在元素末尾追加元素
prepend()方法: 在元素开始追加元素
after(兄弟元素)方法: 在元素之后添加元素
before(兄弟元素)方法: 在元素之前添加元素
- JQuery动态删除DOM节点:
remove()方法: 返回值是被删除的节点对象 还可以继续使用被删除的节点 如重新添加到其他节点下
empty()方法: 将节点清空
- JQuery动态替换DOM节点:
$(“br”).replaceWith(“<hr/>”); //将<br/>替换为<hr/>
- JQuery动态包裹DOM节点:
$(“b”).wrap(“<font color=‘red’></font>”); //将所有粗体字红色显示
- JQuery动态添加DOM节点(主动): 添加到目标元素下
$(“li:first”).appendTo(“#ul2“); //将第一个<li>添加到Id为”ul2”的<ul>下
- DOM样式操作
- 获取样式: attr(“class”)
- 设置样式: attr(“class”,”myclass”)
- 追加样式: addClass(“myclass”)
- 移除样式: removeClass(“myclass”)
- 切换样式: toggleClass(“myclass”)
- 判断是否存在样式: hasClass(“myclass”)
- RadioButton取/设值
- 获取RadioButton选中值(通过name属性进行过滤)
$(“input[name=gender]:checked”).val()
- 设置RadioButton选中值(通过name属性进行过滤)
$(“input[name=gender]”).val([“女”]) 或 $(“:radio[name=gender]”).val()[“女”]
- 对RadioButton的选取/设置值的操作一样适用于CheckBox和select列表框(对于RadioButton而言 取值or设值必须通过[name=…]过滤器 因为单选按钮一般成组)
- 除了使用val()方法批量设置RadioButton CheckBox等的选中状态外 还可以通过设置check属性来单独设置选中状态
$(“#btn1”).attr(“checked”,true)
- 动画
- show()/hide()方法: 显示or隐藏元素/toggle()方法在二者之间切换
- $(“#div1”).hide(500); //以500毫秒的速度隐藏层 / 参数为毫秒数
- $(“#div1”).hide(“slow”); //以慢速隐藏 / 参数: fast(200毫秒)normal(400毫秒)slow(600毫秒)
- JQuery cookie插件
- cookie的存在理由: http本身无状态
- cookie: cookie就是保存在浏览器上的内容(用户这次浏览时向cookie中保存文本内容 下次访问时可取出上次保存的内容)
- JQuery cookie: 非JQuery特有 只是简化 JavaScript中很复杂
- cookie的浏览器支持: 可禁用 但一般不考虑
- cookie特征: ①域名相关(一级域名无法互读 二级域名通过设置可以互读)②一个域名能写入的cookie的尺寸有限(一般几千字节)③cookie总条数有限 一般几十条 超过后浏览器会根据自己的策略进行删除④浏览器定期删除cookie 用户也可以手动删除
- 机密数据要存在服务器端 不要存在客户端(这就是session的意义)
- JQuery使用: ①添加引用:jquery.cookie.js②设值:$.cookie(“名字”,”值”)③取值:var cookie = $.cookie(“名字”)
- 注意: cookie中存储的值都是文本
- $.cookie(“名字”,”值”,{expires:7,path:”/”,domain:”163.cn”,secure:true});
expires: 要求浏览器保留cookie天数 参考值/如果不设置该值 则浏览器关闭后cookie即清除
path: 设为”/”则所有网站页面均可读(如mail.163.com/images/a)
domain: 设为”163.cn”则”mail.163.com”和”img.163.com”二级域名均可以访问cookie
- 其他常用JQuery插件
- JQueryUI: JQuery官方的UI控件(http://jqueryui.com/)/
- JQuery演示代码代码分析: 推荐Web开发方式(.css&.js / 页面长相与内容分析)
- JQuery.validate: 表单验证插件
- Form: 用于为表单提供直接的Ajax能力
- 所有插件列表: http://plugins.jquery.com/
浙公网安备 33010602011771号