Jquery知识点总结

Posted 2020-12-29 itworkerlittlewrite

jquer对象和DOM对象互转
dom--->  jquery
通过$包装,  var   a  = $(dom)
jQuery---> dom   jQuery本身是一个数组
$  (dom)[0]

页面加载完成   两种方式的不同
$( function(){} );  -- 可以顺序执行不同的内容
window.onload = function(){} --前一个执行内容将被最后加载函数覆盖

JQ的函数: 属性操作函数
    setAttribute(属性名,属性值)
    getArrtibute(属性名)
    JQ: attr(属性名,属性值)设置属性
       attr(属性名) 获取属性值
样式:
改变样式属性
    $("#one").attr("class","second");
增加样式
    $("#one").addClass("second");
删除样式
    $("#one").removeClass();
样式转换
    $("#one").toggleClass("second");
    
jquer的子节点可以自杀  $("#bj").remove();
父节点可以清空所有子节点   $("#city").empty();

//把数组中的dom对象包装成jquery对象
alert($($inputs[i]).val());

全选全不选
$("input[calss=‘itemSelect‘]").prop("checked",$(ojb).prop("checked"));

选择器:

表单属性选择器
var $inputs = $("input[type=text]:disabled");

层次选择器
//选择所有body的后代div标签,层级选择器   所有后代           
$("body div")
//选择body的子标签div  只包括子标签
$("body>div")
//id为one的下一个div
$("#one+div")
//id为two后的所有兄弟div     只包含后面的
$("#two~div")
//siblings方法继续选择   包括two本身的前面后面的
$("#two").siblings("div")

过滤选择器
//第一个 div 元素
$("div:first")
//最后一个 div
 $("div:last")
//class不为 one 的所有 div 元素
$("div:not(.one)")
//索引值为偶数的 div 元素的背景
$("div:even")
//索引值为奇数的 div 元素
$("div:odd")
//索引值为大于 3 的 div 元素
$("div:gt(3)")
//索引值为等于 3 的 div 元素
$("div:eq(3)")
//索引值为小于 3 的 div 元素
$("div:lt(3)")
//所有的标题元素
$(":header")
//当前正在执行动画的所有元素
$(":animated")

属性选择器
//属性选择器,选择带有title
$("div[title]")
//获取属性值是test的元素
$("div[title=‘test‘]")
//属性值不等于test
$("div[title!=‘test‘]")
//属性值以te开始的
$("div[title^=‘te‘]")

基本选择器
//id选择器为one的标签
$("#one")
//class选择器,选择class为mini
$(".mini")
//获取标签span,和id值是two的元素
//多选择器逗号分割
$("span,#two")