前端之JQuery

        jquery是一个快速简洁的js框架，它对js进行了封装，使用更少的代码实现我们想要实现的功能。

 

jquery的引入

 

     juqery需要引入js包

       

    在开发中我们常用外链式方式进行jquery

      

 

jquery页面加载

       在jquery中开头写的语句就是页面加载函数 有两种形式，但是我们常用的就是

        $(function(){   });

       另外一种：

$(document).ready(function(){   // 在这里写你的代码... });

在js中window.οnlοad=function(){}

 

juery对象

 

在js中我们通过document.getElementById("")来获取对象

在juery中我们表示一个对象的方式很简单

    $("#id")

    $(".class")

    $("标签")   这也是基本的选择器表示方式

 

juery属性

 

 在js中

          var eleObj=document.getElementById("")；

   eleObj.value()  -----js中获取元素的值

         $("").val() -----jquery中获取元素的值

 

.attr（key,value）设置属性

.val() 获取文本框中的值 也用于获取 check或是select中的值

.val(context)设置文本框中的值

.text() 返回元素的文本内容  .text(contex)设置文本内容

.html() 获取元素的内容 .html(context) 设置元素的内容和js中JavaScript代码相同

 

 

选择器

 

       基本选择器：利用选择器改变css样式

          $("#id").css(key:value);

          $(".class").css(key:value);

          $("标签").css(key:value);

    层次选择器

 

       $( ancestor  descendant) 祖先  子孙后代  对象是子孙后代

       $(parent>child)    在给定的父元素下匹配所有子元素

       $(prev+next)       匹配所有紧接在 prev 元素后的一个 next 元素

        $(pre~siblings) 匹配 prev 元素之后的所有 siblings(兄弟姐妹同辈) 元素  

       对于不同的对象，获取的内容也不相同   $(#ansor  div)  和$(#ansor>div)的效果是相同的

   

基本过滤器

   ：first

 ：last

 ：not(selector)

 :odd 奇数行

  .. 等等 具体可以查看API

  使用方式 标签：过滤属性

 

属性选择器常见

      [属性名=值]  也就是key=value的形式

    

     $("input[name='newsletter']").attr("checked",true);

 

表单属性：

      ：enabled

  ：disabled

  ：checked

  ：selected   $("select  option:selected")

  获取对象的形式 $(标签[key=value])的形式