标签：压缩 不兼容 dde 通配符 ast read 复选框 引入 sel
一.jQuery简介
1.1.什么是jQuery?
jQuery是一个轻量的、免费开源的js函数库，极大简化了JavaScript代码。
1.2.jQuery的优势:
简化了JavaScript代码
可以像css那样访问DOM
可以修改css控制页面样式
可以兼容常用的浏览器
1.3.jQuery版本支持:
jQuery分为很多版本，也分为压缩版和未压缩版，选择需要的版本进行下载
1.x --- IE6+
2.x --- IE9+
3.x --- IE9+
注意: jQuery不兼容老版本. jQuery升级除了会做一些内部优化之外, 还会删除或者添加一些新的方法, 所以升级之后, 以前的部分代码可能会无法执行!
1.4.jQuery引入
引入jQuery：
<script src="jquery-1.4.2.min.js"></script>
======================================================
二.jQuery语法
2.1.$介绍
$是jQuery中jQuery函数的简写形式
参见源码: window.jQuery = window.$ = jQuery;
使用$()相当于调用了jQuery()函数, 该函数会返回一个jQuery对象, 该对象中包含一个或多个DOM元素. 可以通过jQuery上提供方法, 对这些元素进行操作.
2.2.文档就绪事件
$(document).ready(function(){
// ...
});
ready()函数在html文档加载后立即执行
其作用相当于: window.onload = function(){//...}
其简写形式:
$(function(){
// ....
});
2.3.DOM对象和jQuery对象互相转化
JS对象只能调用JS上提供的属性和方法, 不能调用jQuery提供的属性和方法, 如果非要使用, 必须将JS对象转化成jQuery对象!!
2.3.1.dom对象转jQuery对象:
var dom = document.getElementById("username");
alert(dom.value);//获取用户名
var $jquery = $(dom);//dom对象转jquery对象
alert($jquery.val());//获取用户名
2.3.2.jQuery对象转dom对象:
var $jquery = $("#username");
alert($jquery.val());//获取用户名
var dom1 = $jquery.get(0);
alert(dom1.value);//获取用户名
var dom2 = $jquery[0];
alert(dom2.value);//获取用户名
======================================================
三.jQuery选择器
3.1.基本选择器：
3.1.1.元素选择器:
格式: $("元素名称")
如: $("p") 匹配所有的p元素
3.1.2.类选择器:
格式: $(".class值")
如: $(".c1") 匹配所有class值为c1的元素
3.1.3.ID选择器:
格式: $("#id值")
如: $("#d1") 匹配id值为d1的元素
3.1.4.*号通配符: $("*") 匹配所有元素
3.1.5.多条件选择器:
格式: $("选择器1, 选择器2, ...")
如: $("span, div, p") 匹配所有的span、div、p元素
3.2.层级选择器：
$("祖先 后代") 匹配祖先元素内部的所有后代元素
如: $("div span") 匹配div下所有的span元素(span子孙元素)
$("父类 > 子类") 获得父元素内部所有的子元素
如: $("div>span") 匹配div下所有的span子元素
$("元素A+元素B") 匹配A元素后紧邻的B元素
如: $("div+span") 匹配div后紧邻的兄弟span元素
$("元素A~元素B") 匹配A元素后所有的兄弟元素
如: $("div~span") 匹配div后所有的兄弟span元素
3.3.基本过滤选择器：
:first 匹配第一个
如: $("div:first") 匹配所有div中的第一个
:last 匹配最后一个 //火狐浏览器 不支持
如: $("div:last") 匹配所有div中的最后一个
:not 匹配除什么之外的
如: $("div:not(.one)") 匹配所有div中的class不为one的div
:eq(n) 匹配下标为n的元素
如: $("div:eq(n)") 匹配所有div中索引值为n的元素
:lt(n) 匹配下标小于n的元素
如: $("div:lt(n)") 匹配所有div中索引值小于n的元素
...
3.4.内容选择器：
$("div:contains(‘bbb‘)") 匹配包含指定文本的元素
如: $("div:contains(‘bbb‘)") 匹配所有div中包含指定内容的div元素
结果: <div>aaabbbcccc</div>
$("td:empty") 匹配不包含任何内容的元素
如: $("div:empty") 匹配所有没有内容的div元素
...
3.5.可见选择器：
$("div:hidden") 匹配所有不可见的div元素
$("div:visible") 匹配所有可见的div元素
3.6.属性选择器：
$("div[id]") 匹配所有包含id属性的div元素
$("div[id=‘d1‘]") 匹配所有包含id属性, 并且属性值为‘d1‘的div元素
$("div[id!=‘d1‘]") 匹配所有包含id属性, 并且属性值不为‘d1‘的div元素
3.7.子元素选择器：
$("div:nth-child(n)") 匹配div下第n个子元素
$("div:first-child") 匹配div下第一个子元素
$("div:last-child") 匹配div下最后一个子元素
$("div:only-child") 匹配div下唯一的一个子元素
...
3.8.表单选择器：
$(":input") 匹配所有的input元素、select、textarea等元素
$(":password") 匹配所有的密码框
$(":radio") 匹配所有的单选按钮
$(":checkbox") 匹配所有的复选框
$(":checked") 匹配所有被选中的单选框/复选框/option元素
$(":selected") 匹配所有被选中的option元素
======================================================
四.文档操作
parent() -- 如: $("div").parent() 匹配所有div的父元素
parents() -- 如: $("div").parents() 匹配所有div的父辈元素
find() -- 如: $("div").find("span") 匹配div下所有的span元素
next()
-- 如: $("div").next() 匹配div后的相邻的兄弟元素
-- 如: $("div").next("input") 匹配div后的相邻的input兄弟元素
nextAll()
-- 如: $("div").nextAll() 匹配div后的所有兄弟元素
-- 如: $("div").nextAll("div") 匹配div后的所有div兄弟元素
pre()
-- 如: $("div").pre() 匹配div前一个相邻的兄弟元素
-- 如: $("div").pre("input") 匹配div前一个相邻的input兄弟元素
preAll()
-- 如: $("div").preAll() 匹配div前面的所有兄弟元素
-- 如: $("div").preAll("div") 匹配div前面的所有div兄弟元素
siblings()
-- 如: $("div").siblings() 匹配div前后所有的兄弟元素
-- 如: $("div").siblings("div") 匹配div前后所有的div兄弟元素
css()
-- 如: $("div").css("width") 获取所有匹配元素中的第一个div元素的width的值
-- 如: $("div").css("width", "200px") 设置所有匹配元素width的值为200px
-- 如: $("div").css({"width":"200px", "height":"200px", "color":"red"})为所有匹配元素设置css属性
html()
-- 如: $("div").html() 获取所匹配元素的html内容
-- 如: $("div").html("xxxx") 设置所匹配元素的html内容
text()
-- 如: $("div").text() 获取所匹配元素的文本内容
-- 如: $("div").text("xxxx") 设置所匹配元素的文本内容
attr()
-- 如: $("div").attr("id"); 获取所匹配元素的id属性的值
-- 如: $("div").attr("id", "d1"); 设置所匹配元素的id属性的值为d1
======================================================
五.事件
5.1.click()
$("xxx").click(function(){}) -- 为匹配的所有元素绑定点击事件, 在所匹配元素被点击之后立即触发
5.2.blur()
$("xxx").blur(function(){}) -- 为匹配的所有元素绑定失去焦点事件, 在所匹配元素失去输入焦点时触发
5.3.focus()
$("xxx").focus(function(){}) -- 为匹配的所有元素绑定获得焦点事件, 在所匹配元素获得输入焦点时触发
5.4.change()
$("xxx").change(function(){}) -- 为匹配的所有下拉选绑定选项切换事件, 在下拉选框切换选项时触发
5.5.ready()
-- 文档就绪事件, 在整个html加载完成之后立即触发执行
如: $(document).ready(function(){...})
简写形式为 $(function(){...})
======================================================
六.效果
6.1.show()
$("xxx").show() -- 将匹配的所有元素由隐藏设置为显示
6.2.hide()
$("xxx").hide() -- 将匹配的所有元素由显示设置为隐藏
6.3.toggle()
$("xxx").toggle() -- 切换所匹配元素的可见状态, 如果显示则隐藏, 如果隐藏则显示.
标签：压缩 不兼容 dde 通配符 ast read 复选框 引入 sel
原文地址：https://www.cnblogs.com/kkyl/p/9535643.html
