zoukankan      html  css  js  c++  java
  • jquery学习成长记(一)

    一、js与jquery的区别 

    js是一种脚本语言,而jquery对它进行了封装使得js开发起来更简单。

    二、新建web项目步骤

     1、新建web项目时选择第二个,取一个项目名称。                                                                    

    2、系统生成的多余文件夹删掉,仅留下Scripts和Web.config:

    3、修改Scripts文件夹为js,新建文件夹css和image,并在对应位置添加需要的页面,css样式文件与js文件。

    4、将.min.js文件拖动到html中,将自己新建的js文件拖动到它下方  

    *这里引入js有先后顺序,先引用jquery文件,再引用js。 

      将Script文件夹中的第一个js文件(_references.js),拖动到自己新建的js文件里的最上面  

      *此步骤作用:让jq显示智能提示,方便写代码。 

      完成以上步骤,即可开始正常程序编写。

    三、jquery执行过程与写法

    1、jq执行过程分为下面5个步骤:

    a、 对页面进行加载:$(function(){  });

    b、 找到对象,如id标签:$(“#btn”)

    c、 执行对象相应事件:click();

    d、 声明事件:function(){  }

    e、 执行事件内容:alert();

    jquey写法

    例:给html中id名称为btn的执行一个点击事件,执行事件的内容是弹出aaaa;

    html:

    <input type="button" value="jq按钮" id="btn"/>

    js:

    $(function () {     $("#btn").click(function () {         alert("aaaa");     });

    });

    js写法

    $(function () {

      document.getElementById("btn").onclick = function () {         alert("aaaa");

    });

    2、Js对象转jquery对象

    var v=document.getElementById("v"); //DOM对象 var $v=$(v); //jQuery对象  转换后,就可以任意使用jQuery的方法了。

    例子:

    html:

    <input type="button" value="js按钮" id="btn"/>

    js:

      var obj = document.getElementById("btn"); //DOM对象     var $obj = $(obj); //jQuery对象     $obj.click(function () {         alert("aaaa");     }); 

    3、jquery对象->js

    $("#btn")           //jQuery对象 $("#btn")get(0)       //jQuery对象->原生的DOM对象

    例:jquery对象->js就,就可以执行js事件了

    html:<input type="button" value="jq按钮" id="btn"/>

    js:   var obj = $("#btn").get(0);      obj.onclick = function () {         alert("aaa");     }

    优先级问题:当css和jq中同时设置了样式时,遵循就近原则,此时的jq写法,类似于在html标签内加一个style样式来写,所以优先jq。

    四、jq选择器

      $(“tr:odd”), 选择所有位于奇数行的< tr >标记 

      $(“tr:even”) ,选择所有位于偶数行的< tr >标记

    【例】表格隔行换色的效果

    $(function(){

      $(“tr:odd”).css(“background”,”#f8f3d2”);      //偶数行的背景颜色为#f8f3d2

      $(“tr:even”).css(“background”,”#ffcdcd”);    //奇数行的背景颜色为#ffcdcd

    });

    2、eq(n)选择器:$("X:eq(n)")

      对X标签的第n+1个X标签进行选择,也可以写作$(“X”).eq(n)。

      如:$(“tr”).eq(2),是指tr标签的第三行进行选择。

    3、 特殊

    nth-child(n)选择器:$(“X:nth-child(n)”) 

      对X标签的第n个X标签进行选择。

      如:$(“td:nth-child(3)”) ,是指第3列;  $(“li:nth-child(4)”),就是第4个li标签。

     $(“li>a”) 返回<li>标记的所有子元素<a>,不包括孙标记。

    (“a[href$=pdf]”)选择所有超链接,并且这些超链接的href属性是以“pdf”结尾;

    4、功能函数

    $trim(sString); 去掉前后空格;

    去掉中间空格:

    用正则:

       var sString = "hello  world";     String.prototype.NoSpace = function() {  return this.replace(/s+/g, ""); }     alert(sString.NoSpace());

    转换为数组:【

    例】去掉字符串中间空格:(把字符串变成字符数组,然后把空格替换成无)

    var s="das  das";

    var aChar=s.split("");         //将字符串变为字符数组

    for(var i=0; i<aChar.length;i++)

    {

                  if(aChar[i]==" ")      //当遇到某个字符是空格时

                  {

                         s=s.replace(" ","");  //将此空格替换成无(从空格替换到连空格都不是)

                  }

    }

    alert(s);               //打印s

    5、创建DOM元素

        var oNewP = $("<p>这是一个感人肺腑的故事</p>");  //创建DOM元素     oNewP.insertAfter("#btn");  //insertAfter()方法

         将dom元素p插入#btn标签后面

    6、属性选择器

    6.1 所有标签写法$(“某标签[某属性]”):选出带有某种属性的某标签。

    6.1.1$(“a[title]”).addClass(“myClass”)  给a标签的title属性增加myClass样式

    6.1.2 $(“a[href=’10-9.html’]”).addClass(“myClass”)  给a标签的href=’10-9.html’属性增加myClass样式

    6.2.3 $(“a[href^=http://]”).addClass(“myClass”) 所有以http://开头的a标签

    6.2.4 $(“a[href$=html]”).addLClass(“myClass”) 所有以html结尾的a标签

    6.2.5 $(“a[href*=isaac]”).addClass(“myClass”) 所有href中含有isaac的a标签

    7、包含选择器

      $(“某标签:has(某属性)”):选出包含某属性的所有某标签。如:$(“li:has(a)”) 包含超链接的所有li标记

    8、位置选择器

      $(“某标签:某位置”) :选出某特定位置的某标签。如:

    1)$(“p:first”) 选择页面中的第一个p标签

    2)$(“p:last”) 选择页面中的最后一个p标签

    3)$(“p:first-child”)  选择所有的p标记,且这些p标记是其父标记的第一个标记。

    4)$(“p:last-child”)  选择所有的p标记,且这些p标记是其父标记的最后一个标记。

    5)$(“p:nth-child(odd)”).addClass(“myClass”) 选择所有的p标记,且这些p标记是其父标记的偶数行。

    6)$(“p:odd”).addClass(“myClass”) 整个页面的偶数行p标记

    7)$(“p:eq(4)”).addClass(“myClass”) 第五个p标记增加class样式

      $("p").eq(4).addClass(“myClass”)

      $("p").eq(4).css("color","red") 相当于style

    8)$(“p:gt(n)”).addClass(“myClass”) 第n个(从0开始,不包括n本身)p标记之后的所有p标记,也就是从第n+2个标记开始算,如$(“p:gt(2)”)就是从第四个p开始。

    9、过滤选择器

     过滤选择器

      *备注:$(":file") 等价于$(“input[type=file]”)

    $(“:button”)

    所有按钮

    $(“:checkbox”)

    所有复选框,等同于$(“input[type=’checkbox’]”)

    $("div:contains(' foo ')")

    所有包含了文本“foo”的元素

    $(“:disable”)

    所有被禁用的元素(此写法有问题,代替写法:$("input[disabled=disabled]").attr("value", "aaa");)

    $(“:enable”)

    所有没有被禁用的元素

    $(“:file”)

    所有上传文件

    $(“:input”)

    所有表单元素

    $(“:selected”)

    所有下拉菜单中被选中的项

    $(“:visible”)

    所有可见的元素

    $(“:submit”)

    所有提交按钮

    14、反向过滤器:

      $(“标签:not(:某属性)”):选出所有不具备某属性的某标签。 

      意思为:过滤掉所有含有“某属性”的标签,留下其它不具备该属性的标签。 

      如:$(“a:not(:target)”),意思就是选出所有没写target的a标签。

  • 相关阅读:
    C. Shaass and Lights 解析(思維、組合)
    D. Binary String To Subsequences(队列)(贪心)
    CodeForces 1384B2. Koa and the Beach (Hard Version)(贪心)
    CodeForces 1384B1. Koa and the Beach (Easy Version)(搜索)
    CodeForces 1384C. String Transformation 1(贪心)(并查集)
    CodeForces 1384A. Common Prefixes
    POJ-2516 Minimum Cost(最小费用最大流)
    POJ3261-Milk Patterns(后缀数组)
    HDU-1300 Pearls(斜率DP)
    HDU-4528 小明系列故事-捉迷藏(BFS)
  • 原文地址:https://www.cnblogs.com/xiaosy/p/4675695.html
Copyright © 2011-2022 走看看