jQuery基础及选择器

jQuery基础及选择器

 

jQuery基础及选择器

 

 

1.jquery官网:  http://jquery.com

2.在页面引入jQuery : <script src="js/jquery-1.12.4.js" type="text/javascript"></script>

3.ready()方法: [使用jQuery弹出提示框]

  实例: 

    <script>

      $(document).ready(function() {

        alert("我的第一个jQuery示例!");

      });

    </script>

  window.onload与$(document).ready()类似 , 但也有区别

  window.onload $(document).ready()
执行时机

必须等待网页中所有内容加载完毕后

(包括图片,flash,视频等)才能执行

网页中所有DOM文档结构绘制完毕后即刻执行,

可能与DOM元素关联的内容(图片、flash、视频等)

并没有加载完

编写个数 同一页面不能同时编写多个

同一页面能同时编写多个

简化写法

$(function(){

  //执行代码

});

4.jquery语法规则:

  1.工厂函数$() : 将DOM对象转化为jquery对象

  2.选择器selector : 获取需要操作的DOM元素

  3.方法action() : jQuery中提供的方法 , 其中包括 绑定时间处理的方法

  语法: $(selector).action() ;

5.jquery操作页面元素

  1.使用addClass()方法为元素添加样式

    语法: jQuery 对象 . addClass([样式名]);

    实例: 

      $("tr:odd").addClass("odd");

      $("tr:even").addClass("even");

  2.使用css()方法设置元素样式

    语法: 

      css("属性" , " 属性值") ; 

      css({"属性1" : "属性值1" , "属性2" : "属性值2" .....});

    实例: 

      $(this).css({"background":"#c81623"});

  3.使用show() , hide() 方法设置元素的显示和隐藏

    语法:

      $(selector).show() ;

      $(selector).hide() ;

    实例: 

      $(this).children("div").show();

       $(this).children("div").hide();

6.jQuery代码风格: 

  1.$等同于"jQuery"

    $(document).ready()等同于jQuery(document).ready()

    $(function(){...})等同于jQuery (function(){...})

  2.链式操作

    对一个对象进行多重操作, 并将操作结果返回给该对象

    实例: 

      $("h2").css("background-color","#ccffff").next().css("display","block");

  3.隐式迭代

    实例:

      $(document).ready(function() {

        $("li").css({"font-weight":"bold","color":"red"});

      });

7.DOM对象和jQuery对象

jQuery基础及选择器

 

 8.jQuery选择器 : 

  jQuery基础及选择器

 

   基本选择器:

    实例: 

      $("h1").css("color", "blue"); //标签选择器

      $(".price").css({"background":"#efefef","padding":"5px"}); //类选择器

      $("#author").css("clor", " #083499"); //id选择器

      $(".intro,dt,dd").css("color", " #ff0000"); //并集选择器

      $("*").css("font-weight", "bold"); //全局选择器

  层次选择器: 

    实例: 

      $(".textRight p").css("color","red"); //后代选择器

      $(".textRight>p").css("color", "red"); //子选择器

      $("h1+p").css("text-decoration", "underline"); //相邻元素选择器

      $("h1~p").css("text-decoration", "underline"); //同辈元素选择器

  属性选择器: 

    实例:

      $("#news a[class]").css("background","#c9cbcb");//a标签带有class属性

      $("#news a[class=‘hot‘]").css("background", "#c9cbcb"); // class为hot

      $("#news a[class!=‘hot‘]").css("background", "#c9cbcb");// class不为hot

      $("#news a[href^=‘www‘]").css("background","#c9cbcb");//以www开头

      $("#news a[href$=‘html‘]").css("background", "#c9cbcb");//以html结尾

      $("#news a[href*=‘k2‘]").css("background","#c9cbcb"); //包含"k2"的元素

jQuery基础及选择器

上一篇:深入浅出Vue.js(四) 整体流程


下一篇:php 字符 常用函数