jQuery选择器

1:jquery介绍
  什么是jquery: javascript框架(js库/js类库)
  定义-预封装了很多的对象和函数
  目的-简化javascript开发
  优势-兼容各大浏览器


2:主流js库
  -jquery     - 最多，最经典
  -prototype  - 出现早基于原型js库 7 8
  -ExtJs      - 外观精美 [企业内部项目]
   OA/CMS/ 
  -YUI        - ..

  -

jquery 介绍[了解]
 06月1月推出
 分类 http://jquery.com
 *jquery - web版本.
 *jquery UI  - {User Interface  用户界面}
  日历 自动补全 .. 
 *jquery Mobile - 针对移动开发
 *QUnit      - 测试js 代码


 版本:
 1:官网下载
 a:1.xx 浏览器全兼容版本[主流] iE 6 7 8
   百度统计: google/IE 8/FF/...
             360 安全
   站长之家:
   1.4.2 :企业级项目主流开发版本
   稳定、了解比较多.
   1.8.3 :互联网项目开发主流版本
   1.12 
   jquery-1.11.3 上课讲解 
 b:2.xx - 说明不支持IE
                    IE 6 7 8

 #如使JQUERY
 *引入jquery文件!!!!
 经验:引入文件路径{不要有中文不要空格}
      系统开发/window
      上线    /linux
 *定位页面元素(通过jquery选择器)
 *使用jquery提供API完成功能


 $("");
 jQuery("");

DOM和jquery
 *DOM对象-通过DOM获取的页面的元素
   id name tagName class querySelector


 *jquery对象-封装DOM对象后，所产生的新对象
    (jquery对象{DOM对象})
  $("#user")
 *DOM对象与JQUERY对象之间的转换
  *DOM->JQUERY
  var $user =  $(DOM对象)
  *JQUERY->DOM
   get(index) 下标
   [index] 方式
 *jquery对象是类数组对象!!!!!!!!!


 
 2:jquery选择器
 作用:定位元素
 jquery选择器设计思路来源css选择器 
 !基本选择器
 a:#id选择器        #id属性名
 b:.class选择器     .class属性名
 c:元素选择器       标签名称
 d:组合选择器       标签名称,标签名称,....
 e:通配符选择器     *
 $("")
 03_jquery选择器.html


 #错误 FILE_NOT_FOUND 
 原因:jquery文件没有引入成功
 #在jquery选择器或者方法参数不正确不报错..
 #一行一行调试
 #开发者工具当中  source

软件项目中乱码:
解决:编码统一不会出乱码问题.
gb2312
utf-8
gbk


1:编码多少种，各有优缺点


iso-8859-1
latin-1
以上二种编码只支持西欧国家文字[不支持中文]


gb2312    6000多  简体中文
gbk       19000多 简体繁体中文 韩 日
gb18030   20000多 简体繁体中文 韩 日
以上三种国内标准:


**utf-8   互联网标准{全世界所有国家地区文字}
utf-16
utf-32
**utf-8mb4 你的项目/针对苹果手机用户
           表情:一个表情符号占4个字节


2:如何处理乱码问题
2.1:保存网页指定编码 utf-8


注意:保存使用utf-8不是 utf-8+BOM




2.2:强制让浏览器显示网页使用 utf-8显示网页
   <meta http-equiv="content-type" content="text/html;charset=utf-8" /> 

解决几个问题
1:调试JS程序工具!!!!!!!!
a:google  提供开发者工具
b:firefox firebug[作业]
以上二种工具功能类似
F12
console  控制台            {调试js代码}
console.log();  输出日志...
console.info(); 信息
console.warn(); 警告
console.error();错误
console.dir();  查看当前对象所有属性方法.


elemetns 页面元素定位      {html;css;}
sources  断点调试          [断点调试]
1:分析代码定位可能产生错误行-->仃止{设置断点}
  只有在sources标签页里可以设置断点.
2:运行 F5
3:运行到了{断点}仃止 程序不再向后运行
4:查找所有变量当前值是多少
5:F10 一行一行调试
  F11 进入函数内部调试
  shift+f11 跳出函数
network  抓取网络传输数据  [调试网络]
wamp


2:jquery对象是类数组对象
  $user = $("#user");
  var u = $user[0];
  console.log($("#user").length);
#知识点，jquery对象本身就是类数组对象
看jquery源代码;
70   jQuery = function( selector, context ) {    
73   return new jQuery.fn.init( selector, context );
2776 init = jQuery.fn.init = function( selector, context ) 
2878 return jQuery.makeArray( selector, this );
412 makeArray: function( arr, results ) {
var ret = results || [];




基本:
id class 元素 组合 通配符




层级选择器!!!!!
父子元素         select1>select2
祖先与后代元素   select1 select2
下一个兄弟元素   select1+select2
后面所有兄弟元素 select1~select2


过滤选择器            : []
:first 匹配第一个元素
:last  匹配最后一个元素
:even  匹配索引值为偶数元素
:odd   匹配索引值为奇数元素
:eq    匹配等于索引元素      0
:gt    匹配大于索引元素
:lt    匹配小于索引元素
:not   匹配不为元素
:header   匹配h1~h6元素
:animated 匹配动画元素
#动画必须jquery产生才可以选中




可见性过滤器
:hidden     隐藏
  1:css display:none;
  2:表单 隐藏域 
:visible    可见
子元素过滤器中
:first-child 第一个子元素
:last-child  最后一个子元素
:nth-child(1)   第几个
#位置1开始
:only-child  只有一个子元素


属性过滤器[!!!]
<div id="box" class="admin" data-i="0"></div>


[attr]       匹配包含指定属性 
[attr=val]   匹配包含指定属性并且值等于
[attr!=val]  匹配包含指定属性并且值不等于
[attr^=val]  匹配包含指定属性并且值开头
[attr$=val]  匹配包含指定属性并且值结尾
[attr*=val]  匹配包含指定属性并且值包含 
[][][]         多个


内容过滤选择器
:contains(text) 匹配包含指定文本元素
:parent         包含子元素或文本内容的元素
:empty          不包含子元素或文本内容的元素
:has(selector)  包含指定元素的元素
#注意:最后一个指定元素的父元素


表单
:disabled   匹配包含属性disabled(不可用)元素
:enabled    匹配不包含属性disabled(可用)元素
:selected   匹配被选中的下拉列表的选项
:checked    匹配被选中的radio和checkbox元素的选项
表单选择器
:input
:text
:password
:submit
:radio
:file
:checkbox
....




表单当中使用禁用
1:disabled="disabled"
结果没有写这个项目一样
2:readonly="readonly"
只是不能修改