jquery基础

Html:用来排版
CSS：美化
js:交互，动画设置
B/S：浏览器/服务器
web在浏览器上查看
document.getElementById()： 使用JavaScript代码，通过id值，找到标签（此标签具有相同的id

1. jQuery 与 $是等价关系
2. 写jQuery代码必须单独写在script标签中，不能写下引入的script标签中

--2.
js的：document.getElementById("id")等价于jQuery的：\(("#id"); jQuery借用css的选择器 取id选择器\)("#id")

去class选择器 $(".class")

取标签选择器$("div")

基本选择器有：id选择器，类选择器，元素选择器，通配符(*)选择器，多元素选择器。

通配符(*)匹配所有标签
jQuery中使用\(("*"); 多元素选择器：\)("#id").css("color","red");

层次选择器：
后代元素：用空格隔开；例子：\(("body div"); 子元素：符号> ；例子：\)("body>div");
相邻元素：符号+ ；例子:\(("body+p");同级相邻的下一个元素 兄弟元素：符号~ 例如：\)("div_{p")，选择div之后同级的所有p标签,shift+};

基本过滤选择器：
\(("li:first") 获取第一个li标签 \)("li:last") 获取最后一个li标签
\(("li:not(li:first)")选中全部li标签除了第一个 \)("li:eq(0)")获取第一个li元素：eq表示等于
\(("li:gt(5)")获取下标大于5的元素：gt表示大于 \)("li:lt(5)")获取下标小于5的元素：lt表示小于
\(("li:even")获取偶数行 \)("li:odd")获取奇数行
\((":header")获取所有标题标签(h1-h6) \)(":animated")获取处于动画的标签

内容过滤选择器：
\(("li:contains('文本内容')")选择li标签包含的文本内容 \)("li:empty")选中没有文本内容或者没有子标签
\(("li:has(p)")获取含有p标签的li标签 \)("li:parent")获取含有文本内容或含有子元素的li标签

可见性过滤选择器：
\((":hidden")获取隐藏的标签 \)(":visible")获取显示的标签

属性过滤选择器：
标签属性：id name type class \(("li[class='名字']")获取class名为？？的li标签 !=:不等于 ^=:以什么开头 \)=:以什么结尾
*=:包含什么
$("li[id][name='liname']")：选择含有id属性并且name属性值为liname的li标签

子元素过滤选择器：
\(("ul li:first-child"):选择ul标签里的第一个li元素 \)("ul li:last-child"):选择ul标签里的最后一个li元素
\(("ul li:only-child"):选择只有一个li标签的元素 \)("ul li:nth-child(number)"):获取第几个li元素（注意:number从1开始/ $("ul li:nth-child(2n)"):获取2的倍数的li标签

表单过滤选择器：
:input 获取所有input标签
:text 获取所有文本框
:password 获取所有密码框
:radio 获取所有单选框
:checkbox 获取所有多选框
:submit 获取提交按钮
:image 获取图片按钮
:reset 获取所有重置按钮
:button 所有按钮
:file 获取所有上传文本文件
:enabled 获取所有可用元素
:disabled 获取所有不可用元素
:checked 获取选中的元素
:selected 获取下拉框选中的元素

三
1：
text():获取标签里的文本内容
attr('属性'):获取标签的属性——的方法：attr('系统定义属性')/pop('用户自定义属性')
html():获取标签里的文本内容和标签本身
append():把内容添加到标签里的末尾
例子：\(("ul").append("<li>内容</li>") appendTo();把内容添加到指定标签里的末尾 例子：("<li>内容</li>").appendTo("ul") prepend():把内容添加到标签里的前面 例子：\)("ul").prepend("

内容

")
prependTo():把内容添加到指定标签里的前面
例子：("

内容

").prependTo("ul")
after():在标签的后面追加一个标签
例子：\(("ul").after("<p>内容</p>")：在ul标签后面追加p标签 insertAfter():在指定标签的后面追加一个标签（换位） before();在标签的前面添加一个标签 insertBefore():在指定标签的前面添加一个标签 remove():删除标签 例子：\)("ul li:eq(1)").remove():删除ul标签里的第二个子标签li
();清空标签里的内容
例子：\(("ul li:eq(1)").empty();清空ul标签下的li标签的内容 clone()：复制标签的元素 例子：\)("ul li:eq(1)").clone():复制ul标签里的下标为1的li标签
replaceWith():替换(替换元素在后面)
例子：\(("p").replaceWith("<b></b>");用b标签替换p标签 replaceAll();替换(替换元素在前面) 例子：\)("").replaceAll("p");用b标签替换p标签
wrap():包裹标签(分别)
例子：\(("p").wrap("<b></b>")：把每个p标签用b标签包裹 wrapAll():包裹标签(全部包) 例子：\)("p").wrapAll(""):把所有p标签用一个b标签包裹
wrapInner():包裹标签内的内容
例子：$("p").wrapInner(""):把P标签里的内容和标签用b标签包裹

attr("属性","属性值")//设置属性值
例子：\(("p").attr("name","张丹")//给p标签里的name属性加一个值张丹 {}:大括号表示一个对象。 例子:{"name":"张三","id":"1"} 例子：\)("p").attr({"id":"pid","name":"zhangsna","class":"pclass"});
在JavaScript或jquery中使用{}表示的是对象。对象由属性名:值构成
属性名:值 构成-可以多个。多个用逗号分隔
removeAttr("属性")//删除标签属性的值
例子：\(("p").removeAttr("id")//删除p标签的id属性 addClass():追加类样式 例子：\)("p").addClass("otherclass") 给p标签的class属性 追加一个otherclass
removeClass():删除样式
例子：\(("p").removeClass(); 删除P标签的所有class属性值 例子：\)("p").removeClass("样式名"); 根据样式名，删除指定的class 值
hasClass():判断对错返回true/false
例子：\(("p").hasClass("pcla"); 结果返回true toggleClass("class值"):存在就不删除，反之追加 例子：\)("p").toggleClass("pcla")//class值是pcla就不追加，不是就追加
val():获取input、textarea、select等等表单元素标签的值
例子：
$("input[type='text']").val()//获取value里面的值23
\(("input[type='text']").val("35")//设置value的值35 css():添加样式 例子：\)("p").css()//获取css样式
$("p").css("color")//获取color的值
$("p").css("color","red")//设置值
\(("p").css({"color":"yellow","background":"#00000"})//设置多个属性 height():获取高度 例子：\)("P").height("400px")//设置高度为400px
width()：获取宽度，方法同用上面的
offset():获取偏移量（top,left）

四。
1.
onload:预加载(在网页加载完毕后执行方法)
$(function(){}):预加载(在标签加载完毕后执行)
jquery有三种写法：
Jquery(document).ready();
$(document).ready();
\((); click()：单击事件 例子：\)("#id").click(function(){})
dblclick():双击事件
例子：$("#id").dbclick(function(){})
focus():获得焦点事件
blur():失去焦点事件
change():下啦改变事件(用于下拉框)
submit():表单提交事件
select():内容选中事件
键盘事件：
keydown():按下
keyUp():松开
鼠标事件：20:48 2020/3/
mouseover():鼠标在元素里面
mouseout(): 鼠标在元素外面
mouseenter():鼠标移上事件
mouseleave():鼠标离开事件
mousemove():鼠标在指定的元素上移动时
mouseup():鼠标松开时事件
mousedown():鼠标按下事件

on():事件绑定
例子：\(("#btn").on("click",function(){});//绑定点击事件 off():解除绑定事件 例子：\)("#btn").off("click");//解除点击事件

jquerty1.7版本适用
bind():事件绑定
unbind():解除绑定事件

hover():鼠标合成事件，(鼠标进入和鼠标移出)
例子：hover(function(){},function(){})//第一个function是mouseenter，第二个function是mouseleave
toggle():隐藏或显示事件
event:事件对象
event.stopPropagation(); //停止事件冒泡，放在方法开头
event.preventDefault():阻止默认行为
例子：\(("a").on("click",function(event){event.preventDefault()});//阻止a标签跳转 trigger():自动触发事件 例子：\)("#btn").trigger("click");//自动执行指定单击事件
triggerHandler() 触发事件//不会触发默认事件

五：动画
系统定义好的方法：
1.
show():显示方法//把隐藏的内容显示出来
hide():隐藏方法//把显示的内容隐藏起来
toggle():方法//只执行一次//显示的隐藏，隐藏的显示
slideDown():向下增加高度来显示隐藏的内容
slideUp():向上减小高度来隐藏显示的内容
slideToggle():切换显示和隐藏的内容(都是该表高度来实现的 )

css:的opacity:透明度(取值是0看不见1清晰)//可以取小数取一位到两位

fadeIn():改变透明度 淡入效果（把隐藏的显示出来）
例子:\(("p").fadeIn();//有三个参数([speed],[easing],[function]) []:这是可有可无的意思 fadeOut():改变透明度 淡出效果(把显示的内容隐藏) 例子:\)("p").fadeOut();//有三个参数
fadeToggle():切换式的淡出和淡入
例子:\(("p").fadeToggle(); fadeTo():到指定的透明度 例子:\)("p").fadeTo("0.5");//必须加一个opacity(透明度值)

自定义方法：
params对象“{}”
animate()方法：
例子:\(("div").animate({width:"20px",lefe:"20px"},3000).animate({hight:"100px",top:"10px"},3000); stop():停止自定义动画效果 例子:\)("div").stop();/停止div的动画效果
:animated:获取处于动画的标签
is():判断
例子:$("div").is(":animated");//判断div是否处于动画效果(处于返回true,反之flase)

六：
1.表单
\((":input");//获取所有表单标签 //获得表单标签（input、textarea、select） \)(":input").focus().blur();
//给表单内的标签添加获取焦点事件和失去焦点事件
.each(function(){})//循环输出
匹配字：
^:匹配^号
$:匹配$号
.:匹配.号
\d:匹配任意一个数字
\w:匹配任意一个字母，数字，下划线；
\s:匹配空格，换行，换页，空白
.:匹配除换行符以外任意字符
[asdf]:匹配asdf任意一个

2.表格
进行偶数行和奇数行不同颜色
偶数行
例子:\(("tbody tr:even").addClass(""); 奇数行： 例子:\)("tbody tr:odd").addClass("");
this.id:获取id值
toggleClass("");切换样式
$(this).index();//获取下标
prevAll():返回被选元素的前所有同级元素
nextAll():返回后一个所有同级元素
siblings():返回所有元素
filter():过滤
contains:包含
return false:1.返回值 2.阻止程序继续运行

七
3.时间插入
首先引入css文件

引入js文件(必须写在body前面) 用input的text(文本框)

时间的属性：
isShowWeek :决定是否显示周true或false
readOnly :时间框是否只读true或false
highLineWeekDay: 是否高亮显示周末true(默认)或false
isShowClear: 显示或隐藏清空按钮true(默认)或false
isShowToday: 显示或隐藏今天按钮true(默认)或false
firstDayOfWeek: 设置从几开始可设置 0-6的任意一个数字，0:星期日 1:星期一以此类推

日期格式：
dateFmt:设置日历格式
yyyy-MM-dd HH:mm:ss 2020-03-12 13:12:00
yy年M月 20年3月
yyyyMMdd 20200312
yyyy年M月d HH时mm分 2020年3月12日13时12分
HⓂ️s 13:12:0
y年 20年
MMMM d,yyyy 三月 12,2020

startDate:设置默认开始时间
minDate:设置最小日历
:WdatePicker({minDate:'#F{\(dp.\)D('d4321',{d,1});}'})
maxDate:设置最大日历
:WdatePicker({maxDate:'#F{\(dp.\)D('d4322',{d,0});}'})

4.插入报表
引入js

var options={};
chart:{text:"line"},//报表类型
line:折现图
spline:曲线图
area:面积图
arearange:面积范围图
pie:饼图
scatter:散点图
column:竖式柱状图
bar:横式柱状图
title:{text:"标题"},//设置标题
subtitle:{text:'自定义副标题'}
xAxis:{categories:['苹果','香蕉','橘子']},//设置X轴
yAxis:{title:{text:"个数"}},//设置Y轴标题
credits:{enabled:false},//禁用版权信息
series:[//数据设置{name:"张三",date:[3,4,5]},{name:"李四",date:[5,6,7]}]

Highcharts.chart("id名",options);