一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得大家学习. 二.前言 通过前面几章我们已经能够完全控制jQuery包装集了, 无论是通过选择器选取对象, 或者从包装集中删除,过滤元素. 本章将讲解如何使用jQuery获取和修改元素属性和样式. 三. 区分DOM属性和元素属性 一个img标签: 通常开发人员习惯将id, src, alt等叫做这个元素的"属性". 我将其称为"元素属性". 但是在解析成DOM对...
在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($(...
核心代码: 代码如下: 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...
①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...
我当时的处理方法是在添加的时候手工绑定事件处理函数。不过新版的jquery已经添加了这个功能。我们已经不需要为此烦恼了。 参考：http://api.jquery.com/live/ 以前我们定义事件，比如为元素定义单击事件是这样写的： 代码如下: $(input).click(function () { //处理代码 }); 或 代码如下: $(.clickme).bind(click, function() { // Bound handler called. }); 但是这只能是对已经加载好的元素定义事件，那些后来添加插入的元素...
代码如下: createElement .warpper{ border:1px solid red; padding:8px;} ///动态创建一个div $(function(){ $('',{ id:'test', text:"this is a div", "class":"warpper", click:function(){ var text=$(this).text(); alert(text); } }).appendTo("body"); }); //创建input:text $(function(){ $('',{ type:"text", val:"input text somethings...", name:"userName" }).appendTo("body"); }); //创建input select $(fu...
样式：$(function (){ $("要选择的标签").click(function (){alert ("弹出对话框内容");}) }); 第一种：Id选择器 用法： 代码如下: $(function (){ $("p").click(function (){alert ("小P");}) }); 第一个 第二个 说明：对所有标签点击都有弹出对话框的提示 第二种：CSS选择器 代码如下: $(function (){ $(".warning").click(function (){alert("这是警告信息");}); }); .warning{background-color :Yellow ;col...
直接上代码： 代码如下: 鼠标拖拽复制效果 body{ line-height:150% } .show{ display:block} .hide{ display:none} .clone{position: absolute; border:1px solid #666; background-color:#CCCCCC;} .over{ border:1px solid #666;} #left{ float:left; width:200px; border:1px solid #666;} #left li.selected{ background-color:#CCCCCC} #right{ margin-left:220px; border:1px solid #666;} $(function(){ $("#left ...
还是要首先引用JQ框架。 然后来看看效果：(连接添加不上)只能暂时看哈图片， 具体效果可参见我博客左方“My Box”中的“玩游戏”： 下面代码中有具体注释。 再来看看代码： 代码如下: 深林冰火人 智商球3 船长的运输船 $(document).ready(function(){ $("#thegameBox a").mousemove(function(ev){ var _Imgsrc="http://files.jb51.net/upload/201109/20110901202741350.jpg";//这里需要将元素name设置和你的图片名字一样 v...
父页面代码 代码如下: 无标题文档 iframe页面代码 代码如下: 无标题文档 $("body",parent.document).append('hahaha'); iframe test--@mybest 在jQuery的文档上有这样的记录： jQuery(html, [ownerDocument]) 参数html String 用于动态创建DOM元素的HTML标记字符串 ownerDocument (可选) Document 创建DOM元素所在的文档 还是要多看，细看文档啊，真是所谓：书读百遍，其义自见啊！ ------补记------...