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标签。

  • 相关阅读:
    关于JDK中的设计模式
    关于Java中的构造方法和set方法()给属性赋值
    关于Object[]数组强转成Integer[]类型的数组.
    [ImportNew]Java中的Timer类和TimerTask类
    关于Linux最基本总结
    关于数组
    关于Linux系统和Windows系统中文件夹的命名规范
    关于数组集合之间的转换
    关于Java获取系统信息
    关于Windows常用命令
  • 原文地址:https://www.cnblogs.com/xiaosy/p/4675695.html
Copyright © 2011-2022 走看看