jquery

1:把jQuery对象转DOM对象两种方式:

$(btnObj).get(0);---->DOM对象
$(btnObj)[0];----->DOM对象

 

 

2:常见的几个方法

.html()方法,设置标签中间显示其他标签及内容,类似于innerHTML
.text()方法,设置标签中间显示的文本内容,类似于innerText
.val()方法.设置input标签中value的值,类似于value
.css()方法,.设置元素的样式,类似于style

 

3:获取元素

#select>option:selected  被选中的option

获取的是div中所有的p标签元素
$("#dv p").css("backgroundColor","red");


获取的是div中所有直接的子元素
$("#dv>p").css("backgroundColor","red");


获取的是div后面的第一个p标签元素
$("#dv+p").css("backgroundColor","red");


获取的是div后面所有直接的兄弟元素p标签元素
$("#dv~p").css("backgroundColor","red");

$("ul>li:even").偶数

$("#uu>li:eq(4)") 获取ul中的索引为4的li标签元素

 

.next();获取的是当前元素的下一个兄弟元素
$(this).next().css("backgroundColor","green");
.nextAll();获取的是当前元素的后面的所有的兄弟元素
$(this).nextAll().css("backgroundColor","green");
.prev();获取的是当前元素的前一个兄弟元素
$(this).prev().css("backgroundColor","green");
.prevAll();获取的是当前元素的前面的所有的兄弟元素
$(this).prevAll().css("backgroundColor","green");
.siblings();获取的是当前元素的所有的兄弟元素(自己除外)
$(this).siblings().css("backgroundColor","green");

var spanObj=$("#dv>span").clone();//克隆

 

选择checkbox

 

<div id="dv">
<input type="checkbox" value="1"/>吃饭
</div>
$("#dv :checkbox")

 

 

 

 

4:添加样式

* .css()
* .css("属性","属性值");
* .css("属性","属性值").css("属性","属性值");
* .css({"属性":"属性值","属性":"属性值"});
* addClass()
* addClass("类样式名字");添加一个类样式
* addClass("类样式名字1 类样式名字2");
* removeClass()
* removeClass("类样式名字");移除类样式
* removeClass();移除的是当前元素中所有的类样式
* hasClass();判断当前元素是否应用了某个类样式
* toggleClass();切换元素的类样式的

 

 

5:把元素添加到div中

把超链接追加到div中
$("#dv").append(aObj);//把超链接追加到div中

把pObj对象主动的加到div中
pObj.appendTo($("#dv"));


把元素插入到某个元素的前面
$("#dv").prepend(aObj);
把元素添加到当前元素的后面(兄弟元素来添加)
$("#dv").after(aObj);
把元素添加到当前元素的前面(兄弟元素来添加)
$("#dv").before(aObj);

 

$("#dv").html("");//清空元素中的内容
$("#dv").empty();//清空元素中的内容
$("#dv").remove();//移除元素自身---自杀

 

 

6:自定义属性

//attr();可以写两个参数:1参数;属性,2属性值
//attr();只写了一个参数,获取该元素的这个属性的值
aObj.attr("title","自定义属性");
$("#dv").append(aObj);
console.log(aObj.attr("href"));

 

 

7:可以改变某一项选中

 

$("#btn").click(function () {
 $("#se").val(4);
});

 

<select id="se">
 <option value="4">北京</option>
</select>

 

 

8:

prop()可以真正的获取元素是否选中的状态
var flag=$("#ck").prop("checked");//获取选中状态
$("#checkbox").prop("checked",false);

 

 

9:设置left和top的值

console.log($("#dv").offset().left);
console.log($("#dv").offset().top);
$("#dv").offset({"left":200,"top":200});

 

 

10:设置宽和高

var width=$("#dv").width()*2;
var height=$("#dv").height()*2;
$("#dv").width(width);
$("#dv").height(height);

 

 

11:获取scrollTop

 

$(document).click(function () {
//获取的卷曲出去的距离----->数字类型
console.log($(this).scrollLeft()+"===="+$(this).scrollTop());
});

 

 

12:获取当前的索引

var index=$(this).index();

 

13:绑定事件:

* bind:
* 绑定多个事件
* 参数:{"事件的类型":事件处理函数,....}
* delegate
* 参数:父级元素.delegate("子级元素","事件类型",事件处理函数)
* on
* 参数:父级元素.on("事件类型","子级元素",事件处理函数);

 

解绑事件:

* bind
* unbind
*
* on
* off
*
* delegate
* undelegate
如果说父级元素和子级元素都是通过正常的方式绑定事件,如果通过off解绑的时候,父级元素的事件解绑了,子级元素的事件没有解绑
但是:如果子级元素是通过父级元素调用delegate的方式绑定的事件,父级元素使用off方式解绑事件,这个时候父级元素和子级元素的相同的事件都会被解绑

 

 

14:触发事件

$(function () {
$("#btn1").click(function () {
  $(this).css("backgroundColor","red");
});
//点击第二个按钮调用第一个按钮的点击事件---触发第一个按钮的点击事件
$("#btn2").click(function () {
//触发事件--3三种方式
  //$("#btn1").click();
  //trigget()方法中需要写上触发事件的名字
  //$("#btn1").trigger("click");//触发事件
  $("#btn1").triggerHandler("click");//触发事件
});
});

 

 

 

15:触发文本框的获取焦点的事件

$("#txt").focus();

 

16:var keyCode=e.keyCode;//键盘按下后的键对应的键值

 

17:取消事件冒泡+取消超链接的默认的点击事件  return false;

 

18:return this;

function Student(name) {
  this.name=name;
  this.sayHi=function (name) {
  if(name){
    console.log("俺是"+name);
    return this;
  }else{
    console.log("我的名字叫"+this.name);
    return this;//把当前对象返回
    }
};
  this.eat=function () {
  console.log("我就是喜欢吃大蒜+榴莲+臭豆腐");
  };
}
var stu=new Student("小明");
stu.sayHi().eat();

 

 

19:不同的元素不同的设置方式--each方法

$(function () {
//页面加载后,让每个li的透明度发生改变
//不同的元素不同的设置方式--each方法
$("#uu>li").each(function (index,element) {
//第一个参数是索引,第二个参数是对象
//console.log(arguments[0]+"====="+arguments[1]);
$(element).css("opacity",(index+1)/10);
});
});

 

20:trigger的用法

$(window).on("resize",function(){
  var width = $(window).width();
  if(width > 768){
  $(".carousel-inner").addClass("wjs_pc_banner");
  $(items).each(function(index,value){
  var item = $(this);
  item.css("backgroundImage","url('./images/slide_0"+ (index+1) +"_2000x410.jpg')")
  });
  } else {
  $(".carousel-inner").addClass("wjs_phone_banner");
  $(items).each(function(index,value){
  var item = $(this);
  item.html("<img src='./images/slide_0"+ (index+1) +"_640x340.jpg'>");
  });
  }
}).trigger("resize");

 

 

21: 获取宽度的方法的说明:

* width():它只能得到当前元素的内容的宽度
* innerWidth():它能获取当前元素的内容的宽度+padding
* outerWidth():获取当前元素的内容的宽度+padding+border
* outerWidth(true):获取元素的内容的宽度+padding+border+margin

 

posted @ 2020-04-08 19:55  花木兰r  阅读(133)  评论(0编辑  收藏  举报