jquery基础总结 -- 转载

jquery的each里面return的使用

在使用jquery的each方法时, return false相当于break，是跳出each循环，return true相当于continue，是继续循环

在each里使用 return 给整个函数返回时，其实只是跳出each循环而已

=============================================================

javascript：new Option(text, value)

一般用在动态生成选择项目

input radio调整圆圈按钮大小：

css设置width和height

width:18px;height:18px;

radio设置按钮与文字对齐：

margin-right:10px;margin-bottom:3px;

法1：
var friendList = document.getElementById('friend');
var option = new Option(data[i].name,data[i].value);
friendList.options[friendList.options.length] = option;
法2：
for (var i=0; i < a_opt.length; i++) {
var op = document.createElement("option");
op.text = a_opt[i]; //显示值
op.value = i; //value
form1.selectTest.add(op);
}
}
jQuery写法：
var friend = $("#friend");
friends.empty();
for(var i=0;i<data.length;i++) {
var option = $("<option>").text(data.name).val(data.value)
friends.append(option);
}

jquery获取元素索引值index()方法：

jquery的index()方法搜索匹配的元素，并返回相应元素的索引值，从0开始计数。

如果不给 .index() 方法传递参数，那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的位置。

如果参数是一组DOM元素或者jQuery对象，那么返回值就是传递的元素相对于原先集合的位置。

如果参数是一个选择器，那么返回值就是原先元素相对于选择器匹配元素中的位置。如果找不到匹配的元素，则返回-1。

<ul>
<li id="foo">foo</li>
<li id="bar">bar</li>
<li id="baz">baz</li>
</ul>

$('li').index(document.getElementById('bar')); //1，传递一个DOM对象，返回这个对象在原先集合中的索引位置

$('li').index($('#bar')); //1，传递一个jQuery对象

$('li').index($('li:gt(0)')); //1，传递一组jQuery对象，返回这个对象中第一个元素在原先集合中的索引位置

$('#bar').index('li'); //1，传递一个选择器，返回#bar在所有li中的做引位置

$('#bar').index(); //1，不传递参数，返回这个元素在同辈中的索引位置。

wrap/wrapAll/wrapInner:

原文：

<ul>

</ul>

$("li").wrap("<div></div>");

每一个选择器都添加

<ul>

</ul>

$("li").wrapAll("<div></div>");

在所有选中的选择器最外面添加

<ul>

<div>

</div>

</ul>

$("li").wrapInner("<div></div>");

在选择器的里面添加

<ul>

</ul>

1.
$("p").click(function(){alert("hello world");});

2.
$("#cssrain").addClass("css_a");
$("tr:even").addClass("alt");
3.
   $("#head").click(function(){//加function()
       $(".content").addClass("c_style");
    });

4.
$("a").click(function(){
    $(this).hide("slow"); //show("fast")
    return false;   //链接就会慢慢的消失。
                //“return false"表示保留默认行为，因此页面不会跳转。
});
5.
$("#content").slideToggle("slow",function(){ alert("Hello,cssrain.."); } );
}); //内容滑上滑下或出现弹出框
slideUp()
slideDown();

内容收缩展开

$(document).ready(function(){
$(".ss").hide();
$("#check").click(function(){ //点击选中复选框后出现ss
$(".ss").slideToggle("slow");});
});
<input type="checkbox" class="checkbox" id="check">
<div class="ss">
<table></table>
</div>

$(".ss").hide();
$(".ss").show();

6.
$("#head2").click(function(){
$("<input type='text' name='ddd' id='ddd' value='hello ,cssrain..' ><br>").appendTo("#ccc");
});
$("#head1").click(function(){
$("#rain").append("<input type='text' name='ddd' id='ddd' value='hello ,cssrain..' ><br>");
});

7.
toggle()的函数，主要是用来切换元素的显示状态
只有点击的时候才会触发，hover的时候不可用

$("input").click(function(){
     $("p").toggle();
})

<input type="button" value="切换">
<p>Hello</p><p style="display: none">Hello Again</p>
结果：<p tyle="display: none">Hello</p><p style="display: block">Hello Again</p>

$("td").toggle(fn1,fn2,fn3...);

$("td").toggle(
function () {
    $(this).addClass("selected");
},
function () {
    $(this).removeClass("selected");
}
);

$("td").hover(
function () {
    $(this).addClass("hover");
},
function () {
    $(this).removeClass("hover");
}
);

8.
<input name="oisg_${reFund.refundId?if_exists}" id="${reFund.refundId?if_exists}" type="checkbox" value="${reFund.refundId?if_exists}" class="oisg" />
<a href="javascript:approvedRefundOne(${reFund.refundId?if_exists})">审批</a>

function approvedRefundOne(refundId){
    $("#"+refundId).attr("checked",true);

    //如果没有复选框被选中
    if($("input:checked").size()==0) //查找所有选中的复选框元素返回值Array
     {
          alert("没有被提交的数据");
          $("#"+refundId).attr("checked",false);
          return ;
     }
     //$.each($("input:checked") , function(i, n){
     //        var myDate=new Date();
     //        var biaoshi=myDate.getMilliseconds()+"_"+i;
     //        var productId=$(n).attr("id");
     //        var productName=$(n).attr("productName");
     //      }）；
    document.formManage.action = "<@ofbizUrl>approvedRefund</@ofbizUrl>";
    document.formManage.submit();
}

10.
toggleClass如果存在（不存在）就删除（添加）一个类。
<p>Hello</p><p class="sed">Hello Again</p>
$("p").toggleClass("sed");
<p class="sed">Hello</p>, <p>Hello Again</p>

$(".stripe tr").click(function(){
$(this).toggleClass("click").removeClass("alt")
})
//点击变色,注意：因为有隔行变色，所以这里必须在触发toggleClass时,removeClass("alt")
11.
找到每个span中所有是p元素的祖先元素。
$("span").parents("p")

查找段落的父元素中每个类名为selected的父元素。
$("p").parent(".selected")

<p>Hello</p><p class="selected">Hello cssrain.</p><div>
$("p").next(".selected").html()

12.
<table>
<tr>
      <td><input id="btn1" class="btn" type="button" value="test"/></td>
      <td>some text</td>
</tr>
</table>

$("#btn1").click(function(){
alert($(this).parent().next().html());
//this.parent()是input前面的td
////this.parent().parent()获取的是tr
//////this.parent().parent().parent()获取的是table
////////this.parent().next()获取的是td相临的td
});

13.

获取值：
文本框，文本区域：$("#txt").attr("value")；
多选框checkbox：$("#checkbox_id").attr("value")；
单选组radio： $("input[@type=radio][@checked]").val();
下拉框select： $('#sel').val();
控制表单元素：
文本框，文本区域：$("#txt").attr("value",'');//清空内容
$("#txt").attr("value",'11');//填充内容
多选框checkbox： $("#chk1").attr("checked",'');//不打勾
$("#chk2").attr("checked",true);//打勾
if($("#chk1").attr('checked')==undefined) //判断是否已经打勾
单选组radio： $("input[@type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项
下拉框select： $("#sel").attr("value",'-sel3');//设置value=-sel3的项目为当前选中项
$("<option value='1'>1111</option><option value='2'>2222</option>").appendTo("#sel")//添加下拉框的option
$("#sel").empty()；//清空下拉框

select框值变化时：

$(document).ready(function(){
$('#mySelect').change(function(){
alert($(this).children('option:selected').val());
var p1=$(this).children('option:selected').val();//这就是selected的值
var p2=$('#param2').val();//获取本页面其他标签的值
window.location.href="xx.php?param1="+p1+"¶m2="+p2+"";//页面跳转并传参
})
})
</script>
<select id="mySelect">
<option value="1">one</option>
<option value="2" selected="selected">two</option>
<option value="3">three</option>
</select>

input框变化时：

change方法不起作用，在输入框内容变化的时候不会触发change，当鼠标在其他地方点一下才会触发

用下面的方法会生效：

$('#eangle').keyup(function(event){
$("#tj").trigger("click");
});

文本框，文本区域：
      $("#txt").attr("value")；//获取值
      $("#txt").attr("value",'');//清空内容
      $("#txt").attr("value",'11');//填充内容
多选框checkbox：
      $("#checkbox_id").attr("value")；

或$("#cleanUp").prop("checked")；

$("#chk1").attr("checked",'');//不打勾
      $("#chk2").attr("checked",true);//打勾
      if($("#chk1").attr('checked')==undefined) //判断是否已经打勾

      $("input[@type=checkbox]").each(function(i){ //有无i不影响
       // 此时，this 是 dom里的对象，而不是jQuery里的 $(this)
                if(this.checked)
        // alert(this.value);
             alert($(this).val());都可以
      });

       $("#di input:checked").each(function(){
           // alert(this.value);
          alert($(this).val());都可以
       });
      $("input[@type=checkbox]").not("[@checked]").each(function(){

      })

jQuery("input[type='checkbox']").each(function(){

})

      <input type="checkbox" id="all" onClick="checkAll(this)" />
      function checkAll(obj){
    $(".oisg").attr("checked",$(obj).attr("checked"));
      }

      if ($('#checkbox-id:checked').val() !== null) //如果有一个复选框被选中
      $("input[@type=checkbox][@checked]").each(
           function() {
                    }
      );

      $("#form").submit(function(){
          if ($("input:checked").attr("value")==undefined) {
             alert("请至少选择一个！");
              return false;
             }
           return true;
         });

    if($("#form1 input:checked")){
         alert($("#form1 input:checked").val());
       }

单选组radio：
      $("input[type='radio']:checked").val(); //可用
      $("input[@type=radio][@checked]").val(); //可能有问题
      $("input[name='items']:checked").val();
      $("input[@name=radio_s][@value=16]").attr("checked",true);（//设置value=16的项目为当前选中项）

      radio单选组的第二个元素为当前选中值
      $("input[name='items']").get(1).checked = true;

      $("#form1").submit(function(){
           if($("#form1 input:checked")){
               alert($("#form1 input:checked").val());
       }

下拉框select：
      $('#sel').val(); //获取下拉列表中选中项的value

      $('#sel option:selected').text() //获取select被选中项的文本
      $("#select_id").find("option:selected").text(); //获取Select选择的Text

38.
after:在每个匹配的元素之后插入内容。
<p>I would like to say: </p>
$("p").after("<b>Hello</b>");
结果：<p>I would like to say: </p><b>Hello</b>

wrap:把所有匹配的元素用其他元素包裹起来。
<p>Test Paragraph.</p>
$("p").wrap("<div class='wrap'></div>");
结果：<div class="wrap"><p>Test Paragraph.</p> </div>

39.<td id="changeContent">HTML页面</td>
    <td>
        <select id="s1">
            <option value="1">HTML页面</option>
            <option value="2">下载资源</option>
            <option value="3">超链接资源</option>
            <option value="4">自测题</option>
        </select>
    </td>

$(function(){
    $("#s1").change(function(){
        alert($(this).val()+" "+$(this).text());
           //用$(this).val()获得的是当前选中项的value，但用 $(this)获得的却是所有下拉项的text
           有点疑问。。。知道的哥们在下面给俺说说呗
        $("#changeContent").html( $("option[value="+$(this).val()+"]").html() );
        //$("#changeContent").html($(this).find("option:selected").text());
        });
    });

40、模拟单击事件

事实上你并没有单击，而是系统替你完成的

$(document).ready(function(){
$("#btnParent h3").trigger("click");
});

41、一个例子：

var str = "{'112','121','221','211','121'}";
str = str.replace('{','[').replace('}',']');
alert(str); // ['112','121','221','211','121']
var arr = eval(str); //typeof(arr) == object
//arr = str; //typeof(arr) == string
//alert(arr+" "+typeof(arr));
var reg = /^.*1+.*1+.*$/; // .代表除\n外的任一字符
var count = 0;
jQuery.each(arr,function(i){
if(reg.exec(arr[i])){
count++;
}
});
alert(count);

思路：先转换为 ['112','121','221','211','121']字符串，再通过eval转换为Object类型，最后通过模式匹配获得个数。

易错点：

1、
var arr1 = [ "one", "two", "three", "four", "five" ];
$.each(arr1, function(){
alert(this);
});
//输出：one two three four five
2、
jQuery.each( { name: "John", lang: "JS" }, function(i, n){
alert( "Key: " + i + ", Value: " + n );
});
//结果：Key:name, Value: John
// Key:lang, Value: JS
var obj = { one:1, two:2, three:3, four:4, five:5 };
$.each(obj, function(key, val) {
alert(obj[key]);
});
//输出：1 2 3 4 5
3、
jQuery.each( [3,6,8], function(i, n){
alert( "Item#" + i + ": " + n );
});
//结果：Item#0: 3
// Item#1: 6
// Item#2: 8
var arr2 = [[1, 2, 3], [4, 5, 6], [7, 8, 9]]
$.each(arr2, function(i, item){
alert(item[0]);
});
//输出：1 4 7

window.onload执行的时候，必须要所有的内容都载入才执行(包括窗口，框架，对象和图像等等)，当我们的网页有大量的图片的时候，必须要等待图片全部加载完才能后续执行。
$(document).ready(fn):当DOM载入就绪后就可以绑定一个要执行的函数。因此不必等到所有的内容加载再执行，所以极大地提高web应用程序的响应速度。
$(document).ready()是在DOM结构载入完后执行的，而window.onloal是得在所有文件都加载完后执行的，一个是DOM加载完，一个是所有文件加载完

jQuery.inArray(value,array)
确定第一个参数在数组中的位置(如果没有找到则返回 -1 )。
参数
value (Any) : 用于在数组中查找是否存在
array (Array) : 待处理数组。

var arr = [ 4, "Pete", 8, "John" ];
jQuery.inArray("John", arr); //3
jQuery.inArray(4, arr); //0
jQuery.inArray("David", arr); //-1

1.jquery获取当前元素的索引值

jQuery获取当前元素的索引值还是很方便的，比如一大堆的li，当鼠标移上去的时候，你知道这个li是众多li中的第几个吗？

$("li").hover(function(){
alert($("li").index(this));
});

.index函数还是很好用的。它的说明为：搜索与参数表示的对象匹配的元素，并返回相应元素的索引值。如果找到了匹配的元素，从0开始返回；如果没有找到匹配的元素，返回-1。

2.实现键盘记录的e.which和e.keyCode

具体详见

http://www.cnblogs.com/sunny_kitty/archive/2009/10/28/1591302.html（比较全）

http://zhidao.baidu.com/question/57800991.html

3.jquery鼠标事件

mousedown(fn)
      mouseout(fn)
      mouseover(fn)
      mouseup(fn)

mousemove 事件通过鼠标在元素上移动来触发。事件处理函数会被传递一个变量——事件对象，其.pageX和 .pageY属性代表鼠标的坐标

$(document).mousemove(function(e){
$("span").text(e.pageX + ", " + e.pageY);
});

4.typeof

返回一个用来表示表达式的数据类型的字符串。

typeof 运算符把类型信息当作字符串返回。typeof 返回值有六种可能： "number," "string," "boolean," "object," "function," 和 "undefined."

一、对于数字类型的操作数而言， typeof 返回的值是 number。比如说：typeof(1)，返回的值就是number。
上面是举的常规数字，对于非常规的数字类型而言，其结果返回的也是 number。比如typeof(NaN)，NaN在JavaScript中代表的是特殊非数字值，虽然它本身是一个数字类型。
二、对于字符串类型， typeof 返回的值是 string。比如typeof("123")返回的值是string。
三、对于布尔类型， typeof 返回的值是 boolean 。比如typeof(true)返回的值是boolean。
四、对于对象、数组、null 返回的值是 object 。比如typeof(window)，typeof(document)，typeof(null)返回的值都是object。
五、对于函数类型，返回的值是 function。比如：typeof(eval)，typeof(Date)返回的值都是function。
六、如果运算数是没有定义的（比如说不存在的变量、函数或者undefined），将返回undefined。比如：typeof(sss)、 typeof(undefined)都返回undefined。

结果：

5、Jquery中使用setInterval和setTimeout：

直接在ready中调用其他方法，会提示缺少对象的错误，解决方法如下：
方法1. 应用jQuery的扩展可以解决这个问题。
$(document).ready(function(){

$.extend({
show:function(){
alert("ready");
}
});
setInterval("show()",3000);
});

方法2. 指定定时执行的函数时不要使用引号和括号。
$(function(){
function show(){
alert("ready");
}
setInterval(show,3000);// 注意函数名没有引号和括弧！

// 使用setInterval("show()",3000);会报“缺少对象”

});

区别：

setTimeout()

　　从载入后延迟指定的时间去执行一个表达式或者是函数;

仅执行一次 ;和window.clearTimeout一起使用.

setInterval()

　　在执行时,它从载入页面后每隔指定的时间执行一个表达式或者是函数;(功能类似于递归函数)；和window.clearInterval一起使用.

6、jquery each 函数里面如何实现break与continue?

$('input').each(function(){
if($(this).val() == ''){
// do something
if(1==1)return false; // 使用return false 来实现跳出循环。
else return true; // 使用return true 来实现进入下一个循环。
}
});

7、Jquery去除重复元素：

var a=[1,2,3,3];
jQuery.extend({
uniqueArray:function(a) {
var r=[];
for (var i=0,l=a.length; i<l; ++i){
if(jQuery.inArray(a[i],r)<0) //jQuery.inArray(value, array)
//确定第一个参数在数组中的位置，从0开始计数(如果没有找到则返回 -1 )
r.push(a[i]);
}
return r;
}
})

8、jQuery判断页面元素是否存在

在传统的Javascript里，当我们对某个页面元素进行某种操作前，最好先判断这个元素是否存在。原因是对一个不存在的元素进行操作是不允许的。

document.getElementById("someID").innerText("hi");

如果ID为"someID"的元素不存在，我们将得到Javascript运行错误：document.getElementById("someID") is null

正确的写法应该是：

obj = document.getElementById("someID");
if (obj){
obj.innerText("hi");
}

那么在jQuery，我们如何判断页面元素存在与否呢？如果参照上面的传统Javascript的写法，我们第一个想到的办法一定是：

if ($("#someID")){
$("#someID").text("hi");
}

可是这么写是不对的！因为jQuery对象永远都有返回值，所以$("someID") 总是TRUE ，IF语句没有起到任何判断作用。正确的写法应该是：

//判断jQuery对象的长度
if ( $("#someID").length > 0 ) {
$("#someID").text("hi");
}
//将jQuery对象转换成DOM对象进行判断
if($('#someID')[0]){
}

注意：判断某个页面元素存在与否在jQuery实际上是没有必要的，jQuery本身会忽略对一个不存在的元素进行操作，并且不会报错。

9、二维码扫描后，文本框相当于输入后回车

<tr>
<td>
二维码：<input type="text" id="strQRCode" name="strQRCode" maxlength="100" size="50" onkeypress="if(event.keyCode==13) {btn.click();return false;}"/>
<input type="hidden" value="保存" name="btn" id="btn" onclick="check()"/>
</td>
</tr>

结束了附上原作链接他也是辛苦整理的我复制是因为我怕有一天他突然删掉了

直接复制的还没来得及整理

http://uule.iteye.com/blog/799793

阿里嘎多过撒伊马斯~~~~

jquery基础总结 -- 转载的更多相关文章

jQuery基础---Ajax基础教程（二）
jQuery基础---Ajax进阶内容提纲: 1.加载请求 2.错误处理 3.请求全局事件 4.JSON 和 JSONP 5.jqXHR 对象发文不易,转载请注明出处! 在 Ajax 基础一篇中, ...
jQuery基础---Ajax基础教程
jQuery基础---Ajax基础内容提纲: 1.Ajax 概述 2.load()方法 3.$.get()和$.post() 4.$.getScript()和$.getJSON() 5.$.ajax ...
jQuery基础---Ajax进阶
原文:jQuery基础---Ajax进阶内容提纲: 1.加载请求 2.错误处理 3.请求全局事件 4.JSON 和 JSONP 5.jqXHR 对象发文不易,转载请注明出处! 在 Ajax 基础一 ...
jQuery基础课程
环境搭建搭建一个jQuery的开发环境非常方便,可以通过下列几个步骤进行. 下载jQuery文件库在jQuery的官方网站(http://jquery.com)中,下载最新版本的jQuery文件库 ...
JQuery基础总结上
最近在慕课网学习JQuery基础课程,发现只是跟随网站的课程学习而不去自己总结扩展的话,很难达到真正学会理解的地步. 于是先在网站上草草过了一遍课程,然后借着今天的这个时间边记录边重新整理学习一下. ...
jQuery基础之选择器
摘自:http://www.cnblogs.com/webmoon/p/3169360.html jQuery基础之选择器选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Aja ...
jquery基础知识汇总
jquery基础知识汇总一.简介定义 jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库.源码戳这 jQu ...
【jQuery基础学习】09 jQuery与前端（这章很水）
这章主要是将如何将jQuery应用到网站中,或者说其实就是一些前端知识,对于我这种后端程序来说其实还是蛮有用的. 关于网站结构文件结构前端文件分三个文件夹放 images文件夹用来存放将要用到的图 ...
【jQuery基础学习】00 序
作为一个从来没有认真学过jQuery的菜来讲,我所学的都是jQuery基础. 算是让自己从0开始系统学一遍吧.学习书籍为:<锋利的jQuery>. 虽然是个序,表示一下我是个菜,但还是来几 ...

随机推荐

4.2 js没有块级作用域
JavaScript没有块级作用域.在其他语言上,比如C语言中,有花括号封闭的代码块都有自己的作用域,(如果用ECMAScript的话来讲,就是他们自己的执行环境),因而支持根据条件来定义变量.例如, ...
map/vector erase
问题核心:erase之后迭代器是否失效 vector调用erase之后,该迭代器之后的迭代器都失效: map调用erase之后,其他迭代器并不会失效. vector<int> vecDat ...
php 制作圆形图片
function createRoundImg($imgpath) { $ext = pathinfo($imgpath); $src_img = null; switch ($ext['extens ...
Open source operational tools
操作系统:Centos,Ubuntu,Redhat,suse,Freebsd 网站服务:nginx,apache,lighttpd,php,tomcat,resin 数据库:MySQL,Mari ...
Android库项目中的资源ID冲突
1.前言 Android Studio对模块化开发提供的一个很有用的功能就是可以在主项目下新建库项目(Module),但是在使用库项目时却有一个问题就是资源ID冲突,因为编译时SDK会自动帮我们处理这 ...
TCP和UDP协议的区别
TCP和UDP都是传输层的协议 UDP协议的特点: UDP协议是一种无连接的.不可靠的传输层协议(尽力而为的协议) 为什么说UDP是一种无连接.不可靠的协议呢?UDP协议在传输报文之前不需要在双方之间 ...
使用python和pygame绘制繁花曲线
前段时间看了一期<最强大脑>,里面展示了各种繁花曲线组合成的非常美丽的图形,一时心血来潮,想尝试自己用代码绘制繁花曲线,想怎么组合就怎么组合. 真实的繁花曲线使用一种称为繁花曲线规的小玩意 ...
angularJs模块ui-router之状态嵌套和视图嵌套
原文地址:http://bubkoo.com/2014/01/01/angular/ui-router/guide/nested-states%20&%20nested-views/ 状态嵌套 ...
小白学PYTHON时最容易犯的6个错误，看看你遇到过几个
最近又在跟之前的同学一起学习python,一起进步,发现很多测试同学在初学python的时候很容易犯一些错误,特意总结了一下.其实这些错误不仅是在学python时会碰到,在学习其他语言的时候也同样会碰 ...
sessionStorage和localStorage的用法，不同点和相同点
一,共同点 (1)存储时用setItem: localStorage.setItem("key","value");//以"key"为名称存 ...

jquery基础总结 -- 转载

jquery基础总结 -- 转载的更多相关文章

随机推荐

热门专题