xml地图|网站地图|网站标签 [设为首页] [加入收藏]

正规赌博十大app排名

当前位置:网上十大正规赌博平台 > 正规赌博十大app排名 > jquery对象访问是什么及使用方法介绍,jquery实现

jquery对象访问是什么及使用方法介绍,jquery实现

来源:http://www.nb-machinery.com 作者:网上十大正规赌博平台 时间:2019-07-10 22:00

前两天班级聚会,除了吃喝玩乐就是睡觉扯淡,甚是喜悦,真是独乐乐不如众乐乐啊。

本篇是继上篇jQuery核心函数之后介绍如何访问jQuery对象。

网上好多代码都是错的

PS:毕业的或即将毕业的有时间能聚就聚吧,毕了业以后属于自己的时间能聚到一块儿可就少太多了。

jquery对象访问

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery实现全选和全不选功能效果的实现代码【推荐】</title>
</head>
<script src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
  $(document).ready(function () {

    $("#checkedAll").click(function () {

      //alert("aa");


      if ($(this).attr("checked")) { // 全选 

        $("input[name='checkbox_name']").each(function () {
          $(this).attr("checked", true);
        });
      }
      else { // 取消全选 

        $("input[name='checkbox_name']").each(function () {
          $(this).attr("checked", false);
        });
      }
    });

  }); 

</script> 

<body>
<input type="checkbox" name="checkbox_name" id="checkbox_name_1" />1<br />
<input type="checkbox" name="checkbox_name" id="checkbox_name_2" />2<br />
<input type="checkbox" name="checkbox_name" id="checkbox_name_3" />3<br />
<input type="checkbox" name="checkbox_name" id="checkbox_name_4" />4<br />
<input type="checkbox" name="checkedAll" id="checkedAll"/>全选/取消全选
</body>
</html>

现在有点时间来看点东西总结些东西了,又因为前段时间片片断断地看了看JavaScript的函数部分,所以抽时间总结下函数的相关部分,当然,里面有些部分都是自己的理解,如果有理解的不对的地方还请小伙伴们不吝指出。

each(callback)

以上这篇jquery实现全选和全不选功能效果的实现代码【推荐】就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

这一节我结合自己的理解和小伙伴们聊一下函数声明的声明提前。

图片 1

您可能感兴趣的文章:

  • jQuery CheckBox全选、全不选实现代码小结
  • 基于JQuery实现CheckBox全选全不选
  • jquery 实现checkbox全选,反选,全不选等功能代码(奇数)
  • jquery实现checkbox全选全不选的简单实例
  • jquery实现checkbox 全选/全不选的通用写法
  • jquery全选/全不选/反选另一种实现方法(配合原生js)
  • JQuery选中checkbox方法代码实例(全选、反选、全不选)
  • 基于jQuery实现复选框的全选 全不选 反选功能
  • js与jQuery实现checkbox复选框全选/全不选的方法
  • jquery实现全选、全不选以及单选功能

注:有的地方也叫函数声明提升。翻译的不一样,意思一样,大家理解就行。理解万岁!

size()

在聊函数声明的声明提前之前,有必要介绍下函数定义的几种方法,大部分小伙伴们应该都不陌生。了解的或者不想了解的就痛快地一滚轮滚下去吧,不熟悉的或者想再熟悉一下的就放慢脚步起步走。

图片 2

定义函数的方法

length

定义函数的方法主要有三种:

图片 3

1.函数声明(Function Declaration)
2.函数表达式Function Expression)
3.new Function构造函数
其中,经常使用的是函数声明和函数表达式的函数定义方法,这两种方法有着很微妙的区别和联系,而且这两种方法的使用也容易混淆,所以这篇文章主要总结下这两种函数定义方法的相关知识点,当然本文的主题依然是关于函数提前的。

selector

函数声明的典型格式:

图片 4

function functionName(arg1, arg2, ...){
  <!-- function body -->
}

context

函数表达式

图片 5

•函数表达式的典型格式:

get()

var variable=function(arg1, arg2, ...){
      <!-- function body -->
}

图片 6

包含名称(括弧,函数名)的函数表达式:

get(index)

var variable=function functionName(arg1, arg2, ...){
    <!-- function body -->
}

图片 7

像上面的带有名称的函数表达式可以用来递归:

index([subject])

var variable=function functionName(x){
    if(x<=1)
      return 1;
    else
      return x*functionName(x);
}

图片 8

声明提前

测试用例

var声明提前

以下是通过代码的方式测试上述jQuery对象访问,供不明白的朋友们参考:

小伙伴们应该都听说过声明提前的说法,我想在此再次重申一遍,因为声明提前是函数声明和函数表达式的一个重要区别,对于我们进一步理解这两种函数定义方法有着重要的意义。

<!DOCTYPE html>
<html>
<head>
  <title>jquery对象访问</title>
  <script type="text/javascript" src="./js/jquery.min.js"></script>
</head>
<body>
<!--
  jquery对象访问之一each(callback)
-->
<div>
  span1
  span2
  span3
  span4
  span5
</div>
<script type="text/javascript">
  var spanList = $("div span");
  spanList.each(function(){
    // alert(this.innerHTML);  //这个获取的是span元素而不是jQuery对象,这点需要注意。依次输出span1 ... span5
    // alert($(this).html()); //输出结果同上 只是$(this)会将元素转为jQuery对象
    if($(this).html() == "span4")
      return false;      //可以提前使用return 退出循环
  });
</script>
<!--
  jquery对象访问之二size()
-->
<script type="text/javascript">
  // alert($("div span").size());  //输出结果5 size()函数是获取jQuery集合中元素的个数
</script>
<!--
  jquery对象访问之三length
-->
<script type="text/javascript">
  // alert($("div span").length);  //输出结果5 当前匹配的元素个数.同size 返回相同的值
</script>
<!--
  jquery对象访问之四selector
-->
<ul id="ul1"></ul>
<script type="text/javascript">
  $("#ul1")
   .append("<li>"   $("ul").selector   "</li>")
   .append("<li>"   $("ul li").selector   "</li>")
   .append("<li>"   $("div#foo ul:not([class])").selector   "</li>");
</script>
<!--
  jquery对象访问之五context
-->
<ul id="ul2"></ul>
<script type="text/javascript">
  $("#ul2")
   .append("<li>"   $("ul").context   "</li>")
   .append("<li>"   $("ul", document.body).context.nodeName   "</li>");
</script>
<!--
  jquery对象访问之六get()
-->
<div id="get">
  get1
  get2
  get3
  get4
</div>
<script type="text/javascript">
  var spans = $("#get span");
  var span1 = spans.get();
  // alert(span1);  // 返回的是span元素的集合
  // alert($(span1).html()); //输出结果get1 将节点元素包装成jQuery对象
</script>
<!--
  jquery对象访问之七get(index)
-->
<div id="get">
  get1
  get2
  get3
  get4
</div>
<script type="text/javascript">
  var spans = $("#get span");
  var span1 = spans.get(0);
  // alert(span1.innerText); //输出结果是get1 通过节点元素
  // alert($(span1).html()); //输出结果同上   将节点元素包装成jQuery对象
</script>
<!--
  jquery对象访问之八index([subject])
-->
<ul id="ul8">
 <li id="foo">foo</li>
 <li id="bar">bar</li>
 <li id="baz">baz</li>
</ul>
<script type="text/javascript">
  alert($('#ul8 li').index(document.getElementById('bar'))); //1,传递一个DOM对象,返回这个对象在原先集合中的索引位置
  alert($('#ul8 li').index($('#bar'))); //1,传递一个jQuery对象
  alert($('#ul8 li').index($('#ul8 li:gt(0)'))); //1,传递一组jQuery对象,返回这个对象中第一个元素在原先集合中的索引位置
  alert($('#bar').index('#ul8 li'));   //1,传递一个选择器,返回#bar在所有li中的做引位置
  alert($('#bar').index()); //1,不传递参数,返回这个元素在同辈中的索引位置。
</script>
</body>
</html>

但是再说函数声明提前之前呢,有必要说一下var声明提前。

运行结果

先给出var声明提前的结论:

图片 9

本文由网上十大正规赌博平台发布于正规赌博十大app排名,转载请注明出处:jquery对象访问是什么及使用方法介绍,jquery实现

关键词: www.4355mg.c

上一篇:一分钟理解js闭包,js详细说明

下一篇:没有了