C# 面试前端

1.Jquery

//操作属性
        //获取属性的值：只写第一个参数，属性的名字 attr()
        //alert($('#btnShow').attr('value'));
        
        //设置属性的值：写两个参数，第一个表示属性的名字，第二个表示值
        //$('#btnShow').attr('value', 'Hello World');
        
        //prop表示html的原有属性，attr而表示扩展属性
        //如：img的src操作使用prop，而href操作使用attr
        //一般使用attr因为各种情况都适用
        //$('img').attr('href', 'abc');


        //移除属性
        //$('#btnShow').removeAttr('value');

 //对于value属性的一种简写操作
    //$('#btnShow').attr('value');=>
        //$('#btnShow').val('');
        
        //为按钮绑定点击事件
        //$('#btnShow').click(function() {
        //    alert(this.value);//this是dom对象，不能调用jquery的成员
        //});

//jquery事件注册：支持多播，一个事件可以指定多个处理函数
        $('#btnShow').click(function() {
            alert(1);
        });
        $('#btnShow').click(function() {
            alert(2);
        });

 //表示加载完成后执行此代码:dom就绪，指标签加载完成，这时，标签指定的资源可能还没有加载完成
        //$(document).ready(fun);简写如下：
        $(function() {
            $('#btnShow').click(function() {
                alert(1);
            });

 <script>
        $(function () {
            //找到按钮，并绑定点击事件
            $('#btnShow').click(function() {
                //找到文本框并获取值
                var num = parseInt($('#txtNum').val());//直接调用js的成员进行操作
                num++;
                //将值显示到文本框
                $('#txtNum').val(num);//传递参数时，表示将值赋给value
            });
        });
    </script>

 

3. 如果直接

 //获取所有按钮，得到jquery对象，为对象注册点击事件
   //隐式迭代：自动将数组当的每个元素都执行一遍操作
  //当前：会将数组中的每个input进行click绑定

$(function () {
            $('input').click(function () {  这样是直接当
                this.value = 'ee';
            })
        }

4.//对于标签对，使用text()、html()进行设置或获取
                $('#txt1').text('这是个div');

5.jqjquery事件

   $('#btnRemove').click(function() {
                //$('#divContainer').remove();
                $('<span style="color:red">sadkfjlsad</span>').insertBefore('#divContainer');
            });

6. //$.each(obj,fun(i,n))
        //如果obj是数组，则i是索引，n是元素
        //如果obj是对象或键值对，i是键，n是值

  $.each(datas, function (key, value) {
                //根据数据创建option并追加到select上
                $('<option value="' + key + '">' + key + '</option>').appendTo(select);
                
            });

 $.each(citys, function(index, item) {
                $('<option>' + item + '</option>').appendTo(selectCity);

 $.each(list, function() 

7 JQUERY设置样式

  $(function () {
            //设置样式
            //$('#btnShow').css('background-color', 'red');
            //设置多个样式
            $('#btnShow').css({
                'color': 'white',
                'background-color': 'blue',
                'font-size': '20px'
            });
        });

在JQ中$(document.body)和这个$("body") 这两的区别在哪里？

 所以它们的区别在于效率，$(document.body) 高于 $("body")

8.子节点选择

  $(function () {
            $('li').hover(function ()
            {//移上
                $(this).css('background-color', 'red')
                    .prevAll()//这个方法找到当前节点的所有节点，破坏了当前的链
                    .css('background-color', 'yellow')
                    .end()//恢复最近的一次链的破坏
                .nextAll()
                .css('background-color', 'blue')
                ;
            }, function () {//移开
                $(this).css('background-color', 'white')
                    .siblings().css('background-color', 'white');//获取左右的兄弟节点
            });
        });

属性选择器

 $(function() {
            $('input');
        });

 9 函数的调用
  function Person(fn) {
            this.id = 20;//为类定义了属性id
            //this.sayId2 = fn;
        }
 showId.call(new Person());//call表示由哪个对象来调用这个方法，方法中的this就是这个对象
//call与apply(调用参数)的意义：在不改变对象源代码的情况下，可以让函数内部的this表示当前对象
10 权限选择器
 //为“全部右移”按钮绑定事件
            $('#btnRightAll').click(function () {
                //获取所有子元素,追加到右边的select中children
                $('#selectLeft').children().appendTo('#selectRight');
            });
//为“选中右移”按钮绑定事件
            $('#btnRight').click(function () {
                //获取到所有被选中的option 空格:selected(选择表单属性)
                $('#selectLeft :selected').appendTo('#selectRight');
            });
 //为复选框chkAll设置点击事件，完成全选、全消的功能
            $('#chkAll').click(function () {
                //根据当前复选框的状态设置其它行复选框的状态
                $('#list :checkbox').attr('checked', this.checked);
            });
//反选
            $('#btnReverse').click(function () {
                //获取实际数据行的复选框
                $('#list :checkbox').each(function() {//jquery对象.each
                    this.checked = !this.checked;
                });
            });
表格数据

11 $('#msgTxt')[0].setSelectionRange(1, 7);//将dom <==jquery 对象

 //将jquery对象转换成dom对象：通过[下标]的形式返回dom对象
   //[p, p, p, p, p, prevObject: init(1), context: document, selector: "p"]
  //通过jquery的选择器得到的数组，才是jquery对象，才可以调用jquery的成员
            //将dom对象转换成jquery对象：$(dom对象)

  $(this).val('abc');//dom==>jquery

上面的代码中div是一个Dom元素, 我们可以将Dom元素转换成jQuery包装集:
var domToJQueryObject = $(div);
$('#btn').bind('click',function(){

alert('点击; ')

})

 等价于

$('#btn').click(function(){

})

(2) jQuery包装集转Dom对象
jQuery包装集是一个集合, 所以我们可以通过索引器访问其中的某一个元素:
var domObject = $("#testDiv")[0];

例子

字体还有多少个,减少多少个

 $(function () {
            //设置文本框默认值
            $('#msgTxt').val('#输入话题标题#')
                //计算字符个数
                .keyup(function() {
                    var txtLength =140- $(this).val().length;//剩余的
                    if (txtLength >= 0) {//在140范围内
                        $('.countTxt').css('color','black').html('还能输入<em>'+txtLength+'</em>字');
                    } else {//超过
                        $('.countTxt').css('color', 'red').html('已经超过<em>'+-1*txtLength+'</em>字');
                    }
                });

 $('#msgTxt').val($('#msgTxt').val()+'@'+$(this).text()); 拿到里面的值,并且加@

.one('click',function() {//在对象上执行一次指定事件
   .css('cursor','pointer')//设置小手图标

注册事件$('#btn').bind('click',function(){
})