jQuery函数方法
<div class="box">
<ul>
<li>1</li>
<li>2</li>
<li class="active">3</li>
<li>4</li>
</ul>
</div>
//元素遍历 .each()
$("ul>li").each(function(index,node){ //node是原生js对象,需转化
var str = $(node).text()
$(node).text(str + str)
})
//.map()
var arr = $(".box>ul>li").map(function(){
return $(this).text()
})
console.log(arr) // ["1", "2", "3", "4"]
//.index()
$(".active").index() //2
jQuery 中， $(document).ready()是什么意思？
- 当DOM准备就绪时，指定一个函数来执行。
- 大多数情况下，只要DOM结构已完全加载时，脚本就可以运行。传递处理函数给
.ready()方法，能保证DOM准备好后就执行这个函数
如果执行的代码需要在元素被加载之后才能使用时，（例如，取得图片的大小需要在图片被加载完后才能知道），就需要将这样的代码放到 load 事件中。
$(document).ready(handler)
$(handler)
$(function(){
console.log('ready');
});
$node.html()和$node.text()的区别?
-
$node.html()，返回所选择元素内的html内容，包含html标签和文本内容 -
$node.text()，返回所选择元素内的文本内容，不包含html标签，只包含文本内容
$.extend 的作用和用法?
- 当我们提供两个或多个对象给$.extend()，对象的所有属性都添加到目标对象（target参数）
- 如果只有一个参数提供给$.extend()，这意味着目标参数被省略。在这种情况下，jQuery对象本身被默认为目标对象。
var obj1 = {a:1}
var obj2 = {b:2,c:3}
var obj3 = {b:3,d:5}
var obj4 = {}
$.extend(obj1,obj2) //obj1 == {a: 1, b: 2, c: 3}
$.extend(obj1,obj2,obj3) //obj1 == {a: 1, b: 3, c: 3, d: 5}
$.extend(obj4,obj1,obj2,obj3) //obj4 == {a: 1, b: 3, c: 3, d: 5}
//写法同上
var obj5 = $.extend({},obj1,obj2,obj3) //obj5 == {a: 1, b: 3, c: 3, d: 5}
jQuery 的链式调用是什么？
- 可以连续的使用 jQuery 方法的过程叫做 链式调用。
- jQuery是通过在调用方法后返回这个调用对象来实现链式调用的。
Query 中 data 函数的作用
-
.data()- 在匹配元素上存储任意相关数据 或 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。
.data()方法允许我们在DOM元素上绑定任意类型的数据,避免了循环引用的内存泄漏风险。
.data( key, value )在匹配元素上存储任意相关数据.
-
key:一个字符串，用户存储数据的名称。 -
value:新的数据值；它可以是任意的Javascript数据类型，包括Array 或者 Object。
我们可以在一个元素上设置不同的值，之后获取这些值：
$("body").data("foo", 52);
$("body").data("bar", { myType: "test", count: 40 });
$("body").data({ baz: [ 1, 2, 3 ] });
$("body").data("foo"); // 52
$("body").data(); // { foo: 52, bar: { myType: "test", count: 40 }, baz: [ 1, 2, 3 ] }
写出以下功能对应的 jQuery 方法:
- 给元素
$node添加class active，给元素$noed删除class active
$node.addClass('active') //添加
$node.removeClass('active') //删除
- 展示元素
$node, 隐藏元素$node
$node.show() //展示
$node.hide() //隐藏
- 获取元素
$node的 属性:id、src、title， 修改以上属性
$node.attr('id','value') //获取并赋值
$node.attr('src','value')
$node.attr('title','value')
- 给
$node添加自定义属性data-src
$node.attr("data-src","value")
- 在
$ct内部最开头添加元素$node,在$ct内部最末尾添加元素$node
//结尾添加
$ct.append($node)
$node.appendTo($ct)
//开头添加
$ct.prepend($node)
$node.prependTo($ct)
- 删除
$node把$ct里内容清空
// 事件之类的删除后不保存
$node.remove()
// 事件之类的删除后保存
$node.detach()
$ct.empty() //清空
- 在
$ct里设置<div class="btn"></div>
$ct.html('<div class="btn"></div>')
- 获取、设置
$node的宽度、高度(分别不包括内边距、包括内边距、包括边框、包括外边距)
$node.width();//不包括内边距宽度,仅包括内容
$node.height();//不包括内边距高度,仅包括内容
$node.innerWidth();//包括内容和内边距宽度
$node.innerHeight();//包括内容和内边距高度
$node.outerWidth();//包括内容,内边距,边框宽度
$node.outerHeight();//包括内容,内边距,边框高度
$node.outerWidth(true);//包括内容,内边距,边框,外边距高度
$node.outerHeight(true);//包括内容,内边距,边框,外边距宽度
宽高
- 获取窗口滚动条垂直滚动距离
$(window).scrollTop()
- 获取
$node到根节点水平、垂直偏移距离
$node.offset() //{top: 16, left: 48}
- 修改
$node的样式，字体颜色设置红色，字体大小设置14px
$node.css({"color": "red", "font-size": "14px"})
- 遍历节点，把每个节点里面的文本内容重复一遍
<div class="box">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
$("ul>li").each(function(index,node){ //node是原生js对象,需转化
var str = $(node).text()
$(node).text(str + str)
})
- 从
$ct里查找class 为 .item的子元素
$ct.find('.item')
- 获取
$ct里面的所有孩子
$ct.children()
- 对于
$node，向上找到 class 为'.ct'的父亲，在从该父亲找到'.panel'的孩子
//找父亲
$node.parents('.ct')
//从父亲找儿子
$node.parents('.ct').find('.panel')
- 获取选择元素的数量
$node.length
- 获取当前元素在兄弟中的排行
$node.index()
用jQuery实现以下操作
- 当点击$btn 时，让 $btn 的背景色变为红色再变为蓝色
<button id="btn" type="button">变色</button>
$("#btn").on("click",function(){
$(this).css({"background-color":"red"})
//设置定时
setTimeout(function(){
$("#btn").css({"background-color":"blue"})
},1000)
})
- 当窗口滚动时，获取垂直滚动距离
$(window).on("scroll",function(){
$("node").text($(window).scrollTop()+"px");
});
- 当鼠标放置到$div 上，把$div 背景色改为红色，移出鼠标背景色变为白色
<div class="bg"></div>
$(".bg").on("mouseenter",function(){
$(this).css({"background-color":"red"})
})
$(".bg").on("mouseleave",function(){
$(this).css({"background-color":"white"})
})
- 当鼠标激活 input 输入框时让输入框边框变为蓝色，当输入框内容改变时把输入框里的文字小写变为大写，当输入框失去焦点时去掉边框蓝色，控制台展示输入框里的文字
<input id="ipt" type="text">
$("#ipt").on("focus",function(){
$(this).css({"outlineColor":"blue"})
})
//键盘事件
$("#ipt").on("keydown",function(){
$(this).val($(this).val().toUpperCase())
})
$("#ipt").on("blur",function(){
$(this).css({"outlineColor":"none"})
console.log($(this).val())
})
- 当选择 select 后，获取用户选择的内容
<select name="" class="sports">
<option value="篮球">篮球</option>
<option value="排球">排球</option>
<option value="足球">足球</option>
<option value="乒乓球">乒乓球</option>
</select>
<p>用户选择的内容是:<span></span></p>
$(".sports").on("change",function(){
$("p>span").text($("option:selected").val())
})
用 jQuery ajax 实现如下效果。`当点击加载更多会加载数据展示到页面效果预览
- 启用
server-mock - 需开启
mock start - 代码地址
效果预览
网友评论