JQuery小结

来源：互联网发布：女生黄金比例身材算法编辑：程序博客网时间：2024/06/05 17:06

一.概念

基本概念

JQuery是对原生DOM对象的封装库，将原生DOM对象转换成JQuery对象，通过调用对象方法实现对DOM的操作
JQuery相比DOM对象，代码简练且与浏览器兼容性高

基本语法

$ ，即表示该对象为JQuery对象。如：$("div")

与DOM对象的相互转换

将dom对象转换为JQuery对象
```
var $key = $(dom);
```
将JQuery对象转换为dom对象
1. var dom1 = $key[0];
2. var dom2 = $key.get(0)；
在JQuery中不可以直接使用this，如this.attr(“name”,”username”)会报错；但可以这样用$(this).attr(“name”,”username”).因为是DOM对象，不是JQuery对象。

原生JS中window.onload与$(document).ready()区别

两者执行时机不同
- window.load在整个页面全部元素加载完毕执行
- $()是在浏览器对页面的DOM结构解析完即执行（此时与DOM相关的元素可能尚未加载完毕），也可理解为页面边加载边执行
两者可编写个数不同
- window.onload(function(){})只可编写一次，如果编写多次只能执行最后一个
- $(document).ready(function(){})可编写多次，并且每次都会执行
- $(document).ready()可简写为$()

二.JQuery可实现的功能(只列举一些常用到的)

1.选择器

基本选择器

ID选择器： $(“#id”): 根据给定的ID匹配一个元素
元素选择器： $(“dom元素名”)：根据给定的元素名匹配所有元素
类选择器：$(“.className”): 根据给定的class名匹配元素
组选择器：$(“seletor1,seletor2,seletor3”)—-无数量限制，用逗号分割

层级选择器

后代选择器：$(“parent child”):匹配父元素下的所有子元素，包括直接子元素和非直接子元素
子选择器: $(“parent > child”)：匹配父元素下的所有直接子元素，

属性选择器

$(“div[id]”) 查找所有含有 id 属性的 div 元素
$(“input[name=’newsletter’]”) 查找所有 name 属性是 newsletter 的 input 元素

表单选择器（如表单id为fm）

$(“#fm:input”) 获取所有的input、textarea、selecte
$(“#fm:text”) 匹配所有的单行文本框
$(“#fm:password”) 匹配所有密码框
$(“#fm:radio”) 匹配所有单选按钮
$(“#fm:checkbox”) 匹配所有复选框
$(“#fm:submit”) 匹配所有提交按钮
$(“#fm:image”) 匹配所有图像域
$(“#fm:button”) 匹配所有按钮
$(“#fm:file”) 匹配所有文件域
$(“#fm:hidden”) 匹配所有不可见元素，或者type为hidden的元素

表单对象属性选择器

$(“input:checked”) 匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)
$(“input:enabled”) 匹配所有可用元素
$(“input:disabled”) 匹配所有不可用元素
$(“select option:selected”) 匹配所有选中的option元素

2.过滤器（如有需要可自行查找资料）

3.JQuery对属性的操作

获取属性值： $(“img”).attr(“src”); 返回文档中第一个图像的src属性值
给指定属性赋值：$(“img”).attr(“src”,”test.jpg”)
删除属性：$(“img”).removeAttr(“src”); 从每一个匹配的元素中删除一个属性
为属性设置函数：$(“img”).attr(“title”, function() { return this.src }); 为所有匹配的元素设置一个计算的属性值

4.事件以及事件处理

事件

$(“p”).blur(); 触发每一个匹配元素的blur（输入域失去焦点）事件
$(“p”).blur( function () { alert(“Hello World!”); } ); 在每一个匹配元素的blur事件中绑定一个处理函数
change()；change事件会在元素失去焦点的时候触发，也会当其值在获得焦点后改变时触
change(fn);在每一个匹配元素的change事件中绑定一个处理函数。
$(“p”).click(); 触发每一个匹配元素的click事件
$(“p”).click(function(){});在每一个匹配元素的click事件中绑定一个处理函数
dblclick()；dblclick事件会在元素的同一点双击时触发。
$(“p”).dblclick( function () { alert(“Hello World!”); }); 在每一个匹配元素的dblclick事件中绑定一个处理函数。
$(document).ready(function(){ $(“#login”).focus();}); 触发每一个匹配元素的focus事件。
$(“input[type=text]”).focus(function(){this.blur();}); 在每一个匹配元素的focus事件中绑定一个处理函数。
keydown()；keydown事件会在键盘按下时触发。
keydown(fn)；在每一个匹配元素的keydown事件中绑定一个处理函数。
keypress()；触发每一个匹配元素的keypress事件
keypress(fn)；在每一个匹配元素的keypress事件中绑定一个处理函数。
keyup()；触发每一个匹配元素的keyup事件
keyup(fn)；在每一个匹配元素的keyup事件中绑定一个处理函数。
mousedown();
mouseup();
mousemove();
mouseover();
mouseout();
$(“form:first”).submit();提交本页的第一个表单。
$(“form”).submit(function(){return false;});阻止页面提交。return false也可作为阻止事件冒泡使用。

事件处理（随便举几个常见例子）

$(“p”).bind(“click”, function(){ alert(“p被点击了”);}); 为每一个匹配元素(此处为p标签元素)的特定事件（如click）绑定一个事件处理器函数
$(document).on(events,[selector],[data],function(){}) 为某一个或者多个事件绑定函数，与bind(type,[data])实现效果类似；on多一个参数[selector],可以用来过滤元素
如：$(document).on(“click”,”p,scan”,function(){alert(“p或者scan被点了”)}

trigger(type,[data])在每一个匹配的元素上触发某类事件

<html>Hello World<head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){  $("input").select(function(){    $("input").after("文本被选中！");  });  $("button").click(function(){    $("input").trigger("select");  });});</script></head><body><input type="text" name="FirstName" value="Hello World" /><br /><button>激活 input 域的 select 事件</button></body></html>

5.动态效果

6.发送Ajax请求

JQuery发Ajax请求的通用方式：

语法：$.ajax(prop);prop是一个hash表，用来设置ajax参数
示例：
$.ajax({
url:”请求地址”,
type:”请求方式(如get/post)”,
data:”请求参数”,
async:true,//默认为true表示异步请求，false表示发送同步请求
dataType:”返回值类型”,
success:function(data){//这里为请求成功的回调，data为返回数据},
error:function(){//请求失败回调}
});

其它方式：

$.get(url, params, callback) 用get方式向远程页面传递参数，请求完成后处理函数，除了url外，其它参数任意选择！
$.getJSON(url, params, callback) 用get方式向远程json对象传递参数，请求完成后处理函数callback
$.post(url, params, callback) 用post方式向远程页面传递参数，请求完成后处理函数callback

阅读全文

0 0