JS jQuery基础2

1.动态DOM节点

创建节点

dom方式：  document.createElement("p"); <=> <p></p>
jquery方式：  $("<p>").text("内容"); <=> <p>内容</p>
                      var div = $('<div></div>')

添加节点

parent. append (child)
向父元素( parent ) 加入子元素( child )，插入后子元素为父元素的最后一个孩子
child.appendTo(parent)
将子元素( child)插入到父元素（ parent )下，插入后子元素为父元素的最后一个孩子
parent. prepend(chi1d)
向父元素( parent )加入子元素( child )，插入后子元素为父元素的第一个孩子
child.prependTo (parent)
将子元素( child)插入到父元素( parent )下，插入后子元素为父元素的第一个孩子
brother.after (obj)
在某个兄弟节点( brother )之后插入目标对象( obj )
brother. before(obj)
在某个兄弟节点( brother )之前插入目标对象( obj )

删除节点

$('ul).empty()
$('ul').remove()
$('ul').detach() //方法移除被选元素，包括所有文本和子节点。

替换节点

//把div 元素替换成p元素
$('div').replacewith($('<p></p>'))
//用p元素替换掉div元素
$('<p></p>' ).replaceAl1($("div"))

复制节点

//克隆—─个Li元素//接受两个参数
参数1:自己身上的事件要不要复制，默认是于alse参数
2:所有子节点身上的事件要不要复制，默认是true
$("li').clone()

2.jQuery对象与Dom对象转换

jQuery对象->Dom对象

const jqObjToDom = $(".d1")[0]; //jquery对象转Dom对象 方法一
 const jqObjToDom =  $(".d1").get(0); //jquery对象转Dom对象 方法二

Dom对象->jQuery对象

 const domObj = document.querySelector(".d2"); //dom对象
const domToJqObj = $(domObj);

3.元素尺寸&位置

元素尺寸

操作元素的宽和高

//不包含 padding 不包含 border
$('div').width()//获取
$('div').width(200)//设置
//包含 padding 不包含 border
$('div').innerWidth()//获取
//获取元素的外置宽和高
$('div').outerWidth()//获取div元素内容位置的高，包含padding和border
$('div').outerrWidth(true)//获取div元素内容位置的高，包含padding和border和margin

4.元素位置

元素相对页面的位置

offset() 读写 返回一个对象，里面包含一个x信息和一个y信息, 相对页面左上角坐标
设置值 :$(selector).offset({top:xxx,left:xxx}) 
top|left值: 不写单位

获取值 $('div').offset().top

元素相对于父元素的偏移量

position() 只读
返回一个对象，里面包含一个x信息和一个y信息,
相对元素定位关系获坐标值，
如果你定位元素 right和bottom, 那么会自动计算成left和top

获取页面卷去的高度和宽度

$(document).scrollTop();// 获取滚动条到顶部的垂直高度 (即网页被卷上去的高度)
$(document).scrollLeft();//获取滚动条到左边的垂直宽度

通过css样式改变元素位置

css() 读写
$(selector).css({'left':xxx,'top':xxx})

5.jQuery效果动画

基本的隐藏和显示

$('div').hide(
隐藏匹配的元素
$('div').show0
显示匹配元素
$('div').toggleo
切换隐藏或显示状态

淡入淡出

$('div').fadeIn()
通过淡出的方式隐藏匹配的元素
$('div').fadeOut()
通过淡入的方式显示匹配元素
$('div').fadeToggle()
切换隐藏或显示状态

滑动

$('div').slideDown0
用滑动动画隐藏匹配的元素
$('div').slideUp()
用滑动动画显示匹配元素
$('div').slideToggle()
切换隐藏或显示状态

animate() 方法

$(selector).animate({params},speed,callback);
//定义—个自定义动画
$( '.show' ).click(function () {
s( 'div ' ).animate({
width: 580,height: 300
},1000,'linear' , function () {
console.log("动画运动完毕")
})
})

停止动画和结束动画

stop
//立刻定制动画
$( " div " ).stop() //就停止再当前状态
finish
//立刻结束动画
$("div " ).finish() //停止在动画结束状态

5.ajax

$.get() 方法

$.get() 方法通过 HTTP GET 请求从服务器上请求数据。
语法2: $.get(url, [parma], callback);
1直接使用$.get方法来发送—个请求
参数一:请求地址
参数二:请求时携带的去数
参数三:请求成功的回请
参数四:返iN的或据类型
$.get( './ajax.php' , {id: 10 }, function (res) ( console.log(res) ,'json')

$.post() 方法

//直接使用$.post方法来发送一个请求
参数一:请求地址
参数二:请求时携带的参数
参数三:请求成功的回调
参数四:返回的数据类型
$.post( ' ./ajax.php' , {id: 10 }, function (res) { console.log(res)}， "json ")

$.ajax()方法

jquery.ajax([settings])。发请求并且能得知成功还是失败。 
type:类型，"POST"或者"GET"，默认是"GET".
url:发送请求的地址。
data:是一个对象，连同请求发送到服务器的数据
dataType:预期服务器返回的数据类型。如果不指定，jQuery将自动根据HTTP包含的MIME信息来智能判断，一般我们采用json个数，可以设置为"json".. success:是一个方法，请求成功后的回调函数。传入返回后的数据，以及包含成功代码的字符串。
 error:是一个方法、请求失败时调用此函数。传入XMLHttpRequest对象。

$.ajax ({
type : "POST”,
url : "service.php" ,
dataType : "json"，
 data {
name : $ ("#ataffName" ) .val() ,
number :$("#staffNumber" ) .val (),
 sex : $("#staffSex" ) .val ( ) ,
job : $("#ataffJob" ) .val ( ) ,
} ,
suecess: funetion (data) {
if(data .aucceaa){
		$("#createResult" ) .html (data .msg) ;
	}else{
		$("createReault" ) .html (“出现错误"+data.mag);
           }
} ,
errOr:function (jqXHR){
console.log("发生错误:"+jqXHR. status);
}
});

跨越

url?callback=func
jsonp: 'callback'
jsonpCallback:'func' '
 

//使用$.ajax方法也可以发送jsonp请求
//只不过dataType要写成 jsonp
$.ajax({
url: "./jsonp.php " ,
dataType: 'jsonp ' ,
data: { name : "Jack " , age: 18 },
success (res) {
console.log(res)
}，
jsonp: "cb" , // jsonp请求的时候回调函数的key
jsonpCallback : 'fn'// jsonp请求的时候回调函数的名称
})

6.jquery拓展

扩展给他自己本身

扩展给自己本身使用jQuery .extend这个方法
扩展完后的内容只能用或者jQuery来调用
//jQuery .extend接受—个参数，是一个对象，对象里面是我们扩展的方法
jQuery.extend({
max:function (...n) { return Math.max.apply(null，n) },
min:function (...n) { return Math.min .apply(null，n)}
})
扩展完毕我们就可以使用了
const max = $.max(4，5，3，2，6，1)console.log(max)// 6
const min = $.min(4, 5,3，2，6，1)console.log(min) // 1

扩展给元素集

扩展完毕以后给元素的集合使用
也就是我们用$("1i")这样的选择器获取到的元素集合来使用
使用jQuery.fn.extend()方法来扩展
//jQuery .fn.extend(）接受一个参数，是一个对象，对象里面是我们球扩展的方法
jQuery.fn.extend({
		checlked: function(){
//return关避字是为了保证路式编程
//后面的代码才是业务逻辑
	return this.each(function(){ this.checked = true })
        }
})
扩展完毕我们就可以使用了
//靠元素集台来调用
S( "input[type=checkbox]" ).checked()
//执行完毕之后,所有的复远框就都是选中状态了

jquery中$与$.fn的区别是什么？

1.Jquery的方法是可以拓展的，从调用声明创建方法的方式来看，可以归结为两类：一类直接由$符调用；另一类由$("")来调用，

2.跟面向对象语言中的静态方法和实例方法有点类似，是的，如果从java类的角度认识调用创建的Jquery方法可能更好理解些，尽管Javascript没有明确的类的概念。
$拓展的方法是静态方法，可以使用$直接调用，一般使用$.extend({});

3.$.fn拓展的方法是实例方法，必须由“对象”$("")来调用，一般使用$.fn.extend()。$.fn是jQuery原型对象