jqueryindexof

jQuery概述

Js和jQuery

获取对象

Jquery获取jquery对象，js获取js对象(dom对象)。dom对象不能调用jquery的方法，jQuery对象也不能调用dom对象的方法。

转换为jQuery对象的Dom对象:$(dom对象)

分级选择器

子选择器$(\” ul & gt；李》)使用>否，获取子级元素。注意:后代选择器$(“ul Li”)不获取孙级的元素。使用空网格表示后代选择器，并获取UL下的所有Li元素，包括孙辈。

jQuery解决的问题

原来的单次操作，批量操作

简化原来复杂的查询方式。

原来的分步经营模式，连锁经营

将本机操作复杂的逻辑并提供简单的接口。

队列控制:

为了解决原生js的不足，队列也可以解决回调地狱。

控制异步代码的执行顺序。

把每个要执行的步骤放入数组[1，2，3，4，5]中，一步一步执行。

加入团队。滚出队伍

三种队列

animate(最高级别)

$(“div”)。animate ({width: 400}，1000) fxqueuedequeue用户自定义队列结束直接结束，到最后一个状态停止结束当前队列的状态，进入下一个状态插件机制:

插件:可以扩展对象功能的术语。

jQuery.fn.extend(object)

多库共存:

项目开发模式

精华:

JaScript框架

目的:

少写多做

功能:

优化js操作、dom操作、页面交互、事件、ajax、动态效果。

特点:

隐式循环，链式调用

JQuery核心函数:

jQuery ( )=$()

undefinde返回空的jquery对象选择器,返回jQuery对象

JQuery(\”。box”)函数，向文档添加一个就绪事件。这个函数将dom对象作为jquery(function(){ })jquery(\” document \”)传入。Reaady (function () {}) jquery()。ready(function(){ })//页面加载后。返回jQuery对象jQuery(function(){ let box = document。QuerySelector(\”。框”)；jQuery(box)；})传入一个字符串并创建一个新节点\”

选择器.css (\”样式属性\”,\”样式值\”) .css ( { } )

$ (function () {$(\”。方框”)。CSS({背景色:“蓝色”，边框半径:50%})}) Filter: first: not(选择器):even: header = >匹配h1、h2、h3、H3等表头元素:eq(index)= & gt；匹配给定索引值的元素:gt(index)= & gt；匹配大于给定索引值的所有元素:animated = & gt选择移动元素$ (function () {$(\”。框:先”)。CSS (\”background-color \”)，\” red\”)})过滤方法:。eq (index)返回带有相应下标的jQuery对象。get (index)返回带有相应下标的本机对象。首先()。最后()。hasClass (\”class name \”)确定jQuery数组中类名为* * *的对象返回true还是false$(function()。{$ (\”.儿子”)。hasclass (\”son 2\”)})。Filter([选择器]，[元素]，[，函数])筛选出符合条件的对象$ (function () {$(\”。儿子”)。Filter (\”son2\”)}) $ (function () {$(\”。儿子”)。Filter(函数(项){$ (this)。Attr (\”class\”) = =。is (\”selector \”)决定是否为标签生成一个新数组。map (fn)遍历对象。has (\”selector \”)返回选定的jQuery对象$ (function () {$(\”。方框”)。has(“span”)。CSS(“背景”)。“红色”)})。not (\”Selector \”)删除选定的元素$ (function () {$(\”。方框”)。而不是(\” . box2 \”)})。来自jQuery数组的Slice (start，[end])，下标$ (function())被传入。}).each (fn)遍历jQuery数组，index在前，item在后$ (function () {$(\”。方框”)。each (function (index，item){ console . log(item)})；}).返回数组中jQuery对象下标操作属性的index()方法:attr () RemoveAttr () Prop()操作类名AddClass()remove class()toggle class()$(function()。{$(\”.方框”)。addClass(\”box2\”)})操作内容的方法:。文本()。html()可以识别< & gt。jQuery对象元素的val()位置信息。offset()返回带有位置信息的对象相对于浏览器的位置{top:*，left:* }。position()返回一个对象的位置，该对象具有相对于所定位的祖先元素{top:*，Left:* }的位置信息。scrolltop()。scrollleft()常用方法。toArray()将jQuery对象转换为native object事件对象:e . offsetxe . offsetye . pagexe . pageye . target . current target = = thick . stop propagation阻塞事件流e.preventDefault阻塞默认事件event $ (\"div \")。单击(function () {$ (\"div \")。CSS(“颜色”)。

在()

Trigger()自动触发事件。

TriggerHandler自动触发事件并清除浏览器的默认行为。

悬停(fn，fn)

ajax:

ajax需要解决的问题

页面无刷新操作数据按需获取数据的问题让b/s架构的软件，能像c/s架构的软件操作流畅

ajax(异步jascript和xml)

使用jascript异步操作数据

新的XMLHttpRequest()

函数ajax(params){ if (typeof params！==\’object\’){ console.error(\’错误参数类型\’)；return } if(！Params.url){ console.error(\’请输入URL \’)；Return} //参数初始化var URL = URL var type = params . type | | \” get \” var datatype = params . datatype | | \” text \”//处理数据var data = params . data | | | \” \” if(type of data = = \’ object \’){ var str = \” \” for(var I in data){ str+= I+\” = \”+data[I]+\” & amp；} data=str.slice(0，-1)} //判断获取方法Varajax = new xmlhttprequest()Ajax。onload = function(){ } if(type = = \’ get \’){ Ajax。Open (\”get \”，\”/Ajax？name = Zhang \”)Ajax . send()} else if(type = = \” post \”){ Ajax . open(\” post \”，\”/Ajax \”)Ajax . setrequestheader(\” content-type \”，\” application/x-www-form-encoded \”)Ajax。send (\”name =张三\”)} Ajax ({URL:\’/\’，类型:\’ get \’，可选数据类型:\’ text \’，可选数据:{name:\”张三\” }。可有可无成功:函数(数据){可无更新(数据)}) #天气页面获取数据$(”。BTN”)。单击(function () {$。Ajax({ URL:\” https://www . toutiao . com/stream/widget/local _ City =太原\”，数据类型:\” JSON \”，success:function(data){ update(data)}，error:function(){ console . log(\” no \”)})})。触发(\”点击\”)功能更新(数据){ $(\”。方框”)。text(data . data . weather . aqi)console . dir(data . data . weather)$(\” . box 2 \”)。text(data . data . weather . city _ name)$(\” . box 3 \”)。text(data . data . weather . dat _ condition)} XML

Html和svg源自xml。

Html也叫模板，数据也叫模型。

svg = & gt矢量图

Ajax获取数据

创建:1.xml

& lt？xml版本=\”1.0 \”编码=\”UTF-8 \”？& gt& ltroot & gt& lt斯图& gt& lt名称& gt张三& lt/name & gt；& lt年龄& gt20 & lt/age & gt；& lt性& gtman & lt/sex & gt；& lt/stu & gt；& lt/root & gt；//xml没有标签，可以自己定义:2.html。

//表单

统一资源标识符。

统一资源定位器。

Url(互联网中资源的唯一符号)是一种uri。

/添加？id={{item.id}}？随后是数据采集假同步真异步(默认为异步)

get方式

ajax.open(\”get \”，\”/ajax？Name=zhang\”)ajax.send()post模式ajax。Open (\’post \’，\’/\’，true，user，passwd)第一个参数指定获取格式，第二个参数指定路径(获取路径的位置)，第三个参数指定同步或异步(true = & gt异步，默认为异步false = & gt同步)，第四个是用户名，最后一个是密码。