关于JQuery的一些总结

 

0.导入JS文件

 

<script src="js/jquery-1.8.3.js" type="text/javascript"></script>
  
1.基本语法
  $(选择器).action();  其中选择器用于查找，选择HTML元素，action表示要执行的操作。
 
2.//为了防止文档加载完成前运行jQuery,所以加上此句。防止操作失败。
     $(document).ready(function(){ 
             jQuery函数代码；
        });
3.选择器:就是根据条件找到需要的html元素。
    基本选择器：
    $("h2").click(function(){   //获取<h2>元素并为其添加click事件函数
  $("h3").css("background-color","#09F"); //标签选择器，获取<h3>元素并为其添加背景颜色
  //$(".title").css("background","#09F");//类选择器，获取并设置所有class为title的元素的背景颜色
  //$("#box").css("background","#09F");//ID选择器，获取并设置id为box的元素的背景颜色
  //$("h2,dt,.title").css("background","#09F");//并集选择器，获取并设置所有<h2>、<dt>、class为title的元素的背景颜色
  //$("h2.title").css("background","#09F");//交集选择器，获取并设置所有class为title的<h2>元素的背景颜色
          //$("*").css("color","red");//全局选择器，改变所有元素的字体颜色
  });
 层次选择器：
 $("#menu span").css("background-color","#09F");//后代选择器，获取并设置#menu下的<span>元素的背景颜色
   //$("#menu>span").css("background-color","#09F");//子选择器，获取并设置#menu下的子元素<span>的背景颜色
   //$("h2+dl").css("background-color","#09F");//相邻选择器，获取并设置紧接在<h2>元素后的<dl>元素的背景颜色
   //$("h2~dl").css("background-color","#09F");//同辈选择器，获取并设置<h2>元素之后的所有同辈元素<dl>的背景颜色
 属性选择器：
                   $("h2[title]").css("background-color","#09F");//改变含有title属性的<h2>元素的背景颜色
    //$("[class=odds]").css("background-color","#09F");//改变class属性的值为odds的元素的背景颜色
    //$("[id!=box]").css("background-color","#09F");//改变id属性的值不为box的元素的背景颜色
    //$("[title^=h]").css("background-color","#09F");//改变title属性的值中以h开头的元素的背景颜色
    //$("[title$=jp]").css("background-color","#09F");//改变title属性的值中以jp结尾的元素的背景颜色
    //$("[title*=s]").css("background-color","#09F");//改变title属性的值中含有s的元素的背景颜色
    //$("li[class][title*=y]").css("background-color","#09F");//改变包含class属性，且title属性的值中含有y的<li>元素的背景颜色 
 基本过滤选择器：
   $("h2").click(function(){
   $("li:first").css("background-color","#09F");//改变第1个<li>元素的背景颜色
    //$("li:last").css("background-color","#09F");//改变最后一个<li>元素的背景颜色
    //$("li:not(.three)").css("background-color","#09F");//改变class不为three的<li>元素的背景颜色
    //$("li:even").css("background-color","#09F");//改变索引值为偶数的<li>元素的背景颜色
    //$("li:odd").css("background-color","#09F");//改变索引值为奇数的<li>元素的背景颜色
    //$("li:eq(1)").css("background-color","#09F");//改变索引值等于1的<li>元素的背景颜色
    //$("li:gt(1)").css("background-color","#09F");//改变索引值大于1的<li>元素的背景颜色
    //$("li:lt(1)").css("background-color","#09F");//改变索引值小于1的<li>元素的背景颜色
    //$(":header").css("background-color","#09F");//改变所有标题元素，例如<h1>,<h2>,<h3>……这些元素的背景颜色
    //$(":focus").css("background-color","#09F");//改变当前获取焦点的元素的背景颜色
  });

 

4.JQusery AJAX
  load(URL，data,callback)方法加载。
   1 url规定需要加载的URL，是必须的参数。
   2.data是可选参数，指定与请求一同发送的参数字符串健值对的集合。
   3.callback回掉函数，指定load方法执行完成之后执行的函数。
5.get方法和post方法

 

jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。

 

$.get() 方法通过 HTTP GET 请求从服务器上请求数据。

 

语法：$.get(URL,callback);

$.post() 方法通过 HTTP POST 请求从服务器上请求数据

 

语法：$.post(URL,data,callback);

 

转载于:https://www.cnblogs.com/xgwtzg/p/6140296.html