1 1.先引入jquery的包 2 ????????2.入口函数 3 ????????????$(document).ready() 4 ?????????????5 ????????????$(function(){}) 6 ????????3.jquery的选择器 7 ?????????8 ????????$(‘ul li:eq(1)‘) 过滤 9 ????????10 ????????筛选选择器$(‘ul li‘).silbings()11 ????????12 ????????属性操作：13 ????????????img ????src=‘./1.png‘14 ????????????15 ????????????js:操作标签上属性 ?16 ????????????17 ????????????1.获取jsdom对象18 ????????????????var oImg = document.getElementsByTagName(‘img‘)[0];19 ????????????2.获取属性20 ????????????// oImg.src ?获取src的属性值 ?oImg.getAttribute(‘src‘) ?oImg[‘src‘]21 ????????????22 ????????????oImg.style.width = ‘200px‘23 ????????????24 ????????????jquery;25 ????????????1.获取jquery对象26 ????????????27 ????????????$(‘img‘).attr(‘src‘)28 ????????????$(‘img‘).attr(‘src‘,‘2.png‘)29 ????????????jquery:$(‘ul li‘).attr()30 ????????????31 ????????????$(‘img‘).css(‘width‘,‘200px‘)32 ????????????33 ????????????js对象《==》jquery对象转化34 ????????????35 ????????????类操作36 ????????????addClass()37 ????????????removeClass()38 ????????????39 ????????????prop() ?单选按钮 checked???????????操作DOM ?节点 ???????????????????????????document ???????????????????????????标签节点 ???????????????????????样式节点 ??属性节点 ?DOM操作 ???????????????????????style ???????getAttribute||setAttribute ?document.createElement() appendChild() ???????????jquery ???????????????????????css() ????????attr() ???????????????????????append()
1.jq的dom操作
js可以链式编程
父子标签之间的操作：
父.append(子)
子.appendTo(父)
父.prepend(子) 插入到父元素的第一个元素
子.prependTo(父)
兄弟标签之间的操作
after() ?before()
insertAfter() insertBefore()
删除：
remove(); 删除节点，事件也一起删除 ***
detach();删除节点，事件会保留
$(selector).empty(); 清空选中元素中的所有后代节点 ----使用场景:登录注册时清空
js中： appendChild() insertBefore() removeChild()
2.jq中的事件对象
???点击type=‘submit‘的按钮，会触发form表单的submit事件
???阻止form表单/a标签的默认行为 ??event.preventDefault()
???
???a标签中的href连接；form中的action
???target:点击的当前的对象（内层的标签）---常用
???currentTarget：指的是当前的标签 ?this===event.currentTarget
???
???事件流 document文档 事件捕获；处于目标；事件冒泡
???阻止冒泡：event.stopPropagation()
每个事件都会有event ???????????????????????????????事件对象的方法： ???????????阻止默认事件：比如a标签和form标签会有自己的默认的跳转行为，我们可以通过e.preventDefault()来阻止当前的默认事件 ???????????????????????阻止冒泡： 因为冒泡是属于DOM2级事件流的第三个阶段，在这个阶段，会对自己的网页产生一定的影响，所以在对页面中所有的标签做事件操作时，event.stopPropagation()来阻止当前标签的冒泡
1.解决单双击冲突问题：
双击事件，300ms阻止单击
var time = null; ???????????//单击事件 ???????????function click(){ ???????????????//取消上次延时未执行的方法 ???????????????clearTimeout(time); ???????????????//设置延时300ms ???????????????time = setTimeout(function(){ ???????????????????//在此写单击事件要执行的代码 ???????????????},300); ???????????} ????????????????????????//双击事件 ???????????function dblclick(){ ???????????????//取消上次延时未执行的方法 ???????????????clearTimeout(time); ???????????????//下面写双击事件要执行的代码 ???????????}
2.获取form中的input的value：
实时监听。。
js有oninput方法 $(‘.box‘)[0] event.target.value
jquery是js封装的
3.jq的ajax-----面试常问
???AJAX = 异步的javascript和XML（Asynchronous Javascript and XML）
???简言之，在不重载整个网页的情况下，AJAX通过后台加载数据，并在网页上进行显示。
???异步-不等待
???有请求必有相应
???
???$ajax()
???
???和风天气（接口API、）
???url、type，先在浏览器中看一下
??------2------- 取值，，天气获取图片
???。。。
???get请求的数据会保存到请求体（url上）
???
???post。。查看在network--all，选择左侧名字，点击headers查看
???原理：xml。。
???
axios：可以登录网址查看，可以拦截请求和响应
---3------阅读文档！！！：https://www.kancloud.cn/yunye/axios/234845
3.jq的ajax ???????//get请求 ????????????????????????请求：请求头和请求体 ???????????????响应： 响应头和响应体 ???????????????????????input ?name=‘username‘ id=‘username‘ ???????input ?name=‘pwd‘ id=‘pwd‘ ???????????????input type=‘button‘ ???????????????get请求的数据会保存到请求体（url上） ???????????????var username = $(‘#username‘).val(); ???????var pwd = $(‘#pwd‘).val(); ???????$.ajax({ ???????????url:`http://127.0.0.1:8080/index?username=${username}&pwd=${pwd}`, ???????????type:‘get‘, ???????????success:function(data){ ???????????????????????????????????}, ???????????????}); ???????????????????????post请求 ?请求头和请求体 ???post请求案例 ?????????????????响应头和响应体 ???????????????var username = $(‘#username‘).val(); ???????var pwd = $(‘#pwd‘).val(); ???????$.ajax({ ???????????url:`http://127.0.0.1:8080/index`, ???????????data:{ ???????????????username:username, ???????????????password:pwd ???????????}, ???????????type:‘get‘, ???????????success:function(data){ ???????????????????????????????????}, ???????????????}); ???????????????????????XMLHtttpRequest() ???????????????<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> ???????
???
4.插件库介绍
iframe
jq插件找到后直接使用
5.bootstrap：移动端响应式03
响应式@media
移动端单位介绍：rem ?例子 font-size 响应式（随着屏幕的缩放，界面不变）
bootstrap：（写好了响应式）
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。
使用以下给出的这份超级简单的 HTML 模版，或者修改这些实例。我们强烈建议你对这些实例按照自己的需求进行修改，而不要简单的复制、粘贴。
基本模板 ?
上方组件里 ???导航条 ??固定导航栏
修改时自己添加一个类
栅格系统设置显示个数： .col-xx-3
--4----作业2：boots复制粘贴修改：写导航栏；写盒子--响应式的，盒子内容为小的知识点（粘贴）
侧别栏--可以点击显示
bootstrap官网 所有功能演示（复制粘贴一下 从css开始，组件里的内容）
不止用于p中，可作用于所有标签
写类别看结果
记住状态类class
内容长时使用--响应式表格 table-responsive
表单---校验，框红has-error
快速浮动
第14天jquery+bootstrap
原文地址：https://www.cnblogs.com/lijie123/p/9357238.html