jquery基础应用.doc

JQUERY基础应用一、 选择器根据条件获取页面的DOM对象1. 根据id获取对象页面代码id=notMeid=myDivJquery代码：$(#myDiv);获取对象： id=myDiv 根据页面的规范要求id是整个页面唯一的id，不能有重复2. 根据名称获取对象Jquery代码：$(inputname=ra);获取对象：所有input标签名字为ra的数组效果等同于document.getElementsByName(ra);3. 根据样式名称获取对象Jquery代码：$(.ra2);获取对象：所有样式class为ra2的数组4. 根据给定的html标签获取对象 Jquery代码：$(div );获取对象：所有div标签二、 属性1. 获取属性Jquery代码结果$(img).attr(src); test.jpg$(img).attr( src: test.jpg, alt: Test Image ,”margin-left”:”); $(img).removeAttr(src);$(img).removeAttr(src);2. 更换样式先移除，再添加$(p).removeClass(selected); $(p).addClass(selected);3. 获取html内容HelloJQUERY代码：$(div).html();结果：Hello设置div为空$(div).html(“”);4. 获取value值获取单个值如：JQUERY代码： $(#ipt).val(); 结果： some text获取多个值： Multiple Multiple2 Multiple3JQUERY代码：$(#multiple).val()结果：Multiple, Multiple3三、 样式1. 获取样式值HelloJQUERY代码:$(p).css(color);结果:#FFFFF2. 名/值对修改样式值Hello$(p).css( color: #ff0011, background: blue );结果：Hello如果属性名包含 -的话，必须使用引号:$(p).css( margin-left: 10px, background-color: blue );结果：Hello3. 单个样式值修改HelloJQUERY代码：$(p).css(color,red);结果：Hello四、 事件1. 页面载入 在页面所有DOM元素载入完成后再加载 $(document).ready(function() / 代码,可以为绑定事件等 );2. 绑定/解绑事件对页面元素绑定事件,一般用id来绑定,也可以按样式或元素的名称name来绑定,不推荐使用页面标签名来绑定$(#subbtn).bind(click, function() alert( $(this).text() ););3. 常用触发事件$(p).blur( function () alert(Hello World!); ); $(p).click(function () alert(Hello World!); ); 事件和html中的事件对应五、 AJAX1. 参数详解 $.ajax( type: GET, url: test.js, async: false, dataType: script,timeout: 30000, error: function (msg, error)alert(“出错了”),success:function(data) 处理返回的数据data);参数名填写值说明说明TypeGET/POSTurlhttp地址调用地址asynctrue/false异步/同步调用dataTypetext/html/json/ jsonp/ script/xml数据类型error错误处理方法success成功处理方法timeout毫秒超时事件xml: 返回 XML 文档，可用 jQuery 处理。html: 返回纯文本 HTML 信息；包含的script标签会在插入dom时执行。script: 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了cache参数。注意：在远程请求时(不在同一个域下)，所有POST请求都将转为GET请求。(因为将使用DOM的script标签来加载)json: 返回 JSON 数据 。jsonp: JSONP 格式。使用 JSONP 形式调用函数时，如 myurl?callback=? jQuery 将自动替换 ?