一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得大家学习. 二.前言 通过前面几章我们已经能够完全控制jQuery包装集了, 无论是通过选择器选取对象, 或者从包装集中删除,过滤元素. 本章将讲解如何使用jQuery获取和修改元素属性和样式. 三. 区分DOM属性和元素属性 一个img标签: 通常开发人员习惯将id, src, alt等叫做这个元素的"属性". 我将其称为"元素属性". 但是在解析成DOM对...
W3C标准推荐的语法是通过document文档对象获取DOM树内的内的某个元素，常见的方法有getElementById（）、getElementsByName（）、getElementsByTagName（），他们的作用分别通过id属性、name属性/标签名称返回单个节点或节点集合。 代码如下: JavaScript获取页面上某个元素的方法 function doGetElementsByTagName(){ var x=document.getElementsByTagName("input"); alert(x.length); } function doGetElementsByName(){ v...
当然我们可以研究js库的源码, 也可以自己去发明轮子试试看, 其过程还是挺有趣的...下面我就来实现下页面元素的拖拽功能 现在就开始着手实现, 让我们从最顶层的方法讲起, 它用于初始化一个drag object, 方法的声明如下 function DragObject(cfg) 这里的cfg我们用一个对象来传入, 有点像Extjs里配置属性 代码如下: var dragObj = new DragObject({ el: exampleB, attachEl: exampleBHandle, lowerBound: new Position(0, 0), //posi...
在jquery1.5.1根据ID来获取对象返回的是对应数组，想不通怪不得使用document.getElementById(""ID名"")可以取到单一的对象，使用$("#ID名")却不行，悲剧呀。 代码如下: 选择器测试 .txtobj{background-color: #6600FF;} $(document).ready( function() { $("input[type='text']") .click ( function() { this.value=$("#lblMsg")[0].innerText; } ) .keydown( function() { alert($("#divTest")[0].innerText); alert($(...
1，IE6/7/8/9中无事件(如click,mouseover)，Firefox/Safari/Chrome/Opera则有。 代码如下: 1 2 示例：122，点击option，通过srcElement获取事件源目标在IE中是select，Firefox/Safari/Chrome/Opera则是option。 代码如下: 1 document.getElementById('s2').onclick = function(e){ var evt = window.event || e; var target = evt.srcElement || evt.target; alert(target.tagName); } 示例：1 // 3，IE6下给option元素...
如下 代码如下: IE6/7/8中Option元素未设value时Select将获取空字符串 one two three 当触发change事件时，各浏览器中测试结果如下：IE6/7/8 : 弹出空字符串IE9/Firefox/Safari/Chrome/Opera : 弹出对应的option元素的innerText值。很明显，IE9/Firefox/Safari/Chrome/Opera 的实现有一定道理。即当option的value和option的innerText相同时可以省略掉其value不写。这样更简洁。可惜 IE6/7/8 不支持这么写。为保证兼容所...
如下 代码如下: IE9/10同时支持script元素的onload和onreadystatechange事件 结果： IE6/7/8 : 弹出2 IE9/10 : 弹出2，1 Firefox/Safari/Chrome/Opera : 弹出1 测试结果可以看出，IE9后已经开始支持script的onload事件了。一直以来我们判断js文件是否已经加载完成就是用以上的两个事件。很久以前就知道IE中使用onreadystatechange事件，事件handler中使用readyState的值判断是否加载完成。其它浏览器使用onload事件。 ...
核心代码: 代码如下: if($("#elem_id").is(":hidden")) { } 实例代码1: 代码如下: New Document // $(document).ready(function(){ $("#btnToogle").click(function(){ $("#dvTest").toggle(); alert( $("#dvTest").is(":visible")); //判断元素显示或隐藏状态 }); $("#btnTestIs").click(function(e){ // alert( $(e.target).is("input") ); //判断元素的标名称 alert( $("#btnToogle").parent().is("body") ); }); ...
本文主要针对拖拽原型进行解析，给刚接触 JQuery 的爱好者一个简单的示例。在引入 Jquery.js 后： 代码如下: $(function(){ //绑定拖动元素对象 bindDrag(document.getElementById('test')); }); function bindDrag(el){ //初始化参数 var els = el.style, //鼠标的 X 和 Y 轴坐标 x = y = 0; //邪恶的食指 $(el).mousedown(function(e){ //按下元素后，计算当前鼠标位置 x = e.clientX - el.offsetLeft; y = e.clientY - el.off...
今天遇到个小问题, 在构建 DOM 时, IE 中不能通过 element.setAttribute('name', _variable); 和 element.name = _variable; 这样的形式来为元素加上 name 属性, 无论是 IE6 还是 IE7. (IE8 是可以的, 但 IE8rc1 不行) 后来我查看了 MSDN, 得到信息如下: 代码如下: Internet Explorer 8 and later can set the NAME attribute at run time on elements dynamically created with the createElement method. To create an element ...
①jQuery元素的相对定位。 jQuery中不仅可以使用选择器就行绝对定位，而且还可以进行相对定位，只要在$()中指定第二个参数，第二个参数就是相对的元素。第二个参数传递一个jQuery对象，则相对于这个对象为基准进行相对的选择。 代码如下: jQuery元素的相对定位和选择器 $(function(){ //将第1~3行的背景色设置为红色（绝对定位）。 //注意此处的gt(0)是从lt(4)出的新序列中的序号开始的，而不是原来的。(即在原来的基础上进一...
1 从集合中通过指定的序号获取元素 html： 代码如下: 0 1 2 3 4 5 6 7 JS 代码如下: jQuery(function(){ $("p").eq(2).css("color","red"); $("p").eq(3).css("color","red"); }) 2 获取指定条件一致和指定范围的元素 html: 代码如下: 0 1 2 3 4 5 6 7 JS 代码如下: jQuery(function(){ $("p").filter('.center').css("color","red"); }) $(function(){ $("p").slice(5,7).css("color","yellow"); }) 3 获取与条件...
$("#keyword")[0].value = ""; /*获得TEXT.AREATEXT的值*/ var textval = $("#text_id").attr("value"); //或者 var textval = $("#text_id").val(); /*获取单选按钮的值*/ var valradio = $("input[type=radio]:checked").val(); /*获取一组名为(items)的radio被选中项的值*/ var item = $('input[name=items]:checked').val(); /*获取复选框的值*/ var checkboxval = $("#checkbox_id").attr("value")； /*获取下拉列表的值*/ va...
jQuery的$调用后想要获取DOM元素可以使用get方法，如下 代码如下: // 方式1 $(div).get(1); // 获取页面中第二个div 当然，也可以使用数组索引方式获取 代码如下: // 方式2 $(div)[1]; // 获取页面中第二个div 上面两种方式都可以获取某一个特定的DOM元素，而获取DOM元素集合却要使用toArray方法 代码如下: $(div).toArray(); // 返回页面中所有的div，依次放入数组中 看看get方法的源码 代码如下: get: function( num ) { ...
:enable 获取可输入状态的元素 :disabled 获取不可输入状态的元素 :checked 获取选中的表单元素 :seleced 获取下拉框中选中的元素 下面看一粒例子 Html 代码如下: JavaScript代码： 代码如下: jQuery(function(){ $("input:text:disabled").val("不能输入"); $("input:text:enabled").val("能输入"); ( function checkboxclick(){ $(":checkbox").unbind("click",checkboxclick); var vv=''; $(":checkbox:checked").ea...