jQuery笔记(一)jQuery简介及选择器的使用

1、JAVASCRIPT类库,简称为JS库

     作用 - 为了简化javascript的开发

     目的 - 预定义了很多对象(属性和方法)和函数

     特点 - 兼容各大浏览器

2、JQUERY

     概述: jQuery其实就是一个JS文件

     分类

         jQuery - Web版本(最主要)

         jQuery UI(User Interface) - 集成UI内容

         jQuery Mobile - 移动版本(WebApp)

         QUnit - 用于测试

扫描二维码关注公众号,回复: 4252188 查看本文章

     使用jQuery的三个步骤

       ①在HTML页面中引入jQuery文件

       ②使用jQuery的选择器定位(获取)页面元素

       ③利用jQuery的API方法完成需求

3、$(selector) - jQuery的工厂函数,该函数返回jQuery对象

       jQuery的约定 - jQuery对象前增加"$"符号

// DOM对象

         var username = document.getElementById("username");

      // jQuery对象

         var $username = $("#id");

4、DOM对象与jQuery对象

         DOM对象 - 通过DOM获取的元素,称之为DOM对象

         jQuery对象 - 通过jQuery包装DOM后产生的对象

           jQuery对象的底层还是DOM对象

  DOM对象与jQuery对象的转换

     DOM对象转换为jQuery对象:$(DOM对象)

     jQuery对象转换为DOM对象:jQuery对象是数组对象

①$jQuery对象[角标]      ②$jQuery对象.get(角标)

 jQuery对象提供get(index)方法

     注意 - DOM对象与jQuery对象之间不能相互调用

 

例:获得DOM对象

  var username = document.getElementById("username"); console.log(username.value);

DOM对象转换成jQuery对象

  var $username = $(username); console.log($username.val());

 

获得jQuery对象

  var $username = $("#username");   console.log($username.val());

jQuery对象转换成DOM对象(jQuery对象是数组对象)

  var username1 = $username[0];   console.log(username1.value);

 jQuery对象提供get(index)方法

var username2 = $username.get(0); console.log(username2.value);

       

5、jQuery程序语句基本语法

   $(选择器字符串)  .   method   (参数行)

      选择器          动作(API)   参数

4、选择器  jQuery的根基

①基本选择器

$("div")标签属性

$("#btn")  id 属性:

$(".item")class属性:

$("*")全部选择器:

$("#d1,.mini")多个选择器并列使用:

$(".d1.mini")需要同时具有.d1类和.mini类

②层级选择器

$("body div")祖先与后代

$("body>div")父元素与子元素

$("#one+div")选择id为one后的第一个兄弟元素,且必须为div

$("#one~div")选择id为one后面所有div元素

 

③基本过滤选择器(过滤选择器在选择器前,具有":"符号)

$("div:first")获取div元素中的第一个

$("div:last")获取div元素中的最后一个

$("div:even")获取索引值为偶数的div元素,索引值从0开始!!

$("div:odd")获取索引值为奇数的div元素

$("div:gt(1)")获取索引值大于1的div元素 great than

$("div:lt(1)")获取索引值小于1的div元素 less than

$("div:eq(1)") 获取索引值等于1的div元素 less than

$("div:not('.mini')")获取class不为mini的div元素(包含没有class属性的div元素)

$(":header")获取所有标题元素(h1 - h6) - 不常用

$(":animated")获取当前正在执行动画的元素

 

④子元素过滤选择器

$("div:nth-child(2)")获取div元素的子元素是第二个

$("div:first-child")获取div元素的第一个子元素      

$("div:last-child")获取div元素的最后一个子元素

$("div:only-child")如果哪个div元素只有一个子元素,那么选中

 

 

⑤内容过滤选择器

$("div:contains('div11')")文本包含"div11"的div元素

$("div:empty")不包含任何文本内容或子元素的div元素

$("div:parent")包含任何文本内容或子元素的div元素  

$("div:has('.mini')") 包含class为mini的div元素的父div元素

 

 

⑥可见性过滤选择器

$("div:visible")可见的div元素

$("div:hidden")不可见的div元素

 

⑦属性过滤选择器

$("div[title]")包含属性title的div元素

$("div[title=text1]")包含属性title=text1的div元素

$("div[title!=text1]")包含属性title!=text1的div元素(包含没有该属性的div元素)

$("div[title^=text]")包含属性title值是以text开始的div元素

$("div[title$=t1]")// 包含属性title值是以t1结束的div元素

$("div[title*=t1]")包含属性title值包含t1的div元素

$("div[title$=t1][id]")多个属性过滤选择器并列使用包含属性title值是以t1结束的,包含id属性的div元素

 

⑧表单对象属性过滤选择器

$("input:enabled") 改变页面中可用元素的value属性值

$("input:disabled")改变页面中不可用元素的value属性值

$("input[name=love]:checked")被选中的单选框

 

 

⑤选择器的建议

         不用记 - 会查jQuery的帮助文档即可

         多练 - 9个页面

 

猜你喜欢

转载自blog.csdn.net/shilipeng666/article/details/84502860
今日推荐