jQuery初学-选择器

jquery 是 js的封装的一个框架 快速开发
* 优点：写的少 做的比较多 处理浏览器之间的兼容性
* 把js的大量语法进行封装
jquery 在网页里面怎么去写
* jquery库
* 版本更新 出现很多库 压缩版的 完成版 3.4.1
* 开发的时候不一定越新越好 根据自己的需求去选择
* 开发 1.9.1 3.4.1
*jquery库 在head body里面都是可以引入

		attr(name|pro|key,val|fn) 获取或设置元素的属性，可以设置多个
         removeAttr(name) 可以移除自带的属性  也可以移除自定义属性  ****移除的是属性****
         prop(n|p|k,v|fn) 获取或设置元素的属性，可以设置多个，能设置自定义属性   能设置  但是  不显示
         removeProp(name) 移除的是属性值  但属性还在   编译器里面没有修改
         CSS 类
         addClass(class|fn) 添加类
         removeClass([class|fn]) 移除类
         toggleClass(class|fn[,sw]) 切换类
         HTML代码/文本/值
         html([val|fn])
         text([val|fn])
         val([val|fn|arr])*/
		 所有可以连点

jquery dom获取的时候注意元素是否初始化
$(document).ready(function (){
(内容)
});
$(function (){

});
选择器：http://jquery.cuishifeng.cn/element.html；

		**层次选择器**
		($("ul.menu li"));
        ($("ul.menu>li"));
        ($(".li2+li")); +代表下一个li
        ($(".li2~li")); ~获取当前匹配元素之后的所有
        **基本筛选器**
        ($("ul.menu>li:first"));
        console.log($("ul.menu>li:last"));
        console.log($("ul.menu>li:not(.li2)"));
        console.log($("ul.menu>li:even"));//偶数获取
        console.log($("ul.menu>li:odd"));//奇数获取
        console.log($("ul.menu>li:eq(2)"));//按照索引来获取
        console.log($("ul.menu>li:gt(2)"));//获取大于索引
        console.log($("ul.menu>li:lt(2)"));//获取大于索引
        console.log($(":header"));//获取所有的h标签
        console.log($("input:focus"));//获取获得焦点的元素
        console.log($(":root"));//直接获取html
        **内容选择器**
		 :parent
         ($("div:contains('今')"));//包含某个内容
         ($("div:empty")); //直接获取空元素
         ($("ul:has(.li2)"));//匹配包含某个元素的父元素
         ($("div:parent"));//匹配的元素必须是父元素
         可见性
       **根据元素的显示隐藏来匹配元素**
         ($("button:visible"));
         ($("button:hidden"));
        **根据元素的属性来匹配元素的**
		 ($("button[id]"));
         ($("button[id][class]"));
         ($("button[id='btn']"));
         ($("button[id='btn'][class='btn']"));
         ($("button[id!='btn']"));
        ($("button[id!='btn'][class!='btn']"));
         ($("button[id^='b']"));//获取的属性值以什么开头
         ($("button[id$='n']"));//获取的属性值以什么结尾
         ($("button[id*='n']"));//获取的属性值包含什么


         **子元素过滤选择器**
   		  子元素
         :first-child 匹配第一个子元素
         :first-of-type1.9+ 匹配父元素 里面元素的第一个 
         :last-child 匹配最后一个子元素
         :last-of-type1.9+ 匹配父元素 里面元素的最后一个
         :nth-child（） 括号里面写的是序号   1·开始
         :nth-last-child()1.9+ 选择所有他们父元素的第n个子元素。计数从最后一个元素开始到第一个
         :nth-last-of-type()1.9+ 选择的所有他们的父级元素的第n个子元素，计数从最后一个元素到第一个。
         :nth-of-type()1.9+ 属于一个父元素之下，并且标签名相同的子元素中的第n个。
         :only-child 如果某个元素是父元素中唯一的子元素，那将会被匹配，如果父元素中含有其他元素，那将不会被匹配
         :only-of-type1.9+ 所有没有兄弟元素，且具有相同的元素名称的元素。如果父元素有相同的元素名称的其他子元素，那么没有元素会被匹配。

		**表单**
		:input    匹配所有 input, textarea, select 和 button 元素
         :text   获取单行文本框的
         :password  获取密码框的
         :radio  获取单选按钮的
         :checkbox 获取复选框的
         :submit  获取表单提交的
         :image
         :reset  获取重置按钮
         :button   获取button
         :file   获取文件路径
         
         **表单对象属性**
         :enabled  获取可用的标签
         :disabled  获取不可用的
         :checked
         :selected   下拉菜单

		**混淆选择器**
		*版本低  .escapeSelector is not a function*
        console.log("."+$.escapeSelector(".box"));//\.box
        console.log($(".block").find("."+$.escapeSelector(".box")));

HTML代码/文本/值
html([val|fn])
text([val|fn])
val([val|fn|arr])

        类似js里面的innerHTML   innerText   value
        html  获取或设置元素的html值
        text  获取或设置元素的文本值
        val 获取或设置元素的value值
        ($("div").html());获取当前元素的html值
        ($("div").text());获取当前元素的text值
        ($("input").val());

        设置值
        $("div").html("<p>测试html</p>");
        $("div").text("<p>测试text</p>");不会自动解析标签
        $("input").val("你好");设置元素的value值

        **回调函数**
        $("div").html(function (index,old){
           			console.log(index, old);
          return '<p>新的html</p>';
        });


        $("div").text(function (index,old){
            console.log(index, old);
            return '<p>新的html</p>';
        });

        $("input").val(function (index,old){
            console.log(index,old);
            return old+"新的值"+index;
        });


        css()  操作元素css样式
          获取或者设置元素的css
          参数是获取的css的样式名称
       	  ($("button").css("border"));获取border样式
        不能获取多个样式
        $("button").css("color","red");
        css如何设置多个属性值
        $("button").css({
            color:"blue",
            backgroundColor:"red",
        /   borderWidth:"10px"
        });
        *设置多个css的时候  样式名称要规范*


        **位置**
        
        offset([coordinates])
        position()
        scrollTop([val])
        scrollLeft([val])
        offset()  返回值是一个对象  {left:0,top:0}
        ($("button").offset());  类似js  offsetLeft  offsetTop  在当前视口里面的偏移量
        var offset=$("button").offset();
        offset.left  ||   offset.top
        参数是设置的偏移  设置offset  自动添加  相对定位
        $("button").offset({left:100,top:100});
        position 相对于当前的父元素的偏移  返回值{left:0,top:0}
        ($("button").position());

        ***滚动距方法   获取或设置滚动条的距离***

		($(window).scrollTop());
        ($(window).scrollLeft());
        可以设置  网页刷新无效   网页重新打开是有效的
        设置的时候不带像素单位
        $(window).scrollTop(100);
        $(window).scrollLeft(300);