用jquery如何实时获取对象的坐标

jquery获取当前元素的坐标

1，获取对象

var obj = $("#id号"); 或 var obj = $(this);

实例中我获取的对象是d出窗口按钮，这样创建的新窗口就会根椐按钮的位置进行调整，实例中将创建的新窗口显示的按钮的右下角。

2，获取对象元素的位置(offset()方法)

var offset = objoffset();

获取对象元素的位置，分别是元素的top和left，调用方法是：offsetleft和offsettop，可知当前对象的左部和顶部位置。

3，获取对象元素的宽度(width()方法)

var right = offsetleft+objwidth();

实例中是获取对象的右下角位置，创建新窗口的左部位置。

4，获取对象元素的高度(height()方法)

var down = offsettop+objheight();

实例中是获取对象的右下角位置，创建新窗口的顶部位置。

jQuery 选择器简介

jQuery 选择器允许对 HTML 元素组或单个元素进行 *** 作。

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。

jQuery 中所有选择器都以美元符号开头：$()。

1 基本选择器

$("#test")                选择id值为test的元素，id值是唯一的所以返回单个元素。

$("div")                  选择所有的div标签元素，返回div元素数组

$("myclass")             选择使用myclass类的css的所有元素

$("")                    选取所有元素。

$("#test,div,myclass")      选取多个元素。

2层次选择器

$("div span")   选取<div>里的所有<span>元素

$("div >span")     选取<div>元素下元素名是<span>的子元素

$("#one +div")     选取id为one的元素的下一个<div>同辈元素    等同于$("#one")next("div")

$("#one~div")      选取id为one的元素的元素后面的所有<div>同辈元素    等同于$("#one")nextAll("div")

$("#one")siblings("div")    获取id为one的元素的所有<div>同辈元素（不管前后）

$("#one")prev("div") 获取id为one的元素的前面紧邻的同辈<div>元素

所以 获取元素范围大小顺序依次为：

$("#one")siblings("div")>$("#one~div")>$("#one +div")

或是

$("#one")siblings("div")>$("#one")nextAll("div")>$("#one")next("div")

3基本过滤选择器

$("div:first")               选取所有<div>元素中第1个<div>元素

$("div:last")                   选取所有<div>元素中最后一个<div>元素

$("input:not(myClass)")        选取class不是myClass的<input>元素

$("input:even")                 选取索引是偶数的<input>元素(索引从0开始)

$("input:odd")                  选取索引是基数的<input>元素(索引从0开始)

$("input:eq(2)")                选取索引等于2的<input>元素

$("input:gt(4)")                选取索引大于4的<input>元素

$("input:lt(4)")                选取索引小于4的<input>元素

$(":header")                    过滤掉所有标题元素，例如：h1、h2、h3等

$("div:animated")               选取正在执行动画的<div>元素

$(":focus")                     选取当前获取焦点的元素

4内容过滤选择器

$("div:contains('Name')")       选取所有<div>中含有'Name'文本的元素

$("div:empty")                  选取不包含子元素（包括文本元素）的<div>空元素

$("div:has(p)")                 选取所有含有<p>元素的<div>元素

$("div:parent")                 选取拥有子元素的（包括文本元素）<div>元素

5可见性过滤选择器

$("div:hidden")                 选取所有不可见的<div>元素

$("div:visible")                选取所有可见的<div>元素

6属性过滤选择器

$("div[id]")              选取所有拥有属性id的元素

$("input[name='test']")     选取所有的name属性等于'test'的<input>元素

$("input[name!='test']")  选取所有的name属性不等于'test'的<input>元素

$("input[name^='news']")        选取所有的name属性以'news'开头的<input>元素

$("input[name$='news']")        选取所有的name属性以'news'结尾的<input>元素

$("input[name='news']")        选取所有的name属性包含'news'的<input>元素

$("div[title|='en']")           选取属性title等于'en'或以'en'为前缀(该字符串后跟一个连字符'-')的<div>元素

$("div[title~='en']")           选取属性title用空格分隔的值中包含字符en的<div>元素

$("div[id][title$='test']")     选取拥有属性id,并且属性title以'test'结束的<div>元素

7子元素过滤选择器

$("div one:nth-child(2)")       选取class为'one'的<div>父元素下的第2个子元素

$("div span:first-child")        选取每个<div>中的第1个<span>元素

$("div span:last-child")         选取每个<div>中的最后一个<span>元素

$("div button:only-child")       在<div>中选取是唯一子元素的<button>元素

8表单对象属性过滤选择器

$("#form1 :enabled")             选取id为'form1'的表单内所有可用元素

$("#form2 :disabled")            选取id为'form2'的表单内所有不可用元素

$("input :checked")              选取所有被选中的<input>元素

$("select option:selected")      选取所有的select 的子元素中被选中的元素

9表单选择器

$(":input")                      选取所有<input>,<textarea>,<select> 和 <button>元素

$(":text")                    选取所有的单行文本框

$(":password")                   选取所有的密码框

$(":radio")                      选取所有单的选框

$(":checkbox")                   选取所有的多选框

$(":submit")                     选取所有的提交按钮

$(":image")                      选取所有的图像按钮

$(":reset")                      选取所有的重置按钮

$(":button")                     选取所有的按钮

$(":file")                       选取所有的上传域

$(":hidden")                     选取所有不可见元素

blur()

触发每一个匹配元素的blur事件。

这个函数会调用执行绑定到blur事件的所有函数，包括浏览器的默认行为。可以通过返回false来防止触发浏览器的默认行为。blur事件会在元素失去焦点的时候触发，既可以是鼠标行为，也可以是按tab键离开的

focus()

触发每一个匹配元素的focus事件。

这将触发所有绑定的focus函数，注意，某些对象不支持focus方法。

一个事失去焦点的，一个事获得焦点的

>

1、获取input的checked值是否为true：

//第一种：

if($("input[name=item][value='val']")attr('checked')==true)  //判断是否已经打勾    --注：name即控件name属性,value即控件value属性

//第二种：

可以不指定属性值，因一组checkbox的value值都会保存其在数据库中对应的id，最好写成如下方式：

if($("input[name=row_checkbox]")attr('checked')==true)

//第三种：

if($("[name=row_checkbox]")attr('checked')==true)  --注：name即控件name属性

jquery radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其相关文章分类:Web前端：

2、radio:

//获取一组radio被选中项的值：

var item = $('input[name=items][checked]')val();   --注：name即控件name属性

//radio单选组的第二个元素为当前选中项 ：

$('input[@name=items]')get(1)checked = true;

//或 

$('input[name=items]')attr("checked", '1′);

//radio的value = 'val'的元素为当前选中项：

$('input[name=items] [value='val']')attr("checked","checked");

//radio设置value=2的元素为当前选中项：

$("input[type=radio]")attr("checked",'2′);

//radio被选中项的value值：

$("input[name='radio_name'][checked]")val();

//根据Value值设置Radio为选中状态：

$("input[name='radio_name'][value='要选中Radio的Value值'")attr("checked",true);

3、select:

//获取select被选中项的文本：

var item = $("select[@name=items] option[@selected]")text();

//或 

var item = $("select[name=items]")find("option:selected")text();

//select下拉框的第二个元素为当前选中值：

$('#select_id')[0]selectedIndex = 1;     --注：select_id'即控件的id属性

//select下拉框value = 'val'的元素为当前选中项：

$("select[name=items] option[value='val']")attr("selected","selected");

//select设置value=-sel3的项目为当前选中项：

$("#sel")attr("value",'-sel3′);    --注：sel即select控件的id属性

//添加下拉框的option：

$("<option value='1′>1111</option><option value='2′>2222</option>")appendTo("#sel");

//select清空：

$("#sel")empty();

4、checkbox:

//checkbox的第二个元素被打勾：

$("input[name=items]")get(1)checked = true;   //打勾

//checkbox的value='val'的元素打勾：

$("input[name=item][value='val']")attr("checked",true);

                                                 或$("input[name=item][value='val']")attr("checked","checked");

//判断checkbox是否已经打勾：

if($("input[name=item][value='val']")attr('checked')==true)

 

//jQuery获取CheckBox选择的Value值：

//选择被选中CheckBox元素的集合 如果你想得到Value值你需要遍历这个集合

$($("input[name='checkbox_name'][checked]"))each(function(){

arrChk+=thisvalue + ',';    //遍历被选中CheckBox元素的集合 得到Value值

});

 

//checkbox的checked属性：

$("#checkbox_id")attr("checked"); //获取一个CheckBox的状态(有没有被选中,返回true/false)

$("#checkbox_id")attr("checked",true); //设置一个CheckBox的状态为选中(checked=true)

$("#checkbox_id")attr("checked",false); //设置一个CheckBox的状态为不选中(checked=false)

//根据上面三条,分析分析这句代码的意思：

$("input[name='checkbox_name']")attr("checked",$("#checkbox_id")attr("checked"));

--注：根据控件checkbox_id的checked状态为name='checkbox_name'的input赋相同的checked状态

5、获取值：

//文本框,文本区域：

$("#txt")attr("value");

//多选框checkbox：

$("input[name='checkbox':checked]")each(function(){

   var val = $(this)val();

});

//单选组radio：

$("input[type=radio][checked]")val();

//下拉框select的value值：

$('select')val();

//下拉框select选中的text 值：

$("select")find("option:selected")text();

//文本框,文本区域：

$("#txt")attr("value","); //清空内容

$("#txt")attr("value",'11′); //填充内容

6、事件：

//当对象text_id获取焦点时触发：

$("#text_id")focus(function(){

    //code

});

//当对象text_id失去焦点时触发：

$("#text_id")blur(function(){

    //code

});

7、其他：

//使文本框的Vlaue值成选中状态：

$("#text_id")select();

$("#text_id")val()split(","); //将Text的Value值以','分隔返回一个数组

以上就是关于用jquery如何实时获取对象的坐标全部的内容，包括:用jquery如何实时获取对象的坐标、jquery选择器有哪些、如何用jquery获取失去焦点时的表单对象等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！