一、昨日内容回顾
1.jQuery初识
1)、使用jQuery而非JS的六大理由
2)、jQuery对象和js对象转换
3)、jQuery的两大特点
4)、jQuery的入口函数三大写法
5)、jQuery原理
。。。。。
2.jQuery的选择器
1)、基础选择器
2)、层级选择器
3)、基本过滤选择器
$(‘div:eq(0)’)
4)、 属性选择器
$("input[type=‘radio’]")
5)、筛选选择器
$('#box').children('span')
3.jQuery动画
show() hide() toggle
fadeIn() fadeOut() fadeToggle
slideDown() slideUp() slideToggle()
二、今日内容总结
1.jQuery自定义动画
animate({json},2000,fn)
父子标签之间可以进行传值,通常是通过自定义标签属性
2.jQuery的属性操作
jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作
1、html属性操作:是对html文档中的属性进行读取,设置和移除操作。比如attr()、removeAttr()
2、DOM属性操作:对DOM元素的属性进行读取,设置和移除操作。比如prop()、removeProp()
3、类样式操作:是指对DOM属性className进行添加,移除操作。比如addClass()、removeClass()、toggleClass()
4、值操作:是对DOM属性value进行读取和设置操作。比如html()、text()、val()
5、attr和prop区别:
.attr()
html属性操作:是对html文档中的属性进行读取,设置和移除操作。比如attr()、removeAttr()
.prop()
对dom对象属性的操作
区分:attr()和prop() 像id class title 当给标签设置此系统提供的属性,那么该对象内部自己会封装系统的属性
DOM对象内部属性:
div#aaa.uuu
accessKey:""
className:"uuu"
clientHeight:0
。。。。
****当使用单选按钮的时候 使用prop()获取checked的true和fasle值,与服务器进行交互更好
3.jQuery的文档操作(DOM操作)
1)父子之间添加节点
末尾:
父节点.append(子节点) # 子节点:HTMLString、js对象,jQuery对象
子节点.appendTo(父节点) # 可直接对添加子节点进行相关操作
首位:
父节点.prepend(子节点)
子节点.prependTo(父节点)
2)同级节点之间添加节点
参考节点.after(要添加节点)
要添加节点.insertAfter(参考节点)
对应:before和insertBefore
3) 目标节点,replaceWith(要替换节点)
要替换节点.replaceAll(目标节点)
4) .clone(true)
5 ) remove() #返回值 不保留事件
detach() # 返回值 保留事件
empty() # 清空改对象下的所有子元素
nodejs jsonView
4.jQuery中的ajax初识
(4)jquery的ajax()方法: getNowWeather(); function getNowWeather(){ $.ajax({ url:'https://free-api.heweather.com/s6/weather/now?location=beijing&key=4693ff5ea653469f8bb0c29638035976', type:'get', success:function(allData){ console.log(allData.HeWeather6[0]) console.log(allData.HeWeather6[0].now.tmp); var tmp = allData.HeWeather6[0].now.tmp; var allTmp = tmp+"℃" $('.tmp').text(allTmp); } }) };